icons - 同一页面中的 Font Awesome 4和5

Question

当使用2个不同的CSS版本时，我与 Font Awesome 存在冲突。我没有尝试使用2个不同的版本，但是我的插件嵌入了一个版本，有时wordpress网站有另一个版本。

我对这个特定示例感兴趣，为什么如果第一个图标都具有相同的:before内容，为什么不显示呢？

(我已经注意到，如果fa5在页面上首先链接，则它可以正常工作)

什么是最简单的解决方案？

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>

<i class="fa fa-facebook"></i>

<i class="fab fa-facebook-f"></i>

https://jsfiddle.net/pfbx5865/1/

Answer 1

可能要同时使用两个库，请记住:样式表加载了后者的“wins”。首先加载FA5，然后让FA4覆盖FA4类更有意义。然后大多数图标将按预期显示。

下面的代码段说明了如何使用这两个库。每当使用FA4类时，都会呈现FA4样式。每当使用FA5类时，都会呈现FA5样式。如果以相反的方式加载它(首先是FA4)，则所有内容均呈现为FA5样式，如果您现在拥有FA5品牌子集(fab)中的FA4图标定义，则该样式将不起作用。

如果交换库的加载(首先加载FA5)，则可以正常工作。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>Facebook à la 4.7</label>
<i class="fa fa-facebook"></i>
<br>
<label>Facebook à la 5</label>
<i class="fab fa-facebook"></i>