5

我使用 codeigniter 和 Font Awesome 5 我已经下载了最新版本的 font awesome 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>
4

7 回答 7

12

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

  1. 创建以下目录

    /静态/样式/fontawesome/css

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

  3. 复制整个 webfonts 目录并粘贴到/static/styles/fontawesome（使其与 css 目录处于同一级别）

  4. 将以下内容添加到您的 html 标头 <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

这可能不适用于所有人，但希望它可以帮助某人解决这个令人沮丧的问题！

于 2018-04-12T21:31:58.767 回答
3

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

参考https://fontawesome.com/pro

于 2018-02-23T05:05:22.660 回答
2

I understand that this thread is old. However, posting this in case it helps someone.

I too ran into the same issue in Font Awesome 5 with fas fa-virus. As @zipzit mentioned, while using a CDN, the integrity hash does matter. The best option, in this case, is to signup with Font Awesome, create a kit and add that to the <head> tag of the html file. This way, all the free icons ("fa","fab","fas","far","fal") seem to work.

Example:

<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>
于 2020-05-21T11:43:44.010 回答
1

Codeigniter 3/Bootstrap 4/Font Awesome 5

PHP文件

  1. 带有 CSS 实现插件的 header.php 文件。更改<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');?>">

代码点火器 3

  1. 应用程序/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;

于 2018-09-10T18:35:18.537 回答
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;
于 2018-08-24T13:36:19.873 回答
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;

于 2021-10-03T08:14:51.090 回答
0

对于任何通过 CDN 和 Javascript 下载（solid.js 和 fontawesome.js）使用 Font Awesome 的人来说，完整性哈希很重要。就我而言，我变得懒惰，并将脚本链接更新为较新的版本，而不更新哈希。我可以在 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>

哎呀。

于 2019-07-25T01:39:11.753 回答