同一页面中的字体真棒 4 和 5

Question

当使用 2 个不同的 css 版本时，我与字体 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

可以并行使用两个库，请记住：样式表加载了后者“获胜”。先加载 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>

Answer 2

不幸的是，我没有关于如何使它们并行工作的好的建议 - 这感觉就像一罐蠕虫，我会尽力避免这种情况。您说的是“我的插件”——这是否意味着您开发了它？如果我可以控制代码并且知道它可能在这两种环境中使用，我会添加一个配置选项来选择 FA4 或 FA5 环境，然后创建适当的标签。

WRT 第一个图标未显示在您的示例中：您说如果以相反的顺序加载脚本，您会注意到相反的效果。您的答案已经存在：两个 .css 文件对 .fa 类都有不同的定义。我猜破坏你的样本的是这个（来自https://use.fontawesome.com/releases/v5.0.8/css/all.css：

.fa,.far,.fas{
    font-family: Font Awesome\ 5 Free;
}

与此相反（来自FA4）：

.fa{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }