Jak mogę stylizować kolor, rozmiar i cień ikon w ikonach Font Awesome ?
Na przykład witryna Font Awesome wyświetli niektóre ikony na biało, a niektóre na czerwono, ale nie pokaże, CSS
jak je stylizować w ten sposób ...
Jak mogę stylizować kolor, rozmiar i cień ikon w ikonach Font Awesome ?
Na przykład witryna Font Awesome wyświetli niektóre ikony na biało, a niektóre na czerwono, ale nie pokaże, CSS
jak je stylizować w ten sposób ...
Ponieważ są to po prostu czcionki, powinieneś mieć możliwość nadania im stylu czcionek:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
Możesz także po prostu dodać styl wbudowany:
źródło
class='icon-ok-sign my-red-class'
? czyclass='icon-ok-sign-red'
? To sprawia, że jest mniej czytelny i dodaje niepotrzebnego poziomu złożoności.Jeśli używasz Bootstrap w tym samym czasie, możesz użyć:
Inaczej:
źródło
Wygląda na to, że kolor ikony FontAwesome reaguje na informacje tekstowe, błędy tekstowe itp.
źródło
plik inyour.css:
Twój plik.html:
źródło
Istnieje naprawdę prosty sposób na zmianę koloru ikon Font Awesome.
Możesz zmienić kod szesnastkowy zgodnie z własnymi preferencjami. UWAGA: Kolor tekstu również zmieni kolor ikony, chyba że
style="color:#00cc6a"
wi
tagu znajduje się znak.źródło
Korzystanie z dodawania FA 4.4.0
do dokumentu css, a następnie za pomocą
zmienia kolor na czerwony. Możesz ustawić własny dla dowolnego koloru.
źródło
źródło
http://fortawesome.github.io/Font-Awesome/examples/
Tutaj zdefiniowałem styl globalny w moim CSS, w którym główny kolor jest klasą, w moim przypadku jest to jasnoniebieski odcień. Uważam, że użycie stylów wbudowanych w ikonach z czcionką Awesome działa dobrze, szczególnie w przypadku semantycznego nadawania nazw kolorom, tj. Nav-color, jeśli chcesz do tego osobny kolor itp.
W tym przykładzie na ich stronie internetowej, a także w tym, co napisałem w moim przykładzie, najnowsza wersja Font Awesome nieznacznie zmieniła składnię dostosowywania rozmiaru. Wcześniej była:
gdzie teraz muszę użyć:
Oczywiście wszystko zależy od tego, którą wersję Font Awesome zainstalowałeś w swoim środowisku. Mam nadzieję że to pomoże.
źródło
W FontAwesome 4.0 klasy zmieniają się na „fa-2x”, „fa-3x”.
źródło
Po prostu możesz zdefiniować klasę w pliku css i kaskadować ją do pliku HTML jak
teraz zapisz w css
źródło
Po prostu celuj w niesamowitą czcionkę predefiniowaną nazwę klasy
w ex:
HTML
CSS
źródło
Proszę odnieść się do linku http://www.w3schools.com/icons/fontawesome_icons_intro.asp
źródło
Miałem ten sam problem, gdy próbowałem użyć ikon bezpośrednio z BootstrapCDN (najłatwiejszy sposób). Następnie pobrałem plik CSS i skopiowałem go do folderu CSS mojej witryny plik CSS (opisany pod „łatwym sposobem” w niesamowitej dokumentacji czcionek) i wszystko zaczęło działać tak, jak powinno.
źródło
Kredyt: Czy mogę zmienić kolor ikony Font Awesome?
(ta odpowiedź opiera się na tej odpowiedzi)
(na przykład ikonę zakładki :)
plik inyour.css:
Twój plik.html:
źródło
Zawiń tag i w p lub span, wtedy możesz użyć bootstrap css
źródło
W przypadku wersji SVG Font Awesome 5 użyj
źródło
Jak już wspomniano, niesamowite ikony czcionek to tekst, w związku z czym stylizujesz go za pomocą odpowiednich atrybutów CSS. Na przykład:
Jeśli, jak mi się zdarza, rozmiar ikony w ogóle się nie zmienia, dodaj „! Ważne” do atrybutu rozmiar czcionki.
źródło
Do wymiarowania ikon
Obie frameworki + czcionki CSS i SVG + JS zawierają kilka podstawowych elementów sterujących do zmiany rozmiaru ikon w kontekście interfejsu użytkownika strony.
możesz użyć jak
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
źródło
Dynamicznie zmieniaj właściwości css ikon .fa-xxx:
źródło
źródło
Nie radziłbym ci używać wbudowanej niesamowitej czcionki, takiej jak fa-5x itp .; w obawie, że mogą to zmienić, a Ty będziesz musiał ciągle zastanawiać się nad kodem aplikacji, aby spełnić najnowszy standard. Po prostu tego unikasz, dając każdej niesamowitej czcionce klasie, którą chcesz stylowo ujednolicić, tę samą klasę:
Oto klasa fa-sabi-social-icons
Następnie w swoim css możesz stylizować czcionki przy użyciu tych samych reguł css, które stosowałbyś do normalnej czcionki. na przykład
To powinno nadać twoim czcionkom niesamowite czcionki
źródło