即使我正确路由字体图标也无法正确显示答案

【问题标题】：Fonts icons not showing properly even if I route them correctly即使我正确路由字体图标也无法正确显示
【发布时间】：2018-08-04 01:07:43
【问题描述】：

这是我的问题，我将 fontawesome 文件下载到我的项目文件夹中，因为我假装实现我的项目的地方有代理限制，所以大多数网站和 CDN 都被限制，我遇到的问题是我可以'不能正确显示我的图标，只要我在存储在与我的项目根文件夹不同的路径上的文件上使用这些图标，我只会得到这些方形符号。这里有我的 html 代码和一些图片来证明我的观点。

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-    scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../../css/global.css">
  <link rel="stylesheet" href="../../icons/fawe/css/fontawesome-all.min.css">
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">

    <header class="row bg-dark align-items-center">
      <div class="col-auto">
        <a href="#">
          <img src="../../imagenes/pdvsa.svg" width="140px" height="40px">
        </a>
      </div>

      <div class="col-auto">
        <p class="acron-sistema">SAGEPCYS</p>
      </div>

      <div class="col hidden-xs hidden-sm">
        <p class="titulo-sistema">Sistema Automatizado de Gestión a la Plataforma de Control y Seguridad.</p>
      </div>
    </header>

    <section class="row">
      <nav class="col-md-2 d-none d-md-block bg-dark sidebar">
        <div class="sidebar-sticky">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">
                <span class="far fa-file-alt"></span> Cargar Documentos
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="file"></span> Orders
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="shopping-cart"></span> Products
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="users"></span> Customers
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="bar-chart-2"></span> Reports
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                <span data-feather="layers"></span> Integrations
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </section>

  </div>
</body>

</html>

这段代码的重要部分是我链接图标字体样式表的地方

<link rel="stylesheet" href="../../icons/fawe/css/fontawesome-all.min.css">

在这里，我将图标设置为文档所示的类属性。

<a class="nav-link active" href="#">
  <span class="far fa-file-alt"></span> Cargar Documentos
</a>

这是图片

我希望你们能帮助我解决这个问题。提前致谢。

编辑：添加了 webfonts 文件夹的内容

【问题讨论】：

除了下载 .css 文件之外，您还必须下载 CDN 在使用时所做的 Fonts 文件夹
@happymacarts 字体文件位于 webfonts 文件夹中，您可以在项目文件夹树图片的末尾看到该文件夹。
您的控制台是否收到任何错误？缺少文件 xyz...？
@happymacarts 一点也不，控制台也干净得要命...

标签： html css fonts icons

【解决方案1】：

Fontawesome 还需要一个指向字体文件夹的链接

如果你访问Fontawesome ，有非常详细的关于在没有cdn的情况下使用库的说明

查看下载、自定义和服务自己部分

将 CSS 和网络字体抓取并移动到您的项目中 fontawesome-all.css 包含核心样式以及所有视觉效果使用 Font Awesome 时需要的样式。网络字体文件夹包含上述 CSS 引用的所有字体文件和取决于。

将整个 webfonts 文件夹和 fontawesome-all.css 复制到您的项目的静态资产目录（或您喜欢保留的任何位置前端资产或供应商的东西）。确保你记住路径参考。

引用 CSS 将 fontawesome-all.css 样式文件的引用添加到您想要的每个模板或页面的使用字体真棒。注意你的项目的路径和您在上一步中将文件移动到的位置。

像往常一样在 UI 的标记中放置图标

第 5 版

<i class="fas fa-file-alt"></i> --> for solid icons
<i class="far fa-file-alt"></i> --> for regular icons
<i class="fal fa-file-alt"></i> --> for light icons (pro only)

第 4 版

<i class="fa fa-file-alt"></i>

【讨论】：

webfonts文件夹也在css文件所在的css文件夹同级的项目文件夹中，因为我可以看到图标正确显示，所以路由似乎有些问题在我的登录页面上，因为它位于根项目文件夹中..
这些在您的“公共”文件夹中吗？您的所有 css 都应该可以在任何框架路由或 AUTH 之外的根级别访问
其他所有 CS 加载正常吗？
你用的是哪个版本的fontawesome？
是的，我所有其他的 CSS 文件都在正确加载，我实际上使用 bootstrap 作为前端框架，但没有别的，而且 Bootstrap 加载正常，并且 fontawesome 的图标类发生了变化从第 4 版到第 5 版，实际上我是直接从 FA 网页上的 cheashet 复制和粘贴课程..

【解决方案2】：

我设法正确显示图标，显然图标只能显示在根文件夹和根目录下一级，当然取决于您将图标放在项目中的位置......这是最好的方法我能找到的解决方案...希望它可以帮助某人...

【讨论】：