Question

我使用codeigniter和Font Awesome 5我已经下载了最新版本的字体真棒5但是由于某些原因我的图标没有显示

问题如何让图标显示在字体中真棒5我正在使用xampp

它应该显示在登录文本旁边，开发控制台中没有错误

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo $title;?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/bs/css/bootstrap.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/stylesheet.css');?>">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/plugins/fa/web-fonts-with-css/fontawesome-all.min.css');?>">
    <script type="text/javascript" src="<?php echo base_url('assets/js/jquery-3.2.1.slim.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/js/popper.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/plugins/bs/js/bootstrap.js');?>"></script>
</head>
<body>

<div class="row mb-3">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <a href="<?php echo base_url('login');?>" class="btn btn-dark"><i class="fas fa-sign-in-alt"></i> Sign in</a>
    </div>
</div>

</body>
</html>

Answer 1

在获取5.0.10运行的字体真棒网站上的说明有点令人困惑，当涉及到哪些文件应该去哪里。我遇到了这个问题并通过以下步骤解决了这个问题：

创建以下目录

<强> /静态/风格/ fontawesome / CSS



将所有fontawesome css文件复制并粘贴到上面的目录中



复制整个webfonts目录并粘贴到 / static / styles / fontawesome （这样它与css处于同一级别   目录）



将以下内容添加到您的html标头中   <link rel="stylesheet" href="static/styles/fontawesome/css/fontawesome-all.css">



使用相应的版本文档（5.0.10）为您的代码添加图标标签   <i class="fas fa-tachometer-alt"></i>

注意：如果您没有专业版许可证，请务必仅使用免费套装中的图标。 https://fontawesome.com/icons?d=gallery&m=free

这可能对每个人都不起作用，但希望能帮助某人解决这个令人沮丧的问题！

Answer 2

您正在使用fas fa-sign-in-alt这是Font Awesome 5的专业版，您需要获得许可证，然后才能使用它们。您可以从here

获取图标

参考https://fontawesome.com/pro

Answer 3

在我的情况下，我在本地主机上的fontawesome上得到方形图标，因为我没有在config \ config.php中设置base_url值

$config['base_url']    = ''

当我将base_url更改为

时，它开始工作

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://';
$newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

Answer 4

Codeigniter 3 / Bootstrap 4 / Font Awesome 5

PHP文件

header.php文件和CSS实施插件。将<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/fontawesome-all.min.css">更改为以下内容：

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/vendor/font-awesome/css/fontawesome-all.min.css');?>">

CODEIGNITER 3

application / config / config.php。将$config['base_url'] = '';更改为以下内容：

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://'; $newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']); $config['base_url'] = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

Answer 5

对于任何通过CDN和Javascript使用Font Awesome的人（solid.js和fontawesome.js），完整性哈希都很重要。就我而言，我很懒，并且将脚本链接更新为较新的版本，而没有更新哈希。我可以在Chrome devtools中看到两个下载的文件，但是它们不起作用。.完整性哈希必须与原始源绝对匹配...

    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

糟糕。

Answer 6

我知道此线程很旧。但是，发布此信息以防他人使用。

我也遇到了fas fa-virus的Font Awesome 5中的同一问题。如@zipzit所述，在使用CDN时，完整性哈希确实很重要。在这种情况下，最好的选择是使用Font Awesome进行注册，创建一个工具包，然后将其添加到<head>文件的html标签中。这样，所有免费图标（“ fa”，“ fab”，“ fas”，“ far”，“ fal”）似乎都可以正常工作。

示例：

<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>

字体真棒5个图标没有显示

6 个答案: