普通HTML/CSS文件中FontAwesome 5图标无法显示问题求助

修复方案 #

• 1. 修正FontAwesome资源引用链接
     你当前引入的FontAwesome样式文件链接缺少https://协议前缀，浏览器会将其识别为站点内部相对路径，无法加载外部图标资源，将<head>中的对应link标签修改为：

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

• 2. 统一品牌图标类名规则
     FontAwesome 5版本对图标分类做了拆分，所有品牌类图标需要使用fab前缀替代旧版本的fa前缀，修改HTML中的图标代码：

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

• 3. 补充CSS选择器适配fab类
     你当前的CSS仅对.fa类设置了样式，修改选择器同时匹配fab类，确保所有图标样式生效：

.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,
.social-menu ul li .fab {
    color: #000000;
    font-size: 25px;
    line-height: 50px;
    transition: .5s;
}
.social-menu ul li .fa:hover,
.social-menu ul li .fab:hover {
    color: #ffffff;
}

可选排查项：检查本地style.css是否存在对<i>标签设置display: none、visibility: hidden或覆盖font-family属性的规则，这类规则也会导致图标无法正常渲染。

内容的提问来源于stack exchange，提问作者itmemilan