当使用 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>可以同时拥有两个库，请记住：样式表加载后者“胜出”。先加载 FA5 然后让 FA4 覆盖 FA4 类更有意义。然后大多数图标按预期显示。
下面的代码片段说明了如何使用这两个库。每当使用 FA4 类时，它都会呈现 FA4 样式。每当使用 FA5 类时，都会呈现 FA5 样式。如果你以相反的方式加载它（首先是 FA4），所有内容都会呈现 FA5 风格，如果你有 FA4 图标定义现在在 FA5 品牌子集中（
fab如果你交换库的加载（首先加载 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>您实际上可以让它们一起工作，但是，您必须为其中一个编辑 CSS 并为每个图标指定一个新的不冲突的 CSS 名称。
第 1 步：在本地安装两个库。
将每个安装在单独的目录中，并命名一个 fa4 和一个 fa5（或任何你想给目录命名的名字，这样你就可以区分它们）。你不能使用 CDN 来工作。
第 2 步：编辑一个版本的 Font Awesome
选择要编辑的 Font Awesome 版本。就我而言，我已经在使用版本 4，所以我决定编辑版本 5。
在 CSS 中将 .fa 的每个实例更改为 .fa5... 除了字体文件名。
例子：
.fa-xs {
font-size: .75em; }
成为
.fa5-xs {
font-size: .75em; }
例二：
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1; }
成为
.fa5,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1; }
警告：请勿更改对字体文件的引用！
保留这些不变，即使它们的名称中有 fa。
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
你必须引用实际的文件名，文件名是什么并不重要，因为它们在不同的目录中。
第 3 步：将 CSS 链接添加到头部部分
<head>
...
<link href="fa/css/font-awesome.css" rel="stylesheet"> <!-- load all FA4 styles -->
<link href="fa5/css/all.css" rel="stylesheet"> <!-- load all FA5 styles -->
...
</head>
第四步：像普通一样调用图标
一种调用方式如下所示：
<i class="fa fa-chart-bar-o"></i> <!-- Font Awesome 4 Version of Chart -->
<i class="fa5 fa5-chart-bar"></i> <!-- Font Awesome 5 Version of Chart -->
<i class="fab fa5-cc-discover"></i> <!-- Font Awesome 5 Brand Icon for Discover -->
注意你必须使用 fab 作为品牌图标。
如果你这样做，你完全没有冲突，并且可以为两个集合使用整个库。
不幸的是，我没有关于如何让它们并行工作的好建议——感觉就像一堆蠕虫，我会尽量避免这种情况。你说的是“我的插件” - 这是否意味着你开发了它？如果我可以控制代码并且我知道它可以在两种环境中使用，我会添加一个配置选项来选择 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;
}
好吧，我为此苦苦挣扎了一段时间，偶然发现了这篇文章，但最简单的解决方案是像这样将 SVG 粘贴到项目中
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tiktok" viewbox="0 0 16 16">
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"></path>
</svg>
我把它放在我的 font awesome 标签中所以它的样式很相似