Font Awesome 4.7.0中Google Play图标无法显示问题求助

我一眼就看出问题所在啦——你用的是Font Awesome 4.7.0版本，但fab fa-google-play这个类名是Font Awesome 5及以上版本才有的品牌图标前缀规则！

问题根源 #

Font Awesome 4.7.0里，所有图标（包括品牌类）都统一使用fa前缀，没有fab（Font Awesome Brands）这个单独的前缀。你现在用fab，4.7.0的CSS里根本找不到对应的样式，所以图标显示不出来。而Apple图标用fa fa-apple是符合4.7.0规则的，所以能正常显示。

两种解决方案 #

方案1：继续使用Font Awesome 4.7.0

只需要把Google Play图标的类名从fab fa-google-play改成fa fa-google-play就行，修改后的代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fa fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fa fa-google-play"></i>Download 2</button>

方案2：升级到Font Awesome 5+（推荐，支持更多图标）

如果你想使用fab这类新前缀，需要把引入的CSS换成Font Awesome 5或更高版本的CDN。比如换成最新的免费版CDN，然后保持fab fa-google-play的写法即可：

<!-- 引入Font Awesome 6免费版CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fa fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i>Download 2</button>

（注：Font Awesome 5+里，fa-apple也可以写成fab fa-apple，因为Apple属于品牌图标，两种写法在免费版里都能生效）

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