2013-10-04 15 views
9

Używam entypo (pobranych z entypo.com) i wyświetlanie ikony tak:Jak używać ikon z fontello w moim css?

.icon:before { 
    display: inline-block; 
    font-family: 'Entypo'; 
    text-decoration: none; 
    speak: none; 
} 

.email:before { 
    content: "\2709"; 
} 

dość standardowy. Ale ponieważ podpowiedź jest wyłączona, gdy pobierzesz ją z entypo.com, przełączyłem się na pobieranie jej z fontello. Tylko teraz moje kody zawartości css już nie działają.

widzę w demo, które fontello używa przęseł w ten sposób, aby połączyć się ikony z html:

<span class="i-code">0xe829</span> 

Ale to po prostu wydaje mi się brzydkie. Chcę to zrobić z css, ale jak mogę dowiedzieć się, jakie kody umieścić w moim css?

Odpowiedz

18

Ok, więc okazało się, że to, co trzeba zrobić, nie stosować kody jak wspomniano na fontello:

U+E84D 
U+E854 

Ale przepisać je do:

\E84D 
\E854 

(tak usunąć " U +”i zastąpienie go "\")

wykorzystać je tak:

content: "\E84D"; 

EDIT:

Tak, na życzenie, pełna CSS składnia byłoby użyć to:

.icon:before { 
    display: inline-block; 
    font-family: 'Entypo'; 
    text-decoration: none; 
    speak: none; 
} 

.email:before { 
    content: "\E84D"; 
} 

W połączeniu z następującym HTML:

<a href="#" class="icon email">Mail me</a> 
+0

można proszę pokazać pełny tag z poprawką? Nie rozumiem. – krivar

+1

@krivar, Ok I dodaje pełną składnię. Tutaj znajdziesz kody zawartości css: https://gist.github.com/pnull/4510484. Daj mi znać, jeśli masz jeszcze jakieś pytania! –