2014-05-14 12 views
5

Używam projektu Metro UI z moim układem. Dodałem też czcionkę awesome do mojego projektu, ale gdy używam czcionki metro i awesome razem, tam mają pewne problemy:Świetna czcionka z Metro UI CSS

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

Chcę ustawić ikonę do tytułu Metro UI fa ale kiedy uruchomić kod, nie widzę ikonę z tytułem:

enter image description here

Jeśli mogę tylko dodać następujące:

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

Wszystko w porządku ... Ktoś, kto może mi pomóc?

Odpowiedz

10

Miałem ten sam problem. Trzeba „zmusić” do czcionki-niesamowite:

.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; 
} 

Blok ten znajduje się w pliku font-awesome.css i trzeba dodać !important tak Metro UI nie zastępuje go.
Jeśli nie chcą/mogą edytować oryginalny plik CSS powinien również być w stanie rozwiązać ten problem poprzez dodanie następujących do własnego pliku CSS:

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

Powodem tego problme jest, że jednym stylu z Metro UI CSS zastępuje styl font-family dla płytek, więc font-awesome font nie jest już domyślnie używany.