Fontawesome 5 图标未显示在普通 HTML 和 CSS 文件中？答案

【问题标题】：Fontawesome 5 icon not showing in normal HTML and CSS file?Fontawesome 5 图标未显示在普通 HTML 和 CSS 文件中？
【发布时间】：2021-10-13 09:36:22
【问题描述】：

我正在制作简单的网站，我想在上面放置社交媒体图标。
我去 Fontawsome 拿了这些图标，但它们没有显示在我的网站上。

这是 HTML：

    <head>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" 
      href="use.fontawesome.com/releases/v5.0.8/css/all.css">
    </head>


    <div id="social-menu">
          <div class="social-menu">
            <ul>
              <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
        </div>

这里是 CSS：

.social-menu ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    display: flex;
}
.social-menu ul li {
    list-style: none;
    margin: 0 10px;
}
.social-menu ul li .fa {
    color: #000000;
    font-size: 25px;
    line-height: 50px;
    transition: .5s;
}
.social-menu ul li .fa:hover {
    color: #ffffff;
}

【问题讨论】：

阅读：Get Started 你可能没有链接样式表链接。
use.fontawesome.com/releases/v5.0.8/css/all.css"> 我做到了
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"> 使用它。让我知道这是否有效，然后我会将其添加为答案。您也可以接受我对您帖子的编辑吗？

标签： html css icons font-awesome

【解决方案1】：

确保您已安装可以使用此命令完成的 Font Awesome 包 - npm install --save @fortawesome/fontawesome-free

或使用 CDN

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

【讨论】：

【解决方案2】：

在您的情况下，首先使用字体真棒CDN（如果已经使用）然后将您的代码替换为类fa替换为fab然后正确显示您的图标。

CDN：

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

代码：

<div id="social-menu">
    <div class="social-menu">
        <ul>
            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        </ul>
    </div>
</div>

【讨论】：