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?
content: "";CSS dla swojego:beforeelementu?: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.Odpowiedzi:
Odniesienie szesnastkowe ze zmianą znaczenia
to\f066.content: "\f066";źródło
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
źródło
a:last-child:after { font-family: FontAwesome; content: '\f061'; }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";źródło
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.źródło
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.
źródło