Font Awesome 5.0.8中比特币、脸书等图标无法显示的技术问询

你绝对不是唯一遇到这个问题的人！很多从Font Awesome旧版本升级到5.x的开发者都会碰到这类图标渲染失败的情况，我来帮你拆解原因和解决办法：

核心问题1：CSS文件引入错误 #

你当前引入的是fontawesome.css，但在Font Awesome 5中，这个文件仅包含基础样式框架，没有包含具体的图标字体（尤其是品牌类图标）的定义。免费版用户需要引入all.css才能加载所有免费图标（包括Solid、Regular和Brands系列）。

核心问题2：图标类名已变更 #

Font Awesome 5对大量图标类名做了调整，尤其是品牌类图标，必须使用对应的专属前缀：

• 比特币图标：旧版本的fa-btc/fa-bitcoin已废弃，需要改为fab fa-bitcoin（fab是品牌图标的专属前缀）
• Facebook图标：旧的fa-facebook需要改为fab fa-facebook，fa-facebook-f是正确的，但同样需要fab前缀和对应的字体包支持
• Twitter图标：旧的fa-twitter需要改为fab fa-twitter

修正后的代码示例 #

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<i class="fab fa-bitcoin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>

补充说明 #

如果你不想加载全部图标，也可以单独引入品牌图标包来减小文件体积：

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

不过all.css更适合大多数场景，省心且覆盖所有免费图标。另外，5.0.8是比较早期的5.x版本，存在一些已知的小bug，如果项目允许，建议升级到较新的稳定版，能获得更好的兼容性和更多图标支持。

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