Jak używać czcionek ikon w edytorze postów WordPress (bez kodu)

Czy chcesz używać czcionek ikon w edytorze postów WordPress?

Czcionki ikon pozwalają łatwo używać obrazów i symboli w tekście. Są lekkie i nie spowolnią Twojej witryny, a także można je łatwo skalować do dowolnego rozmiaru i stylizować jak każdą inną czcionkę tekstową.

W tym artykule pokażemy Ci, jak łatwo używać ikon czcionek w edytorze postów WordPress bez pisania kodu HTML.

Pokażemy Ci wiele metod, każda z nich wykorzystuje nieco inne podejście. Możesz wybrać to, które działa dla Ciebie najlepiej.

Metoda 1. Dodawanie ikon czcionek w edytorze postów WordPress za pomocą ikon tekstu formatowanego JVM

Ta metoda jest zalecana do stosowania na każdym rodzaju strony WordPress. Jest łatwa w użyciu i działa bezproblemowo z edytorem bloków.

Najpierw musisz zainstalować i aktywować wtyczkę JVM Rich Text Icons. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji możesz po prostu edytować post lub stronę WordPress lub utworzyć nową. W edytorze postów dodaj nowy blok akapitu, a zobaczysz nową ikonę flagi na pasku narzędzi bloku.

Kliknięcie go wyświetli okno podręczne z ikonami do wyboru. Domyślnie używa popularnych czcionek ikon Font Awesome.

Możesz użyć wyszukiwarki, aby znaleźć ikonę lub po prostu przewinąć w dół, aby znaleźć ikonę, której szukasz, a następnie kliknąć, aby ją dodać.

Jedną z zalet korzystania z czcionek ikon jest to, że możesz używać CSS do ich stylizacji.

Jednakże, ponieważ już korzystasz z edytora bloków, możesz po prostu użyć wbudowanych narzędzi kolorystycznych do stylizacji ikon.

Wtyczka pozwala na używanie ikon czcionek w większości bloków tekstowych, takich jak Akapit, Lista, Przycisk, Kolumny, Okładka i inne.

Oto przykład użycia czcionek ikon i opcji bloków do stylizacji trzech kolumn.

Innym przydatnym przykładem użycia czcionek ikon są przyciski.

Tym razem używamy wbudowanych ikon czcionek obok tekstu dla dwóch przycisków.

Zachęcamy do korzystania z narzędzi edytora blokowego, takich jak wyrównanie tekstu, kolory, odstępy i inne, aby w pełni wykorzystać możliwości czcionek ikon.

Metoda 2. Dodaj ikony czcionek w edytorze postów WordPress za pomocą Font Awesome

Ta metoda wymaga dodania krótkich kodów w edytorze postów, aby wyświetlić czcionki ikon. Możesz użyć tej metody, jeśli nie musisz regularnie używać czcionek ikon w swoich postach i stronach WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę Font Awesome. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji możesz edytować post lub stronę w WordPress i użyć następującego skróconego kodu, aby dodać ikonę czcionki.

[icon name="home"]

Parametr name tutaj to nazwa czcionki używanej przez Font Awesome. Pełną listę znajdziesz na stronie Font Awesome cheatsheet.

Po dodaniu możesz podglądnąć swój post lub stronę, aby zobaczyć, jak ikona będzie wyglądać na żywej stronie, ponieważ nie będzie ona wyświetlana jako ikona w edytorze bloków.

Tak to wyglądało na naszej stronie testowej.

Możesz użyć skróconego kodu wewnątrz akapitu i w linii z innym tekstem. Możesz go również dodać samodzielnie, używając bloku „Skrócony kod”.

Jednak użycie bloku „Krótki kod” nie zapewni Ci opcji stylizacji, które uzyskasz dzięki innym blokom tekstowym.

Możesz również dodać skrócony kod w kolumnach, aby utworzyć wiersz funkcji.

Byłoby to trochę trudniejsze, ponieważ nie będziesz widział rzeczywistych obrazów, a wysokości kolumn będą się zmieniać w edytorze.

