Jak dodać ikony Font Awesome do WordPressa – kompletny przewodnik

O tym jest ten przewodnik. Kiedy skończysz czytać, będziesz dokładnie wiedział, jak:

• Ręcznie dodaj arkusz stylów Font Awesome do WordPress
• Dodaj Font Awesome do WordPressa za pomocą darmowej wtyczki
• Wstawiaj i stylizuj ikony Font Awesome na wiele różnych sposobów

Zagłębmy się…

Dlaczego powinieneś poświęcić czas na dodanie ikon Font Awesome do WordPress

Ikony Font Awesome są niesamowite, ponieważ, jak sugeruje nazwa, są to czcionki ikon, a nie obrazy. Oznacza to, że możesz robić fajne rzeczy, takie jak:

• Zmień rozmiar bez utraty jakości, ponieważ ikony są wektorami
• Zmień kolory, dodaj animację i użyj innych manipulacji CSS

Wszystko to, co można powiedzieć, ikony Font Awesome są znacznie lepsze niż użycie statycznego obrazu.

Najpierw pokażę Ci dwa różne sposoby dodania ich do Twojej witryny. Następnie pokażę Ci, jak stylizować i manipulować ikonami (niezależnie od wybranej metody).

Jak ręcznie dodać niesamowite ikony czcionek do WordPressa?

Jeśli przeraża Cię myśl o zagłębieniu się w kod Twojego motywu, polecam przejść do następnej sekcji, w której pokażę Ci, jak dodać ikony Font Awesome do WordPressa za pomocą darmowej wtyczki.

W przeciwnym razie podoba mi się ta metoda, aby uzyskać przyjemny, lekki sposób na uruchomienie Font Awesome.

Zasadniczo wszystko, co musisz zrobić, to dodać arkusz stylów Font Awesome do motywu WordPress. Następnie możesz zacząć wstawiać ikony Font Awesome i stylizować je w dowolny sposób.

Oto jak przebiega cały proces, krok po kroku:

Krok 1: Umieść w kolejce niesamowity arkusz stylów w motywie WordPress

Jak powiedziałem, pierwszym krokiem jest dodanie arkusza stylów Font Awesome CSS do motywu WordPress. Chociaż możesz to uzyskać bezpośrednio ze strony Font Awesome, moją preferowaną metodą jest użycie wersji hostowanej na Bootstrap CDN.

Obecnie ten link to:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Ale to się zmieni, gdy Font Awesome wyda nowe wersje. Dlatego dobrym pomysłem jest regularne aktualizowanie linku do najnowszej wersji (chociaż starsze wersje będą nadal działać).

Aby dodać ten arkusz stylów do WordPress, musisz umieścić go w kolejce w pliku functions.php motywu potomnego . Chociaż podstawową metodą dodawania CSS jest umieszczenie linku w nagłówku, najlepszą praktyką jest użycie specjalnej funkcji WordPress enqueue zamiast umieszczania arkusza stylów bezpośrednio w nagłówku.

Ponadto użycie motywu podrzędnego zapewnia, że ​​zmiany nie zostaną nadpisane, jeśli kiedykolwiek zajdzie potrzeba uaktualnienia motywu.

Ponieważ przestrzeganie najlepszych praktyk dotyczących kodu WordPress jest dobrą rzeczą, zdecydowanie polecam korzystanie zarówno z motywu potomnego, jak i funkcji kolejkowania.

Ok, oto jak to zrobić:

Przejdź do Wygląd → Edytor i wybierz plik functions.php dla motywu potomnego.

Następnie wklej ten kod:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Zapisz zmiany i gotowe! Niezbyt bolesne, prawda?

Krok 2: Wstaw niesamowite ikony czcionek

Po umieszczeniu arkusza stylów w kolejce możesz wstawić ikony Font Awesome do swojej witryny, przechodząc do wyszukiwania ikon Font Awesome i znajdując ikonę, którą chcesz wstawić:

Po kliknięciu ikony Font Awesome poda kod, którego potrzebujesz, aby użyć ikony:

Wszystko, co musisz zrobić, to umieścić ten kod w zakładce Tekst edytora WordPress, aby dodać ikonę do swojej witryny.

I to wszystko! Pomyślnie dodałeś obsługę Font Awesome do WordPressa. Teraz wszystko, co pozostało, to nauczyć się stylizować ikony Font Awesome w witrynie WordPress.

Ale zanim ci to pokażę, chcę omówić metodę wtyczki do dodawania wsparcia Font Awesome. Możesz przejść dalej, jeśli wybrałeś metodę ręczną zamiast metody wtyczek.

Jak dodać niesamowite ikony czcionek do WordPressa za pomocą wtyczki?

Jeśli wolisz użyć wtyczki zamiast ręcznie umieszczać w kolejce arkusz stylów Font Awesome, istnieje solidna bezpłatna opcja wymieniona na WordPress.org o nazwie Better Font Awesome.

Oprócz tego, że zawsze dodajesz do swojej witryny najnowszy arkusz stylów, Better Font Awesome:

• Pozwala używać skrótów do osadzania ikon Font Awesome.
• Daje rozwijane menu w edytorze TinyMCE do wstawiania ikon.

Jeśli planujesz regularnie używać ikon Font Awesome, te dwa narzędzia mogą ułatwić Ci życie. Ale w przypadku rzadkiego użycia myślę, że metoda ręczna jest najprostszą opcją, ponieważ jest najlżejsza.

