Font Awesome with Metro UI CSS

c#, metro-ui-css

Solution

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.

Problem

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?

Original source