同一页面中的字体真棒4和5 [英] Font awesome 4 and 5 in same page

问题描述

当使用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/

解决方案

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

下面的代码段说明了如何使用这两个库.每当使用FA4类时，都会呈现FA4样式.每当使用FA5类时，都会呈现FA5样式.如果以相反的方式加载它(首先是FA4)，则所有内容均呈现为FA5样式，如果您现在拥有FA5品牌子集( fab )中的FA4图标定义，则该方法将不起作用./p>

如果交换库的加载(首先加载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à4.7</label>< i class ="fa fa-facebook"></i>< br>< label> Facebookàla 5</label>< i class ="fab fa-facebook"></i>  

I have a conflict with font awesome when 2 different css versions are used. I am not trying to use 2 different version, but my plugin embeds one version and sometimes a wordpress website has another version.

I am interested in this particular example, why doesnt first icon display if they both have same :before content?

(I have noticed it works if fa5 is linked first in the page)

What would be the easiest solution to handle this?

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

解决方案

It's possible to have both libraries in parallel, just keep in mind: The style sheet loaded the latter "wins". It makes more sense to load FA5 first and then let FA4 overwrite the FA4 classes. Then most icons are displayed as expected.

The snippet below illustrates how to use both libraries. Whenever a FA4 class is used, it's rendered FA4 style. Whenever a FA5 class is used, it's rendered FA5 style. If you load it the other way around (FA4 first), everything is rendered FA5 style and that doesn't work if you have FA4 icon definitions that are now in the FA5 brand subset (fab).

If you swap the loading of the libraries (load FA5 first), it works.

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

这篇关于同一页面中的字体真棒4和5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！