Jak łatwo dodać czcionki ikon do motywu WordPress

Czy chcesz dodać czcionki ikon do swojej witryny WordPress? Niedawno jeden z naszych czytelników zapytał, jaki jest najprostszy sposób na dodanie czcionek ikon do ich motywu WordPress?

Czcionki ikon umożliwiają dodawanie ikon wektorowych (z możliwością zmiany rozmiaru) bez spowalniania witryny. Są ładowane jak czcionki internetowe i mogą być stylizowane za pomocą CSS.

W tym artykule pokażemy Ci, jak łatwo dodać czcionki ikon do motywu WordPress, krok po kroku.

Czym są czcionki ikon i dlaczego warto z nich korzystać?

Czcionki ikon zawierają symbole lub piktogramy zamiast liter i cyfr. Te piktogramy można łatwo dodać do zawartości witryny i zmienić rozmiar za pomocą CSS. W porównaniu do ikon opartych na obrazach ikony czcionek są znacznie szybsze, co pomaga w ogólnej prędkości witryny WordPress.

Czcionki ikon mogą być używane do wyświetlania powszechnie używanych ikon. Na przykład możesz ich używać w Koszyku, przyciskach pobierania, pudełkach z funkcjami, konkursach prezentów, a nawet w menu nawigacji WordPress.

Dostępnych jest kilka darmowych i otwartych czcionek ikon, które mają setki pięknych ikon.

W rzeczywistości każda instalacja WordPress jest dostarczana z bezpłatnym zestawem czcionek ikon dashicons. Ikony te są używane w menu administratora WordPress i innych obszarach w obszarze administratora WordPress.

Niektóre inne popularne czcionki ikon to:

• Font Awesome
• Genericons
• IcoMoon
• Linearikony
• Material Icons by Google
• Rzecz. Rzeczownik Projekt

Ze względu na ten samouczek, będziemy używać Font Awesome. Jest to najpopularniejsza darmowa i otwarta czcionka ikon. Używamy FontAwesome na stronie WPBeginner, a także naszych wtyczek WordPress, takich jak OptinMonster, WPForms, RafflePress itp.

W tym przewodniku omówimy trzy sposoby dodawania czcionek ikon w WordPress. Możesz wybrać rozwiązanie, które działa najlepiej dla ciebie.

Dodawanie czcionek ikon w WordPress za pomocą wtyczek

Jeśli jesteś początkującym użytkownikiem, który próbuje dodać ikony do swoich postów lub stron, ta metoda jest odpowiednia dla ciebie. Nie musisz modyfikować plików motywów i będziesz mógł używać czcionek ikon wszędzie na swojej stronie.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Font Awesome dla WordPressa. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczka umożliwia obsługę Font Awesome dla Twojego motywu. Możesz teraz edytować dowolny post lub stronę WordPress i używać skrótu icon w ten sposób:

Możesz użyć tego skrótu wraz z innym tekstem lub samodzielnie w dedykowanym bloku skrótów.

Po dodaniu możesz wyświetlić podgląd swojego postu lub strony, aby zobaczyć, jak ikona będzie wyglądać w aktywnej witrynie. Oto jak to wyglądało na naszej stronie testowej.

Możesz także dodać krótki kod ikony czcionki wewnątrz bloku akapitu, gdzie możesz użyć ustawień bloku, aby zwiększyć rozmiar ikony.

W miarę zwiększania rozmiaru tekstu może to wyglądać dziwnie w edytorze tekstu. Dzieje się tak dlatego, że skrót nie zmienia się automatycznie w czcionkę ikon wewnątrz edytora bloków.

Musisz kliknąć przycisk Podgląd na swoim poście lub stronie, aby zobaczyć, jak będzie wyglądał rzeczywisty rozmiar ikony.

Możesz również użyć skrótu ikon wewnątrz kolumn i utworzyć takie pola funkcji:

2. Używanie czcionek ikon Za pomocą Kreatora stron WordPress

Większość popularnych wtyczek do tworzenia stron WordPress ma wbudowaną obsługę czcionek ikon. Pozwala to łatwo używać czcionek ikon na stronach docelowych, a także w innych obszarach witryny.

Beaver Builder

Beaver Builder to najlepsza wtyczka do tworzenia stron WordPress na rynku. Pozwala łatwo tworzyć niestandardowe układy stron w WordPress bez pisania kodu.

Beaver Builder zawiera piękne ikony i gotowe do użycia moduły, które możesz po prostu przeciągnąć i upuścić na swój post I strony.

Możesz tworzyć grupy ikon, dodawać pojedynczą ikonę i przenosić je do dobrze rozmieszczonych wierszy i kolumn. Możesz także wybrać własne kolory, tło, odstępy i margines bez pisania CSS.

Możesz nawet tworzyć całkowicie niestandardowe motywy WordPress bez pisania kodu za pomocą produktu Themer Beaver Builder.

Elementor Pro

Elementor to kolejna popularna wtyczka do tworzenia stron WordPress. Zawiera również kilka elementów, które umożliwiają korzystanie z czcionek ikon, w tym element ikon.

Możesz po prostu przeciągnąć i upuścić ikonę w dowolnym miejscu i używać jej z wierszami, kolumnami i tabelami, aby tworzyć piękne strony.

