字体很棒 - 两个版本

时间:2015-07-30 19:45:34

标签: css font-awesome

两个版本的字体可以共存吗?

我们在开发环境中安装了V3.2。我们还想在相同的环境中安装V4.3。两个版本可以共存吗?它会引起任何问题吗?

2 个答案:

答案 0 :(得分:4)

有些人可以并排运行2个不同的版本。

例如,如果首先加载版本5.0.13的CSS文件,然后加载下载的版本4.7.0的CSS文件,那么在v4.7中使用fa-前缀的所有图标将继续按原设计工作,但使用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并排,但上述方法可能会以相同的方式工作。

答案 1 :(得分:3)

好的字体真棒由css样式表和一些字体文件组成。我们可以在网页中包含任何样式表,但问题是当我们有两个具有相同类名或id的对象时,其中一个会覆盖另一个。

示例:

将这两个元素分成两个单独的样式表:

.element{
position : relative;
}

并且:

.element{
position : absolute;
}

对于具有element类的标签,它将被定位为相对&#34;或者&#34;绝对&#34;而不是他们两个同时。

这取决于将文件包含在网页中时文件的位置。

因此对于Font Awesome,其中一个文件中的fa类将被另一个fa类覆盖。

因此,如果在较新版本(在属性中)对此类进行了一些更改,它将覆盖旧类中找到的相同属性,或者它将被旧类覆盖(总是谈论找到相同的属性)。

这是一个让它更清晰的例子:

.element{
position : absolute;
display : block;
}

这是旧的,这是新的:

.element{
position: relative;
margin : auto;
}

因此position属性将被覆盖,但margin和display属性都不会被覆盖。所以他们会在同一时间一起工作。

检查此fiddle中的图像并查看重复属性是如何被覆盖的。还尝试更改css中image类的顺序,并查看图像将如何隐藏,因为display:none;覆盖display:block;

注意:我只会与您分享这个想法,但我不知道这两个单独的文件是否真的相同:

正如您所看到的,处理器获取的最后一个属性或读取这些属性的任何内容都会覆盖第一个属性。我知道这对你来说也是显而易见的,但我只想与你们分享。

我希望我在这里写的内容对您有用而且清晰。