Phông chữ tuyệt vời với CSS giao diện người dùng của Metro

Question

Tôi đang sử dụng dự án Metro UI với bố cục của mình. Tôi cũng đã thêm font awesome vào dự án của tôi, nhưng khi tôi sử dụng metro và phông chữ awesome với nhau, có có một số vấn đề:

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

Tôi muốn đặt biểu tượng fa vào tiêu đề Metro UI nhưng khi tôi chạy mã, tôi không thể nhìn thấy biểu tượng từ danh hiệu:

Nếu tôi chỉ làm tăng thêm sau:

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

Mọi thứ đều tốt ... Ai đó có thể giúp tôi?

Answer 1

Tôi đã gặp vấn đề tương tự. Bạn cần phải "buộc" font font-tuyệt vời:

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

khối này nằm trong tập tin font-awesome.css và bạn cần phải thêm !important nên Metro UI không ghi đè lên nó.
Nếu bạn không muốn/có thể chỉnh sửa file CSS ban đầu bạn cũng sẽ có thể khắc phục điều này bằng cách thêm dòng sau vào file CSS của riêng bạn:

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

Lý do cho problme này là, một phong cách từ UI UI CSS không ghi đè kiểu dáng font-family cho các ô xếp và do đó phông chữ tuyệt vời không được sử dụng theo mặc định.