Inne popularne kreatory stron, takie jak Divi i Visual Composer, również mają pełne wsparcie dla czcionek ikon.

3. Dodawanie czcionek ikon w WordPress ręcznie z kodem

Jak już wspomnieliśmy wcześniej, czcionki ikon są tylko czcionkami i mogą być dodawane do witryny tak, jak dodałbyś dowolne niestandardowe czcionki.

Niektóre czcionki ikon, takie jak Font Awesome, są dostępne z serwerów CDN w Internecie i mogą być połączone bezpośrednio z motywem WordPress.

Możesz również przesłać cały katalog czcionek do folderu w motywie WordPress, a następnie użyć tych czcionek w arkuszu stylów.

Ponieważ używamy Font Awesome dla tego samouczka, pokażemy Ci, jak możesz go dodać za pomocą obu metod.

Metoda 1:

Ta ręczna metoda jest dość łatwa.

Najpierw musisz odwiedzić stronę Font Awesome i wprowadzić swój adres e-mail, aby otrzymać kod do osadzenia.

Teraz sprawdź swoją skrzynkę odbiorczą na e-mail od Font Awesome z kodem do osadzenia. Skopiuj i wklej ten kod osadzenia w nagłówku motywu WordPress.plik php tuż przed < / head> tag.

Twój kod osadzania będzie pojedynczą linią, która pobierze Font Awesome library bezpośrednio z ich serwerów CDN. Będzie to wyglądać mniej więcej tak:

< script src="https://use.fontawesome.com/123456abc.js"> < / script>

Ta metoda jest najprostsza, ale może powodować konflikty z innymi wtyczkami.

Lepszym podejściem byłoby prawidłowe załadowanie JavaScript w WordPress za pomocą wbudowanego mechanizmu zapytań.

Zamiast łączyć się z arkuszem stylów z szablonu nagłówka szablonu, możesz dodać następujący kod do funkcji szablonu.plik php lub w wtyczce specyficznej dla witryny.

function wpb_load_fa () {

wp_enqueue_script ('wpb-fa', 'https://use.fontawesome.com/123456abc.js', array (), '1.0.0', true );

}

add_action ('wp_enqueue_scripts', 'wpb_load_fa');

Metoda 2:

Druga metoda nie jest najłatwiejsza, ale pozwoliłaby na hostowanie czcionek Awesome icon fonts na własnej stronie internetowej.

Najpierw musisz odwiedzić stronę Font Awesome, aby pobrać pakiet czcionek na swój komputer.

Wystarczy pobrać czcionki ikon i rozpakować pakiet.

Teraz musisz połączyć się z hostingiem WordPress za pomocą klienta FTP i przejść do katalogu motywu WordPress.

Musisz tam utworzyć nowy folder i nazwać go czcionkami. Następnie musisz przesłać zawartość folderu icon fonts do katalogu fonts na serwerze hostingowym.

Teraz możesz załadować czcionki ikon do swojego motywu WordPress. Po prostu dodaj ten kod do funkcji motywu.plik php lub w wtyczce specyficznej dla witryny.

function wpb_load_fa () {

wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts / css / font-awesome./ min.css' );

}

add_action ('wp_enqueue_scripts', 'wpb_load_fa');

Pomyślnie załadowałeś Font Awesome do swojego motywu WordPress.

Teraz przychodzi część, w której będziesz dodawać rzeczywiste ikony do swojego motywu WordPress, postów lub stron.

Ręczne wyświetlanie czcionek ikon w WordPress

Przejdź do strony czcionki Awesome, aby zobaczyć pełną listę dostępnych ikon. Kliknij dowolną ikonę, której chcesz użyć, a zobaczysz jej nazwę.

Skopiuj nazwę ikony i użyj jej w ten sposób w WordPress.

<i class="fa-arrow-alt-circle-up"></i> 

Możesz stylizować tę ikonę w arkuszu stylów motywu w ten sposób:

.fa-arrow-alt-circle-up { 
font-size: 50px; 
kolor: # FF6600; 
}

Możesz także łączyć ze sobą różne ikony i stylizować je jednocześnie. Na przykład, powiedzmy, że chcesz wyświetlić listę linków z ikonami obok nich. Można je zawinąć pod elementem < div > z określoną klasą.

< div class = "icons-group">
  <a class = "icons-group-item" href = " # "> < I class = "fa fa-home FA-FW"></i>Home < / A>
  <a class="icons-group-item" href="#"><I class="fa fa-book FA-fw"></i>biblioteka < /A>
  <a class="icons-group-item" href="#"><I class="fa fa-ołówek FA-fw"> < /i>aplikacje < / a>
  <a class="icons-group-item" href="#"><I class="fa fa-cog FA-fw"> < /i>Ustawienia < / a>
< / div>

Teraz możesz je stylizować w arkuszu stylów motywu w ten sposób:

.icons-group-item i { 
kolor: #333; 
font-size: 50px; 
} 
.icons-group-item i: hover { 
kolor: # FF6600
} 

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać czcionki ikon do motywu WordPress. Możesz również zapoznać się z naszym samouczkiem na temat dodawania ikon obrazów z menu nawigacji w WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.