2013-01-12 18 views
49

Używam strony Font Awesome na mojej stronie internetowej i chcę wyświetlić ikonę wewnątrz pseudo elementu :before.Unicode za pomocą CSS: przed

Zgodnie z documentation/cheatsheet, muszę wpisać , aby uzyskać tę czcionkę, ale nie działa. Uważam, że jest to normalne, ponieważ encje HTML nie są obsługiwane w :before.
Więc trochę googotowałem i dowiedziałem się, że jeśli chcesz wyświetlać obiekty HTML w :before, musisz użyć referencji ucieczki hex.
Więc szukałem heksadecymalnego odniesienia do , ale nic nie znalazłem. Uważam, że tak jest, ponieważ są to wartości "prywatnego użytku", cokolwiek to znaczy.

Czy istnieje sposób na sprawdzenie, czy działa on w :before?

+0

Ponieważ link jest 404, można mówić o elementach pseduo? Czy próbowałeś dodać 'content:" ";' w CSS dla swojego elementu ': ​​before'? – tsujp

+0

jest tego pewna: http://fortawesome.github.com/Font-Awesome/ – lnrbob

+0

Tak, przepraszam! Link jest już naprawiony! @tsujp W rzeczywistości ikona powinna być wyświetlana wewnątrz pseudo elementu. – Sven

Odpowiedz

84

Numer heksadecymalny z ewidencją  to \f066.

content: "\f066"; 
+13

Wszyscy powinniśmy zobaczyć odpowiedź od super_ton, że będziesz musiał zadeklarować rodzinę czcionek za pomocą FontAwesome. W przeciwnym razie otrzymasz tylko specjalny symbol, a nie właściwą ikonę! –

+2

Dla każdego, kto używa CSS parsowanego w PHP, musisz dwukrotnie uciec z odnośnika heksadecymalnego w następujący sposób: content: "\\ f066"; – ramijames

7

to całkiem niezły odnośnik do tych rzeczy. W twoim przypadku jest już na hexie, więc wartość heksadecymalna to f066. Więc chcesz zrobić:

content: "\f066"; 
2

punktów kodowych stosowanych w ikonę sztuczki czcionki są zazwyczaj prywatne punkty użyć kodu, co oznacza, że ​​nie mają na ogół zdefiniowane znaczenie i nie powinny być wykorzystywane w otwartej wymiany informacji, tylko przez prywatne umowa między zainteresowanymi stronami. Jednak punkty kodowe do użytku prywatnego mogą być reprezentowane jak każda inna wartość Unicode, np. w CSS, używając notacji takiej jak \f066, tak jak inni odpowiedzieli. Możesz nawet wprowadzić punkt kodowy jako taki, jeśli twój dokument jest kodowany w UTF-8 i umiesz wpisać dowolną wartość Unicode przez jego numer w twoim środowisku tworzenia (ale oczywiście normalnie będzie wyświetlany przy użyciu symbolu nieznanego postać).

Jednak nie jest to normalny sposób używania czcionek ikon. Zwykle używasz pliku CSS dostarczonego z czcionką i korzystasz z konstruktów takich jak <span class="icon-resize-small">foo</span>. Kod CSS zajmie się wstawieniem symbolu na początku elementu i nie trzeba znać numeru punktu kodowego.

88

W CSS FontAwesome Unicode działa tylko wtedy, gdy rodzina jest prawidłowa czcionka oświadczył:

font-family: "FontAwesome"; 
content: "\f066"; 
+4

Podoba mi się, jak dodałeś część rodziny czcionek, ponieważ jest to klucz do mojej pracy – ajk4550

Powiązane problemy