文章/答案/技术大牛

发布

社区首页 >问答首页 >字体图标显示不正确，即使我正确地路由它们。

问字体图标显示不正确，即使我正确地路由它们。
EN

Stack Overflow用户

提问于 2018-02-23 22:11:24

回答 2查看 734关注 0票数 0

这是我的问题，我下载了我的项目文件夹中的字体文件，因为我假装实现我的项目的地方有代理限制，所以大多数网站和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文件夹的内容

html

css

fonts

icons

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-02-26 15:12:17

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

票数 0

Stack Overflow用户

发布于 2018-02-23 22:16:40

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

如果您访问丰塔西，有关于在没有cdn的情况下使用库的详细说明。

查看下载、自定义并为您自己提供部分

抓取&将CSS和web字体移动到您的项目中-all.css包含核心样式以及使用字体时需要的所有视觉样式。webfonts文件夹包含上面CSS引用和依赖的所有字体文件。将整个webfonts文件夹和fontawesy-all.css复制到项目的静态资产目录(或者任何您喜欢保存前端资产或供应商内容的地方)。确保您记得引用的路径。
引用CSS将对fontawesall.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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48956952

复制

相似问题

问字体图标显示不正确，即使我正确地路由它们。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体图标显示不正确，即使我正确地路由它们。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体图标显示不正确，即使我正确地路由它们。
EN