OpenWeb图标与Font Awesome图标冲突

Question

我正在使用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中看到这一点。如果我注释掉其中一个字体系列，另一个字体就会生效。

我应该如何解决这个问题？

- Darshan

---

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

Answer 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），但目前不包括你正在使用的 open web icons 字体。联系他们，他们很可能会加入它，鉴于这种字体集所提供的价值！

- nickhar