Tak to wyglądało na naszej stronie testowej. Kolumny mają tę samą wysokość, mimo że w edytorze nie mają.

Prawdopodobnie będziesz musiał wielokrotnie podglądać swoją pracę w nowej karcie przeglądarki, aby zobaczyć, jak będzie wyglądać dla użytkowników.

Metoda 3. Używanie ikon czcionek z kreatorami stron WordPress

Ta metoda jest świetna, jeśli tworzysz stronę docelową lub projektujesz swoją stronę internetową za pomocą kreatora stron WordPress, takiego jak SeedProd.

SeedProd to najlepszy kreator stron WordPress na rynku. Pozwala łatwo tworzyć oszałamiające strony docelowe lub projektować kompletny motyw strony internetowej.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji zostaniesz poproszony o podanie klucza licencyjnego wtyczki. Te informacje znajdziesz na swoim koncie na stronie SeedProd.

Po wprowadzeniu klucza licencyjnego i kliknięciu „Zweryfikuj klucz” możesz zacząć pracować nad swoją stroną docelową.

Po prostu przejdź do strony SeedProd » Landing Pages i kliknij przycisk „Dodaj nową stronę docelową”.

Następnie zostaniesz poproszony o wybranie szablonu dla swojej strony docelowej.

SeedProd oferuje wiele pięknych projektów stron docelowych, których możesz użyć jako punktu wyjścia, lub możesz zacząć od pustego szablonu i zaprojektować wszystko samodzielnie.

W tym samouczku użyjemy gotowego szablonu. Po prostu kliknij szablon, aby go wybrać i kontynuować.

Następnie zostaniesz poproszony o podanie tytułu dla swojej strony docelowej i wybranie adresu URL.

Po ich wprowadzeniu kliknij przycisk „Zapisz i rozpocznij edycję strony”, aby kontynuować.

SeedProd uruchomi teraz interfejs kreatora stron. Jest to narzędzie do projektowania metodą przeciągnij i upuść, gdzie możesz po prostu wskazać i kliknąć dowolny element, aby go edytować.

Możesz również przeciągać i upuszczać bloki z lewej kolumny, aby dodać nowe elementy do swojego projektu.

Na potrzeby tego poradnika dodamy blok Ikony.

Po dodaniu bloku możesz po prostu kliknąć, aby edytować jego właściwości.

Lewa kolumna zmieni się, aby wyświetlić opcje dla bloku Ikony. Możesz kliknąć w sekcję „Ikona” po lewej stronie, aby wybrać inny obraz ikony lub zmienić kolor i styl.

Innym sposobem używania ikon w SeedProd jest dodanie bloku „Pudełko z ikonami”.

Różnica między tym a blokiem „Ikona”, którego użyliśmy wcześniej, polega na tym, że „Pudełko z ikoną” pozwala dodawać tekst wraz z wybraną ikoną.

Jest to jeden z najczęstszych sposobów wykorzystania ikon podczas wyświetlania funkcji produktu, usług i innych elementów.

Możesz umieścić pole ikony w kolumnach, wybrać kolory i dostosować rozmiar ikony do swoich potrzeb.

Dodatkowo możesz również formatować towarzyszący tekst za pomocą paska narzędzi formatowania SeedProd.

Po zakończeniu edycji strony nie zapomnij kliknąć przycisku „Zapisz” w prawym górnym rogu ekranu.

Jeśli jesteś gotowy, możesz kliknąć „Opublikuj”, aby strona stała się aktywna, lub kliknąć „Podgląd”, aby upewnić się, że wygląda tak, jak chcesz.

Możesz również kliknąć „Zapisz jako szablon”, aby ponownie wykorzystać ten projekt z SeedProd w innych częściach swojej witryny.

Oto jak czcionki ikon wyglądały na naszej stronie testowej.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak używać czcionek ikon w edytorze postów WordPress bez pisania kodu HTML. Możesz również zapoznać się z naszym przewodnikiem po wydajności WordPress, aby zoptymalizować szybkość swojej witryny, lub najlepszymi wtyczkami do stron docelowych dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.