Krok 1: Zainstaluj i aktywuj wtyczkę

Aby dodać Font Awesome, wystarczy zainstalować i aktywować wtyczkę. Naprawdę nie ma nic więcej.

Chociaż istnieje podstawowy panel ustawień, do którego możesz uzyskać dostęp, przechodząc do Ustawienia → Lepsza czcionka Awesome , możesz całkowicie pozostawić wszystko jako domyślne.

Krok 2: Wstaw niesamowite ikony czcionek

Aby wstawić ikony Font Awesome za pomocą wtyczki, masz dwie różne opcje:

• Użyj kodu ze strony Font Awesome, tak jak zademonstrowałem w poprzedniej sekcji.
• Użyj skrótów, które można wygenerować z listy rozwijanej.

Ponieważ już pokazałem ci pierwszą metodę w poprzedniej sekcji, po prostu rzucę ci okiem na rozwijany generator krótkich kodów.

Kiedy przejdziesz do tworzenia nowego posta lub strony, zauważysz nowy przycisk Wstaw ikonę obok przycisku Dodaj multimedia . Jeśli go klikniesz, zobaczysz wszystkie dostępne ikony Font Awesome, a także opcję filtrowania wyników:

Wszystko, co musisz zrobić, to kliknąć wybraną ikonę, a wtyczka wstawi odpowiedni krótki kod:

I to wszystko!

Teraz, gdy masz już obsługę ikon Font Awesome, przyjrzyjmy się kilku sposobom stylizowania i manipulowania ikonami Font Awesome.

Jak stylizować niesamowite ikony czcionek i zmieniać rozmiary

Bez względu na to, jakiej metody użyłeś, aby dodać Font Awesome do WordPressa, do stylizacji ikon będziesz używać tych samych podstawowych zasad.

Ponadto te polecenia działają niezależnie od tego, czy używasz skrótów, czy kodu do osadzenia ze strony Font Awesome.

Większość z tych wskazówek pochodzi bezpośrednio ze strony przykładów Font Awesome, więc nie musisz się martwić o kompatybilność.

Zmień rozmiar niesamowitych ikon czcionek

Zacznijmy od podstawowego – zwiększenia rozmiaru ikon Font Awesome. Domyślnie ikony są dość małe, więc jest to z pewnością sytuacja, z którą możesz się spotkać.

Aby zwiększyć rozmiar ikony, możesz użyć dowolnego z następujących modyfikatorów:

• fa-lg – zwiększa rozmiar o 33%
• fa-2x – podwaja rozmiar
• fa-3x – rozmiar potrójny
• fa-4x – …
• fa-5x – …

Aby użyć tych modyfikatorów, wystarczy dodać je po nazwie ikony (ale w cudzysłowie) dla kodu i wewnątrz cytatów klasy dla shortcode. Oto przykład potrojenia rozmiaru ikony dla obu metod osadzania:

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [nazwa ikony=”pobierz” klasa=” fa-3x ”]

Na przykład to:

Staje się to na froncie:

Niesamowite ikony obracania czcionek

Możesz także łatwo obracać ikony Font Awesome, aby zmienić ich orientację.

Oto modyfikatory rotacji. Możesz użyć dowolnego z nich dokładnie tak samo, jak powyższych modyfikatorów rozmiaru:

• fa-rotate-90 – obraca się o 90 stopni
• fa-rotate-180 – obraca się o 180 stopni
• fa-rotate-270 – obraca się o 270 stopni
• fa-flip-horizontal – odwraca ikonę wzdłuż jej osi poziomej
• fa-flip-vertical – odwraca ikonę wzdłuż jej pionowej osi

Dodaj animację do ikon Font Awesome

Możesz także dodać kilka podstawowych animacji do swoich ikon. Font Awesome udostępnia dwa różne modyfikatory do dodawania rotacji:

• fa-spin – dodaje płynny obrót
• fa-pulse – powoduje, że ikona obraca się w 8 różnych krokach

Te animacje najlepiej łączyć z okrągłymi ikonami. Jeśli użyjesz innych ikon o dziwnym kształcie, efekt może wyglądać trochę dziwnie.

Zmień niesamowity kolor ikony czcionki

Na koniec pokażę, jak zmienić kolor ikon Font Awesome. Niestety nie ma do tego wbudowanych modyfikatorów. Zamiast tego musisz użyć niestandardowego kodu CSS.

Nie martw się jednak – to bardzo proste.

Wszystko czego potrzebujesz to ten mały kod:

.fa-NAME {
color: COLOR;
}

Gdzie fa-NAME to rzeczywista nazwa twojej ikony, a COLOR to kolor, na który chcesz ją zmienić.

Aby pozostać przy ikonie pobierania z naszych poprzednich przykładów, oto jak zmienisz ją na czerwoną:

Możesz łatwo dodać niestandardowy CSS, przechodząc do Wygląd → Dostosuj → Dodatkowy CSS .

Zawijanie rzeczy

Konfiguracja ikon Font Awesome może zająć kilka minut. Ale kiedy już je zainstalujesz, są tam na dobre. Od tego momentu wszystko, co musisz zrobić, aby wstawić i stylizować poszczególne ikony Font Awesome, to wykonać powyższe kroki.

Tylko pamiętaj – jeśli używasz metody ręcznej, będziesz chciał okresowo aktualizować link do arkusza stylów, aby być na bieżąco z najnowszymi wersjami.