logo标签列表

字体神器——两个版本

cssfont-awesome
10

两个版本的Font Awesome可以共存吗？

我们在开发环境中安装了V3.2，现在还想要在同一环境中安装V4.3。这两个版本能够同时共存吗？会导致任何问题吗？

1
我的问题是，你为什么要两者兼备？ - Bioto
2个回答
8

有些情况下可以同时运行两个不同版本。

例如，如果首先加载版本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并排使用，但是上述方法可能以同样的方式工作。
3

好的，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;
}

因此，位置属性将被覆盖，但边距和显示属性都不会。因此它们将同时起作用。
在这个fiddle中检查图像，并查看如何覆盖重复的属性。同时尝试更改CSS中image类的顺序，您将看到图像将被隐藏，因为display:none;覆盖了display:block;。
注意：我只是与您分享这个想法，但我不知道这是否真的与两个单独文件的事情相同：
因此，正如您所看到的，处理器或任何读取这些属性的东西获取的最后一个属性会覆盖第一个属性。我知道这对您也很明显，但我只是想与您分享。
我希望我在这里写的对您有所帮助并且清晰易懂。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接