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?

— Sven
źródło

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

— Jordan

całkiem pewny, że to: fortawesome.github.com/Font-Awesome

— Stuart Burrows

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

120

Odniesienie szesnastkowe ze zmianą znaczenia to \f066.

content: "\f066";

— JJJ
źródło

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

— stefan
źródło

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";

— newtron
źródło

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.

— Jukka K. Korpela
źródło

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.

— Ashraful Alam
źródło