Question

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

{7,6}

此代码的重要部分是我链接图标字体样式表

<!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>

在这里我调用图标设置class属性作为文档指示。

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

以下是图片

我希望你们可以帮助我。提前谢谢。

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

Answer 1

Fontawesome也需要一个指向fonts文件夹的链接

如果您访问Fontawesome ，则有关使用没有cdn的库的详细说明

查看下载，自定义和自我服务部分

Grab＆amp;将CSS和Web字体移动到项目中 fontawesome-all.css包含核心样式和所有视觉效果   使用Font Awesome时需要的样式。 webfonts文件夹   包含上面CSS引用的所有字体文件   取决于。

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



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



像往常一样在用户界面的标记中放置图标

第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>

即使我正确地路由它们，字体图标也无法正确显示

1 个答案: