Czcionki ikon to symbole, a nie litery, które umożliwiają dodawanie ikon wektorowych do witryny bez spowalniania jej, ponieważ nie używałbyś dużych plików graficznych, ale pliki czcionek. Niezależnie od tego, czy są to litery, czy ikony, czcionki same w sobie są grafiką i mają więcej zastosowań niż tylko tekst. W tym artykule omówimy, jak dodać czcionki ikon do witryny WordPress. Ale najpierw omówmy sytuacje, w których możesz chcieć ich użyć.
Kiedy mogę używać moich czcionek ikon?
Oczywistą przewagą czcionek ikon nad konwencjonalnymi ikonami opartymi na obrazach jest szybkość: symbol czcionkibędąc grafiką wektorową, ładuje tak samo niezależnie od rozmiaru każda ikona zajmuje ekran. Grafika niewektorowa traci jakość po przeskalowaniu i staje się niewyraźna. Są również bardzo trudne do manipulowania i mogą wymagać użycia edytorów graficznych do tworzenia wielu wersji każdej grafiki, a następnie majstrowania przy ustawieniach witryny, dopóki nie upewnisz się, że na każdym urządzeniu, z którego może korzystać odwiedzający, wyświetlana jest optymalna wersja każdego z nich. graficzny.
I odwrotnie, czcionki (w tym czcionki ikon) są łatwo skalowalny bez utraty jakości, są dosłownie stworzone do stylizacji kolorami i cieniami, w razie potrzeby, i są ogólnie lekki, zwłaszcza w porównaniu z innymi grafikami.
Czcionka ikony zazwyczaj zawiera powszechnie używane symbole dla różnych funkcji online, takich jak foldery, dymki czatu, strzałki, foldery, pinezki i tym podobne. Są one bardzo często spotykane w menu nawigacyjnych, ale można ich używać wszędzie tam, gdzie w innym przypadku można by użyć obrazu do wskazania wspólnej funkcji. Będzie też prawdopodobnie zaoszczędzić trochę czasu i pieniędzy na projektowaniu ikon – w końcu wystarczy obszerna czcionka.
Do wyboru jest wiele czcionek ikon, ale nasze preferowane to Czcionka niesamowita oraz Czcionka Elegancka. Na potrzeby tej demonstracji będziemy głównie używać Font Awesome. Oto, co będziemy omawiać:
Oprócz metod opisanych powyżej, możesz dodać czcionki ikon jako czcionki niestandardowe, tak jak każdą inną czcionkę. Nie będziemy tutaj omawiać tej metody, ponieważ szczegółowo omówiliśmy już dodawanie niestandardowych czcionek do WordPressa w innym artykule.
Jeśli jesteś początkującym użytkownikiem WordPressa i nie czujesz się komfortowo dodając nowe czcionki do swojego motywu poprzez modyfikację plików motywu – co jest zrozumiałe – to wtyczka jest prawdopodobnie dobrą opcją dla Ciebie. Wtyczka, której będziemy używać to Lepsza czcionka Niesamowita. Musisz go zainstalować i aktywować z sekcji wtyczek pulpitu WordPress.
I to wszystko, Twoja witryna będzie teraz obsługiwała Font Awesome.
Ale aby korzystać z samych ikon, potrzebujesz czegoś innego: shortcode. Shortcode to kawałek kodu z prostą funkcją. W tym przypadku jest to wyświetlenie ikony. Aby używać ikon Font Awesome, musisz najpierw wiedzieć, jak się nazywają i jak wyglądają. Możesz to łatwo zrobić za pomocą tego Ściągawka dostarczone przez twórców czcionki.
Następnie, aby dodać skróty czcionek do swojej witryny, po prostu dodaj blok shortcode jeśli używasz edytora bloków Gutenberg, elementu shortcode, jeśli używasz Elementora, lub po prostu wpisz krótki kod tam, gdzie go potrzebujesz, jeśli używasz edytora klasycznego (upewnij się, że przełączyłeś się na tryb edycji tekstu). Pokażemy Ci, jak to zrobić z Gutenbergiem. Dodamy krótki kod w poście, ale działa to tak samo dla każdego obszaru Twojej witryny, który może zaakceptować krótki kod.
Klikając na plus znak, otrzymasz menu blokowe. Wyszukaj blok shortcode i wklej krótki kod, który Ci się podoba. Możesz znaleźć nazwę ikony na ściągawce i dodać ją do skróconego kodu: [icon name=”iconname”]
Powiedzmy, że losowo wygenerowany tekst, którego używamy, opisuje napój. Jako winietę w tekście będziemy używać [icon name=”beer”] shortcode między dwoma blokami tekstu.
Również możesz użyj tych skrótów w blokach tekstu, trochę jak kule. Na przykład poprzedzimy ostatni akapit inną ikoną, używając skrótu [icon name=”arrow-circle-right”].
Twoje ikony będą widoczne jako część tekstu na Twojej stronie.
Inną cechą tej wtyczki jest to, że aktualizuje się automatycznie: jeśli pojawi się nowa wersja Font Awesome, nie pozostaniesz w tyle! Aby uzyskać więcej informacji na temat aktualizacji wtyczek, zapoznaj się z naszym przydatnym samouczkiem krok po kroku.
Popularny edytor wizualny Elementor umożliwia łatwe korzystanie z czcionek ikon. W rzeczywistości Elementor jest już zintegrowany z Font Awesome. Aby dodać ikonę za pomocą Elementora, rozpocznij edycję posta w Elementorze i znajdź Ikona w menu po lewej stronie i przeciągnij go w wybrane miejsce.
Teraz mamy domyślną ikonę zastępczą. Aby wybrać inną ikonę, po prostu kliknij obraz ikony po lewej stronie, gdy wybrany jest element ikony. Widać, że ma wokół siebie niebieską obwódkę.
Wybierz ikonę, którą lubisz, i kliknij wstaw, aby wstawić ją zamiast symbolu zastępczego. Wybraliśmy ikonę dzwonka z Czcionka niesamowita – zwykła zestaw ikon.
W tej samej zakładce możesz dodać link lub zmienić wyrównanie ikony, tak jak my.
Możesz zmienić jego kolor w Styl , gdy wybrana jest Twoja ikona.
A teraz wiesz, jak używać ikon w Elementorze. Istnieje wiele innych opcji stylu i funkcjonalności twoich ikon w Elementorze, ale teraz znasz podstawy.
Pokażemy Ci najłatwiejszą metodę dodawania ikon Font Awesome, kompleksowego i stale aktualizowanego zestawu ikon, do witryny WordPress za pomocą kodu. Najpierw musisz udać się do Czcionka niesamowita stronę internetową i kliknij Zacznij za darmo przycisk.
Następnie musisz podać Font Awesome ze swoim adresem e-mail i kliknąć Wyślij kod zestawu.
Następnie musisz sprawdzić swój adres e-mail i skonfigurować konto. Po prostu postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aż dojdziesz do ekranu z kodem. Kliknij Skopiuj kod zestawu by go skopiować.
Na koniec musisz skopiować ten kod do swojego motywu header.php plik. Możesz go znaleźć, przechodząc do Edytor wyglądu/motywu z pulpitu WordPress. Będzie w menu po prawej stronie.
Po prostu wklej skopiowany kod zestawu tuż pod tagiem i gotowe.
Na koniec możesz także dodać ikony Font Awesome do swojej witryny WordPress indywidualnie, bezpośrednio z biblioteki dewelopera. Nie potrzebujesz wtyczki ani niczego innego, aby to zrobić, możesz po prostu użyć ikony, którą lubisz. Aby to zrobić, po prostu udaj się do Galeria ikon Font Awesome i znajdź ikonę, którą lubisz.
Kliknij na niego, a znajdziesz kod, którego potrzebujesz, aby go osadzić.
Aby dodać swoją ikonę, musisz ją dodać za pomocą kodu. W przypadku edytora klasycznego działa on po prostu przez wklejenie kodu tam, gdzie chcesz, w trybie tekstowym. W Gutenbergu używamy Niestandardowy kod HTML blok. W Elementorze będziesz potrzebować Niestandardowy kod HTML element, ale zasada jest taka sama. Po prostu wklej kod otrzymany z biblioteki ikon.
Twoja ikona będzie dokładnie tam, gdzie ją umieścisz!
Na zakończenie
Jak pokazaliśmy, bardzo łatwo jest zainstalować pakiet czcionek ikon w WordPress. I nie tylko to – pozytywnie wpływa na responsywność Twojej witryny i prędkość ładowania, co czyni je doskonałym wyborem, jeśli obsługujesz użytkowników korzystających z Twoich usług na urządzeniach mobilnych lub z wolniejszym połączeniem, ale także ogólnie lepszy pod względem wrażenia użytkownika. Lekki, łatwy w stylizacji i szybki do załadowania: czego tu nie lubić?
Wesprzyj naszą pracę ❤️
Jeśli spodobał Ci się ten artykuł, rozważ pozostawienie napiwku, aby pomóc nam dalej publikować wartościowe treści.
