Fontawesome 5 图标未显示在正常 HTML 和 CSS 文件中？

Question

我正在制作一个简单的网站，我想在上面放置社交媒体图标。
我去 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;
}

Answer 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"/>

Answer 2

在你的情况下先使用，如果已经使用则使用 font awesome CDN 然后将你的代码替换为 class 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>

Fontawesome 5 图标未显示在正常 HTML 和 CSS 文件中？

Fontawesome 5 icon not showing in normal HTML and CSS file?

html

css

icons

font-awesome