Css openweb图标与字体图标冲突
我用的是很棒的字体图标,效果很好。 当我需要更多的图标时,我下载了OpenWeb图标。 现在,我将openweb图标复制到我的项目及其相关css中 字体可怕的css有这样的规则Css openweb图标与字体图标冲突,css,font-awesome,Css,Font Awesome,我用的是很棒的字体图标,效果很好。 当我需要更多的图标时,我下载了OpenWeb图标。 现在,我将openweb图标复制到我的项目及其相关css中 字体可怕的css有这样的规则 [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothi
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'OpenWeb Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: center;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}
OpenWeb图标css有这样的规则
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'OpenWeb Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: center;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}
现在,图标类以“图标-”
示例
现在“图标-”会产生冲突,因为两个图标都在基于它制定自己的规则。。
我可以在bugzilla看到。。
如果我评论了其中一种字体系列,其他字体也可以
我应该如何克服这个问题。只需使用不同的标识符对类进行预/后缀即可:
[class^="iconOW-"]:before, [class*=" iconOW-"]:before {
^^ ^^
font-family: 'OpenWeb Icons';
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
vertical-align: center;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased
}
然后,您可以根据需要从不同的类中包含它们
<> P>有许多Web字体整合服务,您可能需要考虑的是一个,它允许您组合不同的图标字体(类似于和包含的),但目前不包括您正在使用的字体。
Ping他们,他们很可能包括它-鉴于字体集提供的价值 最简单的方法是为openweb图标硬编码另一个前缀,例如
iconwf-
。