openweb icons conflicting with font awesome icons

Question

I was using font awesome icons and it was working well. When i needed some more icons i downloaded open web icons. Now i copied openweb icons to my project and its related css also.

Font awesome css is having some rule like this..

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}

OpenWeb icons css is having some rule like this..

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

So now, icons classes starts with "icon-"

Example <i class="icon-geo"></i>

now "icon-" makes conflict as both icons are making there own rules based based on it.. I can see it in bugzilla.. if i commented one of its font family, other font will work..

How should i overcome this problem..

The easiest way is to hard code another prefix for openweb icons, such as iconwf-. — Brewal

nickhar nickhar · Accepted Answer · 2013-10-22T01:10:48

It would be easy to just pre/postfix the class with a different identifier:

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

You can then include them as you need to from a different class.

There are a number of web-font consolidation services that you might want to consider - fontello.com is one, which allows you to combine different icon-fonts (similar to and that includes font-awesome), but that doesn't currently include the open web icons font you're using.

Ping them and they may well include it - given the value the font set offers!

openweb icons conflicting with font awesome icons

1 Answers