html - 我该如何解决 fontawesome 问题?

标签 html css font-awesome

我从 fontawesome.com 下载了 fontawesome-free-5.8.2-web,并将 css 和 webfonts 文件放入我的元素根目录,然后在 index.html 中调用它。所以它对我来说不能正常工作,当我使用它的元素时,它只显示空方 block 。我应该怎么办? 谢谢

代码如下:

<!doctype html>
<html class="no-js" lang="">
    
    <head>
      <meta charset="utf-8">
      <title>دوره مجازی آموزش طراحی قالب وردپرس</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <link rel="manifest" href="site.webmanifest">
      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->
    
      <link rel="stylesheet" href="css/normalize.css">
      <!--<script src="https://use.fontawesome.com/84c3f8fd28.js"></script>-->
      <link rel="stylesheet" type="text/css" href="css/fontawesome.min.css">
      <!--<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>-->
      <link rel="stylesheet" href="css/main.css">
    
      <meta name="theme-color" content="#fafafa">
    </head>
    
    <body>
      <!--[if IE]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
      <![endif]-->
    
    <!--Top Bar-->
    
      <div id="top-bar">
        <div class="container">
    <nav id="top-rightmenu">
      <ul>
        <li><a href="#"><i class="fas fa-file-alt"></i> وبلاگ </a></li>
        <li><a href="#"><i class="fas fa-list-alt"></i> شغل ها </a></li>
        <li><a href="#"><i class="fas fa-bullhorn"></i> پشتیبانی </a></li>
        <li><a href="#"><i class="fas fa-globe"></i> فارسی </a></li>
      </ul>
    </nav>
          <div class="top-left-social">
            <ul>
              <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
              <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
              <li><a href="#"><i class="fab fa-instagram"></i></a></li>
              <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    <!--End Top Bar-->
    
      <script src="js/vendor/modernizr-3.7.1.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
      <script src="js/plugins.js"></script>
      <script src="js/main.js"></script>
    
      <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
      <script>
        window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
        ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
      </script>
      <script src="https://www.google-analytics.com/analytics.js" async defer></script>
    </body>
</html>

最佳答案

重要:添加支持库文件即solid.css

<link href="fonts/css/fontawesome.css" rel="stylesheet">
<link href="fonts/css/brands.css" rel="stylesheet">
<link href="fonts/css/solid.css" rel="stylesheet">

关于html - 我该如何解决 fontawesome 问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56439554/

相关文章:

javascript - React.js : Add component with value

javascript - 如何居中对齐脚本

CSS 菜单向上?

CSS - 循环遍历单词

html - Font-Awesome 图标无法通过 BootstrapCDN 呈现

css - 是否可以将一个 div 用作另一个 div 的背景图像?

html - 带有列式标题的 Flexbox 图像

sifr - sIFR是否支持像:first-child?这样的伪元素

javascript - CKEditor 和转义元素

jquery - 如何在字体很棒的图标上绑定(bind)事件?