Unicode przez CSS: wcześniej


81

Używam Font Awesome na mojej stronie internetowej i chcę wyświetlić ikonę wewnątrz :beforepseudoelementu.

Zgodnie z dokumentacją / ściągawką muszę wpisać, aby uzyskać tę czcionkę, ale nie działa. Uważam, że to normalne, ponieważ encje HTML nie są obsługiwane w :before.
Poszukałem więc trochę w Google i odkryłem, że jeśli chcesz wyświetlać encje HTML w programie :before, musisz użyć odwołania szesnastkowego ze znakami ucieczki.
Więc szukałem odwołania szesnastkowego do, ale nic nie znalazłem. Uważam, że dzieje się tak, ponieważ są to wartości „użytku prywatnego”, cokolwiek to oznacza.

Czy jest jakiś sposób, aby to zadziałało :before?


Ponieważ link to 404, możesz mówić o elementach pseduo? Czy próbowałeś dodać content: "";CSS dla swojego :beforeelementu?
Jordan


Tak, przepraszam! Link jest teraz naprawiony! @tsujp Właściwie ikona powinna być wyświetlana wewnątrz pseudoelementu.
Sven

Ściśle mówiąc, nie możesz wyświetlać encji HTML w :before. Możesz wyświetlać znaki Unicode reprezentowane przez odwołania do encji w HTML, ale nie robisz tego przy użyciu składni encji HTML.
BoltClock

Odpowiedzi:


120

Odniesienie szesnastkowe ze zmianą znaczenia to \f066.

content: "\f066";

24
Każdy, proszę, 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ę!
lorem monkey

2
Dla każdego, kto używa analizowanego CSS w PHP, musisz dwukrotnie zmienić znaczenie odwołania szesnastkowego w następujący sposób: content: "\\ f066";
ramijames,

2
Zauważ, że jeśli używasz Font Awesome 5, rodzina czcionek uległa zmianie. Zobacz tutaj: stackoverflow.com/a/48004111/83542
Kildareflare

142

W CSS unicode FontAwesome działa tylko wtedy, gdy zadeklarowana jest poprawna rodzina czcionek (wersja 4 lub starsza):

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

Aktualizacja - wersja 5 ma różne nazwy:

Wolny

font-family: "Font Awesome 5 Free"

Zawodowiec

font-family: "Font Awesome 5 Pro"

Marki

font-family: "Font Awesome 5 Brands"

Zobacz tę powiązaną odpowiedź: https://stackoverflow.com/a/48004111/2575724


8
Podoba mi się, jak dodałeś część rodziny czcionek, ponieważ to jest klucz, który sprawił, że mój działał
ajk4550,

1
Zauważ, że jeśli używasz Font Awesome 5, rodzina czcionek uległa zmianie. Zobacz tutaj: stackoverflow.com/a/48004111/83542
Kildareflare

1
tylko rodzina czcionek: FontAwesome działała dla mnie. not font-family: „FontAwesome”
Sameera R.,

O dziwo, nic nie działało dla mnie, z wyjątkiem tego, co powiedział @Sameera. Potwierdzam, że od 23.10.19 tylko rodzina czcionek: FontAwesome również działała u mnie. Chciałem użyć ikony strzałki FA . To był mój kod:a:last-child:after { font-family: FontAwesome; content: '\f061'; }
sansae

11

Fileformat.info jest całkiem dobrym źródłem informacji na ten temat. W twoim przypadku jest już w formacie szesnastkowym, więc wartość szesnastkowa to f066. Więc zrobiłbyś:

content: "\f066";

Dzięki za tę odpowiedź. Z jakiegoś powodu nie zdawałem sobie sprawy, że ikony są zaklęte. Więc ciągle wstawiałem '#' w ciągu i to nie zadziałało. Teraz działa.
powłoka z

3

Punkty kodowe używane w trikach z czcionkami ikon są zwykle punktami kodowymi do użytku prywatnego, co oznacza, że ​​nie mają one ogólnie określonego znaczenia i nie powinny być używane w otwartej wymianie informacji, tylko na podstawie prywatnej umowy między zainteresowanymi stronami. Jednak punkty kodowe do użytku prywatnego mogą być reprezentowane jako dowolne inne wartości Unicode, np. W CSS przy użyciu notacji \f066, jak odpowiedzieli inni. Możesz nawet wprowadzić punkt kodowy jako taki, jeśli twój dokument jest zakodowany w UTF-8 i wiesz, jak wpisać dowolną wartość Unicode przez jej numer w swoim środowisku tworzenia (ale oczywiście normalnie byłby 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 używasz konstrukcji takich jak <span class="icon-resize-small">foo</span>. Kod CSS zajmie się wtedy wstawieniem symbolu na początku elementu i nie musisz znać numeru punktu kodowego.


1

Najpierw umieść odnośnik do pliku CSS fontwaesome w pliku HTML, a następnie utwórz pseudoklasę po lub przed, taką jak "font-family:" FontAwesome "; content:" \ f101 ";" następnie zapisz. Mam nadzieję, że to działa dobrze.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.