Font Awesome with Metro UI CSS

Question

I am using Metro UI project with my layout. I also added the font awesome into my project but when I use the metro and font awesome together, there have some issues:

<div class="tile-content icon">
    <span>
        <i class="fa fa-ticket fa-fw"></i>
    </span>
</div>

I want to set the fa icon into Metro UI title but when I run the code, I cannot see the icon from the title:

If i only add following:

<i class="fa fa-ticket fa-fw"></i>

Everything is fine... Somebody that can help me?

Answer 1

I had the same problem. You need to "force" the font-awesome font:

.fa {
  display: inline-block;
  font-family: FontAwesome !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

This block is in the font-awesome.css file and you need to add the !important so Metro UI does not override it.
If you do not want/can edit the original CSS file you should also be able to fix this by adding the following to your own CSS file:

.fa {
  font-family: FontAwesome !important;
}

The reason for this problme is, that one style from Metro UI CSS does override the font-family style for the tiles and so the font-awesome font is not used anymore by default.