图标 – 同一页面中的字体真棒4和5

2019年7月28日 170次阅读

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

最佳答案 不幸的是,我对如何使它们并行工作没有很好的建议 – 感觉就像一堆蠕虫,我会尽量避免这种情况.你说的是“我的插件” – 这是否意味着你开发了它？如果我控制了代码并且我知道它可能在两个环境中使用,我会添加一个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;
 }
点赞