Question

我从fontawesome.com下载了fontawesome-free-5.8.2-web，并将css和webfonts文件放入我的项目根目录，并在index.html中对其进行了调用。因此，当我使用它的元素时，它对我来说是不正确的，只有它显示为空正方形。我该怎么办？谢谢

代码如下：

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

Answer 1

重要提示：添加支持库文件，即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">

如何解决字体严重问题？

1 个答案: