Question

当使用2个不同的css版本时，我与字体很糟糕。我不是试图使用2个不同的版本，但我的插件嵌入了一个版本，有时一个wordpress网站有另一个版本。

我对这个特定的例子很感兴趣，为什么在第一个图标显示时它们是否相同：在内容之前？

（我注意到如果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

您实际上可以使它们协同工作，但是，您将不得不为其中之一编辑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; }

示例2：

.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>

第4步：调用“普通”之类的图标

一种调用方式如下：

<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用于品牌图标。

如果采用这种方式，则完全没有冲突，并且可以将整个库用于这两个集合。

Answer 2

不幸的是，我对如何使它们并行工作没有很好的建议 - 感觉就像一堆蠕虫，我会尽量避免这种情况。你说的是“我的插件” - 这是否意味着你开发了它？如果我控制了代码并且我知道它可能在两个环境中使用，我会添加一个config-option来选择FA4-或FA5-environment，然后创建相应的标签。

WRT第一个图标未显示在您的示例中：您说如果以相反的顺序加载脚本，您会注意到相反的效果。你的答案已经存在：.css文件对.fa-class有不同的定义。我想那个破坏你样本的那个（来自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;
 }

Answer 3

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

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

不幸的是，在您的示例中，您还错过了Facebook图标类末尾的-f，应该是fa fa-facebook-f。如果您解决了此问题，然后交换了库的加载（首先加载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-f"></i>
<br>
<label>Facebook à la 5</label>
<i class="fab fa-facebook-f"></i>

字体真棒4和5在同一页面

3 个答案: