个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 07:35:57 24 4
gpt4 key购买 nike

这是我的问题，我将 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>

这是图片

enter image description here

enter image description here

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

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

最佳答案

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

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

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

  1. Grab & move the CSS and web fonts into your project The fontawesome-all.css contains the core styling plus all the visual styles that you'll need when using Font Awesome. The webfonts folder contains all of the typeface files that the above CSS references and depends on.

    Copy the entire webfonts folder and the fontawesome-all.css into your project's static assets directory (or where ever you prefer to keep front end assets or vendor stuff). Make sure you remember the path for referencing.

  2. Reference the CSS Add a reference to the fontawesome-all.css styling file into the of each template or page that you want to use Font Awesome on. Pay attention to the pathing of your project and where you moved the files to in the previous step.

  3. Place icons in your UI's markup as you normally would

版本 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>

关于html - 即使我正确路由字体图标也无法正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48956952/

24 4 0
文章推荐： c - 为什么我会在 C 中收到此错误？不兼容的类型
文章推荐： python - 为什么 Python 解释器使用 repr() 来打印表达式？
文章推荐： c - 如何将新节点插入空列表？
文章推荐： python - 来自其他目录的 PyDrive client_secrets
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com