Chcę użyć ikony Font Awesome jako treści CSS, tj.
a:before {
content: "<i class='fa...'>...</i>";
}
Wiem, że nie mogę używać kodu HTML content
, więc czy pozostały tylko obrazy?
html
css
font-awesome
sdvnksv
źródło
źródło
Odpowiedzi:
Aktualizacja dla FontAwesome 5 Dzięki Aurelien
Trzeba zmienić
font-family
naFont Awesome 5 Brands
ORFont Awesome 5 Free
, na podstawie rodzaju ikona próbujesz render. Nie zapomnij też zadeklarowaćfont-weight: 900;
Próbny
Możesz przeczytać resztę odpowiedzi poniżej, aby zrozumieć, jak to działa i poznać niektóre obejścia dotyczące odstępów między ikoną a tekstem.
FontAwesome 4 i poniżej
To zły sposób na użycie tego. Otwórz niesamowity arkusz stylów czcionki, przejdź do
class
czcionki, której chcesz użyć, powiedzfa-phone
, skopiuj właściwość content do tej klasy razem z encją i użyj jej w następujący sposób:Próbny
Tylko upewnij się, że jeśli chcesz kierować na określony
a
tag, rozważ użycieclass
zamiast niego, aby uczynić go bardziej szczegółowym, na przykład:Użycie powyższej metody spowoduje przyklejenie ikony do pozostałego tekstu, więc jeśli chcesz mieć trochę miejsca między nimi, zrób to
display: inline-block;
i użyjpadding-right
:Rozszerzając tę odpowiedź dalej, ponieważ wielu może wymagać zmiany ikony po najechaniu myszką, więc w tym celu możemy napisać osobny selektor i zasady
:hover
działania:Próbny
Teraz w powyższym przykładzie ikona przesuwa się ze względu na inny rozmiar i na pewno tego nie chcesz, więc możesz ustawić stałą
width
deklarację bazową, taką jakPróbny
źródło
font-family: FontAwesome;
niemu zmienia się także czcionka tagów zakotwiczenia. Jak sobie z tym poradzić?font-family
przypuszczalnie powinien być wywołany na:before
pseudo, a nie na tagu zakotwiczonymcontent
kody do bezpośredniego kopiowania (tj. Bez zastanowienia). PS: Nadal zastanawiam się, dlaczego faceci FontAwesome nie umieszczają kodów zawartości na każdej stronie z ikonami ?!Inne rozwiązanie bez konieczności ręcznego zmieniania znaków Unicode można znaleźć w artykule Tworzenie niesamowitej czcionki - Używanie ikon bez tagów i ( zrzeczenie się: Napisałem ten artykuł ).
Krótko mówiąc, możesz stworzyć nową klasę:
A następnie użyj go z dowolną ikoną, na przykład:
źródło
Jeśli masz dostęp do plików SCSS z niesamowitej czcionki, możesz użyć tego prostego rozwiązania:
źródło
Przykładowy link: https://codepen.io/bungeedesign/pen/XqeLQg
Uzyskaj kod ikony z: https://fontawesome.com/cheatsheet?from=io
źródło
Możesz użyć do tego Unicode w CSS. Jeśli używasz czcionki awesome 5, jest to składnia;
Możesz zobaczyć ich dokumentację tutaj .
źródło
Powinieneś mieć grubość czcionki ustawioną na 900, aby Font Awesome 5 Free -rodzina czcionek działała.
Oto działający:
źródło
Jak napisano na stronie FontAwesome FontAwesome =>
HTML:
CSS:
W
.login::before
-> edytuj,content:'';
aby dopasować swój Unicode.źródło
Aktualizacja dla Font Awesome 5 za pomocą SCSS
źródło
Oto moje rozwiązanie webpack 4 + font niesamowite 5:
wtyczka webpack:
globalny styl css:
źródło