字体神器5图标未显示

5

我使用Codeigniter和Font Awesome 5,已经下载了最新版本的Font Awesome 5。但是出于某种原因,我的图标没有显示出来。

问题:如何在Font Awesome 5中显示图标?我正在使用XAMPP。

它应该显示在"sign in"文本旁边,在开发者控制台中没有错误信息。

enter image description here

<!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>
7个回答

13
在获取Font Awesome 5.0.10的过程中,官网上的说明对于文件应该放在哪里有些令人困惑。我遇到了这个问题,并通过以下步骤解决了这个问题:
  1. 创建下面这个目录

    /static/styles/fontawesome/css

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

  3. 复制整个 webfonts 目录,并将其粘贴到/static/styles/fontawesome中(与css目录处于同一级别)

  4. 在 html header 中添加以下内容 <link rel="stylesheet" href="static/styles/fontawesome/css/fontawesome-all.css">

  5. 使用相应版本文档(5.0.10)添加图标标签
    <i class="fas fa-tachometer-alt"></i>

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

这可能不适用于每个人,但希望能帮助到在这个令人沮丧的问题上遇到困难的人!


我们如何使用循环与 Font Awesome 5? - Donny Akhmad Septa Utama
在fontawesome 4中,我们可以使用'<i class="fa '.$icon.' "></i>'。 那么在fontawesome 5中呢?如何添加fa、fas、fab、far、fal? - Donny Akhmad Septa Utama
对我来说运行得很好。谢谢伙计 :) - Shashank
仅使用免费的图标集。 - Yousef Altaf

3

您正在使用 fas fa-sign-in-alt 这是 Font Awesome 5 的专业版,您需要获取许可证才能使用它们。您可以从这里获取您的图标。

参考资料:https://fontawesome.com/pro


不是真的,在5.3.1版本中至少是免费的(稳定版)。 - Michal
@Michal,现在我不确定。 - Abhishek Ekaanth

2
我知道这个帖子已经很旧了,但我还是想发表一下,以便有所帮助。
我也在Font Awesome 5中遇到了与fas fa-virus相同的问题。正如@zipzit所提到的,在使用CDN时,完整性哈希确实很重要。在这种情况下,最好的选择是注册Font Awesome,创建一个工具包并将其添加到<head>标记中的html文件中。这样,所有免费图标("fa"、"fab"、"fas"、"far"、"fal")似乎都能正常工作。 示例:
<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>

1

Codeigniter 3/Bootstrap 4/Font Awesome 5

PHP文件

  1. 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

  1. 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;


1
在我的情况下,我在本地主机上使用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; 

0
对于任何通过CDN和JavaScript下载使用Font Awesome的人来说,完整性哈希值非常重要(其中包括solid.js和fontawesome.js)。在我的情况下,我有点懒惰,将脚本链接更新到了一个新版本,但没有更新哈希。我可以在Chrome开发工具中看到下载的两个文件,但它们无法正常运行...完整性哈希一定要与其原始来源完全匹配...
    <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>

糟糕。


0

对我来说,我执行了以下步骤:

  1. 在您的 .scss 文件中导入这些文件(根据您项目 scss 文件夹的路径进行更改):
@import "../_fontawesome-free-5.15.4-web/scss/fontawesome";
@import "../_fontawesome-free-5.15.4-web/scss/regular";
@import "../_fontawesome-free-5.15.4-web/scss/brands";
@import "../_fontawesome-free-5.15.4-web/scss/solid";
@import "../_fontawesome-free-5.15.4-web/scss/v4-shims"
  1. 更改“/fontawesome/scss/_variables.scss”文件(更改与已编译的CSS文件和Webfonts文件夹相关的路径):

$fa-font-path: "../fontawesome/webfonts" !default;


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接