FontAwesome 5.0.4中带-o后缀的轮廓图标无法显示求助

嘿，这个问题我太熟了——你踩了FontAwesome 4到5版本升级的命名规则大坑啦！

核心原因：FontAwesome 5彻底重构了图标分类 #

在FontAwesome 4里，我们确实用-o后缀来区分实心/轮廓图标（比如fa fa-heart是实心，fa fa-heart-o是空心），但到了FontAwesome 5，官方完全抛弃了这个命名方式，转而用样式前缀来区分不同风格的图标：

• 实心图标：使用fas前缀（比如fas fa-heart，对应你原来的fa fa-heart）
• 轮廓图标：使用far前缀（这就是你要的空心版本，替代原来的fa fa-heart-o）
• 品牌图标：fab前缀
• 轻量实心图标：fal前缀（部分版本支持）

你在fontawesome-all.min.css里找不到-o相关声明是完全正常的，因为FA5已经彻底移除了这套旧命名。

修改你的代码 #

把需要轮廓图标的类名从fa fa-xxx-o改成far fa-xxx就可以了，以下是修改后的完整代码：

<!DOCTYPE html>
<head>
<link href="http://127.0.0.1:8000/css/fontawesome-all.min.css" rel="stylesheet">
<link href="http://127.0.0.1:8000/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Some Title</h6>
<!-- Stats -->
<p class="card-text font-weight-light">
<span class="mr-4"><i class="far fa-comment" aria-hidden="true"></i>0</span>
<span class="mr-4"><i class="far fa-heart" aria-hidden="true"></i>0</span>
<span><i class="far fa-star" aria-hidden="true"></i>0</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://127.0.0.1:8000/js/jquery-3.2.1.min.js"></script>
<script src="http://127.0.0.1:8000/js/bootstrap.min.js"></script>
</body>
</html>

额外注意 #

如果你后续发现某些far图标还是不显示，要确认你下载的FontAwesome包包含了Regular（轮廓）样式的字体文件——不过fontawesome-all.min.css对应的是完整包，应该已经包含了所有样式，所以大概率改完类名就能正常显示啦。

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