Przejdź do głównej treści

Jak łatwo dodać czcionki-ikony w Twoim temacie WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Czy chcesz dodać ikony czcionek na swoim blogu WordPress? W tym okresie świątecznym każdy chce bardziej dostosować swojego bloga, aby oferował lepszy obraz tego ostatniego. Ikony czcionek są częścią regularnie wykonywanych aranżacji.

W tym samouczku pokażę, jak dodawać ikony czcionek do bloga WordPress.

iconfontswp-1

Mała precyzja ikon czcionek

Czcionki ikon zawierają symbole lub piktogramy zamiast liter i cyfr. Piktogramów tych można łatwo zmienić za pomocą kodu CSS bez znaczącego wpływu na rozmiar stron.

icomoon

Czcionki ikon mogą być używane do wyświetlania dość powszechnych symboli. W klasycznej witrynie internetowej można ich używać do wyświetlania ikony koszyka, przycisków pobierania, suwaków, przycisków mediów społecznościowych, a nawet menu nawigacji WordPress.

Dostępnych jest kilka ikon czcionek z różnymi opcjami. W rzeczywistości każda instalacja WordPress używa Dashicons, który jest zestawem czcionek. Te ikony są używane na pasku użytkownika pulpitu nawigacyjnego.

Oto kilka projektów czcionek-ikon:

W tym samouczku użyję Font Awesome, który jest również jedną z najczęściej używanych i darmowych ikon czcionek.

Zbadamy dodawanie ikon czcionek do motywu WordPress. Pierwsza metoda odbywa się za pomocą wtyczki, a my również pokażemy Ci, jak to zrobić bez wtyczki.

Jak dodawać ikony czcionek za pomocą wtyczki WordPress

FontAwesome jest obsługiwany przez kilka wtyczek. Korzystanie z wtyczki pozwala łatwo dodać ikonę czcionki do motywu bez zmiany kodu źródłowego.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Lepsza Czcionka Fantastyczna, dostępne na WordPress.org. Po aktywacji wtyczki musisz przejść do następującej lokalizacji: „ Ustawienia> Lepsza czcionka Awesome", Aby skonfigurować wtyczkę. Jednak ta wtyczka może działać bez konfiguracji, więc użytkownicy tak naprawdę nie muszą niczego zmieniać.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

betterfontawesome

Ta wtyczka umożliwia dodawanie ikon czcionek w następujący sposób:

[icon name = »rakieta»]

[icon name = "cloud"]

[icon name = »słuchawki»]

Możesz dodać ikony do interfejsu edycji artykułów, wybierając spośród dostępnych ikon. Po prostu utwórz nowy artykuł, a zobaczysz ikonę „ Wstaw przycisk ikony Na pasku narzędzi edytora wizualnego.

Kliknięcie go spowoduje wyświetlenie nowego okna, w którym możesz znaleźć ikonę i wstawić ją.

fa-posteditor

Zauważysz, że wtyczka doda przycisk podobny do tego:

[icon name = »uniwersytet» klasa = »» unprefixed_class = »»]

Jeśli chcesz dodać więcej opcji dostosowywania, możesz dodać własną klasę dla własnego stylu.

[icon name = "university" class = "myclass" unprefixed_class = ""] Oto, w jaki sposób dostosujesz klasę swojej ikony:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

.fa-maclasse {rozmiar-czcionki: 100px; Kolor #FF6600; } 

To jest naprawdę proste. Zauważ, że klasa poprzedzona jest „fa-”. Nie zapomnij dodać go w kodzie CSS.

Jak ręcznie dodać czcionkę ikony w WordPress

Jak wspomniano wcześniej w tym samouczku, pokażę, jak ręcznie dodać czcionkę ikony do swojego bloga.

Niektóre ikony czcionek, takie jak Font Awesome, są dostępne za pośrednictwem serwerów CDN na całym świecie i można je bezpośrednio połączyć z blogiem.

Możesz również wysłać pliki tej ikony czcionki bezpośrednio do folderu motywu WordPress. Pokażę ci, jak dodać ikonę czcionki Awesome czcionki na swoim blogu.

Pierwsza metoda:

To jest najprostsza metoda. Po prostu dodaj ten wiersz w sekcji „<head>” swojego motywu (zazwyczaj znajduje się on w pliku header.php).

<Link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Ta metoda jest prosta, ale może powodować wiele konfliktów z innymi wtyczkami. Najlepszym rozwiązaniem jest załadowanie skryptów z WordPress, aby dodać je do kolejki.

Funkcja wp_load_fa () {wp_enqueue_style ( 'wpb fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); } add_action ('wp_enqueue_scripts', 'wp_load_fa');

Druga metoda:

Druga metoda nie jest najprostsza, ale pozwala mieć czcionki ikon na twoim motywie. Wszystko, co musisz zrobić, to pobrać i rozpakować pakiet czcionek-ikon (skompresowany plik) w folderze «Czcionki» twojego tematu.

Wystarczy pobrać ikonę czcionki i zmienić jej nazwę. Następnie musisz załadować czcionkę ikony z serwera.

ftpupload

Teraz, gdy jesteś gotowy załadować ikony czcionek do motywu WordPress, wystarczy dodać następujący kod do pliku „ functions.php Twojego motywu WordPress lub w swoim WordPress Plugin.

Funkcja wp_load_fa () {wp_enqueue_style ( 'wpb fa' get_stylesheet_directory_uri () /fonts/css/font-awesome.min.css.); } add_action ('wp_enqueue_scripts', 'wp_load_fa');

To wszystko.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Jak ręcznie wyświetlać ikony czcionek na blogu

Przejdź do bloga Font Awesome i zobacz listę dostępnych czcionek. Kliknij dowolny obraz, a zobaczysz kod obrazu.

fa-optinmonster

Trzeba tylko skopiować i wkleić następujący kod:

<i class="fa-optin-monster"></i>

W trybie edytora tekstu. Możesz użyć tej klasy, aby zmienić ikonę czcionki.

Jeśli chcesz dowiedzieć się więcej o CSS, zapraszam do przeczytaj ten poradnik, To tyle w tym samouczku. Podziel się nim ze znajomymi w swoich ulubionych sieciach społecznościowych.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
4 akcji
udział2
ćwierkanie
Enregistrer2