在某些情况下，可以并排运行 2 个不同的版本。
例如，如果先加载 5.0.13 版的 CSS 文件，然后再加载 4.7.0 版的 CSS 文件，那么fa-在 v4.7 中使用前缀的所有图标将继续按原计划工作，但是使用fas-前缀从 v5 提供附加图标。
<html><head>
...
<!-- FontAwesome, used in accordance with MIT License -->
<link rel="stylesheet" type="text/css" media="all"
href="/lib/font-awesome-5.0.13/web-fonts-with-css/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" media="all"
href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" />
...
</head><body>
...
<span class="fa fa-trash"><span><!-- became trash-alt in v5 -->
<span class="fa fa-pencil"><span><!-- became pencil-alt in v5 -->
<span class="fas fa-truck-moving"></span><!-- not available in v4.7 -->
...
</body></html>
虽然这在性能或最佳实践方面可能不被推荐，但它在技术上确实有效，并且在将代码从支持 FontAwesome v4 更新到 v5 的过渡期间可能对大型项目有用。
我没有并排尝试过版本 3 和 4，但是上述方法可能以相同的方式工作。
font Awesome 由 css 样式表和一些字体文件组成。我们可以在网页中包含任何样式表，但问题是当我们有两个具有相同类名或 id 的对象时，其中一个会覆盖另一个。
例子：
将这两个元素放在两个单独的样式表中：
.element{
position : relative;
}
和 ：
.element{
position : absolute;
}
对于具有该类的标签element，它将被定位为“相对”或“绝对”，而不是同时定位两者。
这取决于文件包含在网页中时的位置。
因此，对于 Font Awesome，fa其中一个文件中的类将被fa另一个文件中的类覆盖。
因此，如果新版本中的此类（在属性中）发生了一些更改，它将覆盖旧类中找到的相同属性，或者它将被旧类覆盖（总是谈论相同的属性）成立）。
这是一个让它更清楚的例子：
.element{
position : absolute;
display : block;
}
这是旧的，这是新的：
.element{
position: relative;
margin : auto;
}
因此，position 属性将被覆盖，但 margin 或 display 属性都不会被覆盖。所以他们会同时一起工作。
检查这个小提琴中的图像，看看重复的属性是如何被覆盖的。还尝试更改imageCSS中类的顺序，看看图像将如何因为display:none;覆盖而被隐藏display:block;。
注意：我只会与您分享这个想法，但我不知道这是否真的与两个单独的文件相同：
正如您所看到的，由处理器或任何读取这些属性的内容获取的最后一个属性会覆盖第一个属性。我知道这对你来说也是显而易见的，但我只是想与大家分享。
我希望我在这里写的内容对您有所帮助且清晰。
| 归档时间： |
|
| 查看次数： |
2097 次 |
| 最近记录： |