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

Question

I am making simple website and I want to put social media icons on it.我正在制作简单的网站，我想在上面放社交媒体图标。
I went to Fontawsome to take the icons and they are not showing on my site.我去 Fontawsome 取图标，但它们没有显示在我的网站上。

Here is the HTML:这是 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>

Here is CSS:这是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

Make sure you have installed Font Awesome Package which can be done using this command - npm install --save @fortawesome/fontawesome-free确保你已经安装了 Font Awesome 包，这可以使用这个命令来完成 - npm install --save @fortawesome/fontawesome-free

or use the CDN或使用 CDN

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

Answer 2

In your case use first, use font awesome CDN if already use then replace your code to class fa replace to fab then show your icon correctly.在您的情况下，首先使用，如果已经使用，请使用 font awesome CDN，然后将您的代码替换为 class fa替换为fab然后正确显示您的图标。

CDN: CDN：

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

Code:代码：

<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 文件中？

问题描述

2 个解决方案

解决方案1
1 2021-10-13 10:13:05

解决方案2
0 2021-10-13 10:31:19

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

问题描述

2 个解决方案

解决方案1 1 2021-10-13 10:13:05

解决方案2 0 2021-10-13 10:31:19

解决方案1
1 2021-10-13 10:13:05

解决方案2
0 2021-10-13 10:31:19