openweb 图标与字体真棒图标冲突答案

【问题标题】：openweb icons conflicting with font awesome iconsopenweb 图标与字体真棒图标冲突
【发布时间】：2013-10-25 22:55:46
【问题描述】：

我使用了很棒的字体图标，效果很好。当我需要更多图标时，我下载了打开的 Web 图标。现在我将 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中看到它.. 如果我评论了它的字体系列之一，其他字体将起作用..

我应该如何克服这个问题..

【问题讨论】：

最简单的方法是为openweb图标硬编码另一个前缀，例如iconwf-。

标签： css font-awesome

【解决方案1】：

使用不同的标识符对类进行前缀/后缀会很容易：

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

然后，您可以根据需要从不同的班级中包含它们。

您可能需要考虑许多网络字体整合服务 - fontello.com 是其中之一，它允许您组合不同的图标字体（类似于并包括 font-awesome），但这并不t 当前包括您正在使用的open web icons 字体。

Ping 他们，他们很可能会包含它 - 考虑到字体集提供的价值！

【讨论】：