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 901.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ć kultowe czcionki do swojego bloga WordPress? W okresie świątecznym każdy chce bardziej spersonalizować swojego bloga, aby zapewnić mu lepszy obraz. Kultowe czcionki są częścią aranżacji, które są regularnie wykonywane.

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. Te piktogramy 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. Na typowej stronie 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 nawigacyjnych WordPress.

Dostępnych jest kilka ikon czcionek z różnymi opcjami. W rzeczywistości każda instalacja WordPress używa Dashiconsczyli zestaw 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, nawiasem mówiąc, jest jedną z najczęściej używanych i bezpłatnych czcionek ikon.

Zbadamy dodawanie czcionek ikon do motywu WordPress. Pierwsza metoda jest wykonywana za pomocą wtyczki i pokażemy Ci również, jak to zrobić bez wtyczki.

Jak dodawać ikony czcionek za pomocą wtyczki WordPress

FontAwesome jest obsługiwany przez kilka wtyczek. Korzystanie z wtyczki umożliwia łatwe dodanie ikony czcionki do motywu bez modyfikowania kodu źródłowego.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Lepsza Czcionka Fantastyczna, dostępne na WordPress.org. Po aktywowaniu wtyczki musisz przejść do następującej lokalizacji: „ Ustawienia> Better Font Awesome„, Aby skonfigurować wtyczkę. Jednak ta wtyczka może działać bez konfiguracji, więc użytkownicy 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 czcionek ikon w następujący sposób:

[nazwa ikony = „rakieta”]

[nazwa ikony = "chmura"]

[nazwa ikony = "słuchawki"]

Możesz dodać ikony w interfejsie edycji artykułu, wybierając jedną z dostępnych ikon. Po prostu utwórz nowy artykuł, a zobaczysz ikonę „ Wstaw przycisk ikony Na pasku narzędzi edytora wizualnego.

Kliknięcie na niego 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:

[nazwa ikony = "uniwersytet" klasa = "" unprefixed_class = ""]

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

[icon name = "uniwersytet" class = "maclasse" unprefixed_class = ""]. Oto jak dostosujesz klasę swojej ikony:

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

To naprawdę jest takie proste. Zauważysz, że klasa jest poprzedzona znakiem „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 także wysłać pliki tej czcionki ikony bezpośrednio do folderu motywów WordPress. Pokażę ci, jak dodać czcionkę Font Awesome do swojego bloga.

Pierwsza metoda: 

To najłatwiejsza metoda. Wystarczy dodać tę linię w polu „ »Twojego motywu (zwykle znajduje się w pliku header.php).


Ta metoda jest prosta, ale może powodować wiele konfliktów z innymi wtyczkami. Najlepszym podejściem jest załadowanie skryptów z WordPress w celu dodania ich 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 najłatwiejsza, ale pozwala na umieszczenie czcionek ikon w motywie. Wszystko, co musisz zrobić, to pobrać i rozpakować pakiet ikon czcionek (skompresowany plik) w pliku „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 do załadowania ikon-czcionek w swoim motywie 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.

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 tego obrazu.

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]

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ć klasy, aby zmienić ikonę czcionki.

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

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie 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