我正在使用Font Awesome图标,它运作良好。 当我需要更多的图标时,我下载了Open Web Icons。 现在,我将OpenWeb图标及其相关的CSS复制到了我的项目中。
Font Awesome的CSS有一些规则,像这样...
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
OpenWeb图标CSS有如下规则...
[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
}
现在,图标类以“icon-”开头
例如:
<i class="icon-geo"></i>
现在“icon-”会造成冲突,因为两个图标都会基于它自己的规则进行操作。我可以在bugzilla中看到这一点。如果我注释掉其中一个字体系列,另一个字体就会生效。
我应该如何解决这个问题?
iconwf-
。 - Brewal