Czy chcesz dodać czcionki ikon do swojej witryny WordPress?
Czcionki ikon umożliwiają dodanie zmiennych rozmiarów ikon wektorowych, które są ładowane jak czcionki internetowe, więc nie spowalniają Twojej witryny. Możesz nawet stylizować je za pomocą CSS, aby uzyskać dokładnie taki wygląd, jaki chcesz.
W tym artykule pokażemy Ci, jak łatwo dodać czcionki ikon w swoim motywie WordPress.
Czym są czcionki ikon i dlaczego powinieneś ich używać?
Czcionki ikon zawierają symbole lub małe obrazki zamiast liter i cyfr.
Możesz użyć tych czcionek ikon, aby pokazać wspólne obrazy. Na przykład możesz ich użyć z koszykiem, przyciskami pobierania, pudełkami funkcji, konkursami giveaway, a nawet w menu nawigacyjnym WordPress.
Większość odwiedzających natychmiast zrozumie, co oznacza powszechnie używana ikona. W ten sposób możesz pomóc odwiedzającym znaleźć drogę po swojej stronie i zaangażować się w treść.
Te obrazy mogą również pomóc w tworzeniu wielojęzycznej witryny WordPress, ponieważ większość ludzi może zrozumieć czcionki ikon bez względu na to, jakim językiem się posługują.
W porównaniu z ikonami opartymi na obrazach, ikony czcionek ładują się znacznie szybciej, więc mogą zwiększyć szybkość i wydajność WordPressa.
Istnieje kilka zestawów czcionek ikon open-source, których możesz używać za darmo, takich jak IcoMoon, Genericons i Linearicons.
W rzeczywistości oprogramowanie WordPress pochodzi z wbudowanymi darmowymi ikonami dashicon. Są to ikony, które można zobaczyć w obszarze administracyjnym WordPress.
W tym przewodniku będziemy używać Font Awesome, ponieważ jest to najpopularniejszy zestaw ikon open-source. Używamy go na WPBeginner, a także we wszystkich naszych wtyczkach premium WordPress.
Mając to na uwadze, spójrzmy, jak możesz łatwo dodać czcionki ikon w swoim motywie WordPress. Po prostu użyj szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć.
Metoda 1. Dodawanie czcionek ikon za pomocą wtyczki WordPress (łatwe)
Najprostszym sposobem dodania czcionek ikon do WordPressa jest użycie wtyczki Font Awesome. Dzięki temu możesz używać czcionek ikon w swoich stronach i postach bez modyfikowania plików motywu. Otrzymasz również wszelkie nowe ikony Font Awesome automatycznie przy każdej aktualizacji wtyczki.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Font Awesome. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji możesz dodać ikonę Font Awesome do dowolnego bloku shortcode. Po prostu otwórz stronę lub post, w którym chcesz pokazać czcionkę ikony, a następnie kliknij ikonę „+”.
Możesz teraz wyszukać „Shortcode” i wybrać odpowiedni blok, gdy się pojawi.
Mając to zrobione, możesz dodać dowolną ikonę Font Awesome za pomocą następującego shortcode:
Po prostu zastąp „rakieta” nazwą ikony, którą chcesz pokazać. Aby uzyskać tę nazwę, przejdź do witryny Font Awesome i kliknij ikonę, której chcesz użyć.
W wyskakującym okienku, które się pojawi, przejdź do przodu i kliknij nazwę ikony.
Font Awesome będzie teraz automatycznie kopiować nazwę do schowka.
Po wykonaniu tej czynności po prostu wklej nazwę do shortcode. Możesz teraz kliknąć „Opublikuj” lub „Aktualizuj”, aby czcionka ikony była na żywo.
Czasami możesz chcieć pokazać czcionkę ikony wewnątrz bloku tekstu. Na przykład możesz potrzebować wyświetlić symbol „praw autorskich” po nazwie marki.
Aby to zrobić, po prostu wklej shortcode wewnątrz dowolnego bloku akapitu.
Następnie możesz użyć ustawienia w prawym menu, aby dostosować ikonę, podobnie jak dostosowujesz opcje dla bloków tekstu. Na przykład możesz zmienić rozmiar czcionki.
WordPress zamieni shortcode w ikonę Font Awesome dla odwiedzających i pokaże ją obok twojego tekstu.
Inną opcją jest dodanie shortcode do dowolnego obszaru gotowego na widget.
Na przykład możesz dodać blok Shortcode do paska bocznego witryny lub podobnej sekcji.
Aby uzyskać więcej informacji, zobacz nasz przewodnik po tym, jak używać shortcodes w widżetach paska bocznego WordPress.
Możesz nawet dodać shortcode ikony do kolumn i stworzyć piękne pola funkcji.
Aby uzyskać szczegółowe instrukcje, zobacz nasz przewodnik o tym, jak dodać pola funkcji z ikonami w WordPress.
Wiele stron internetowych używa czcionek ikon w swoich menu, aby pomóc odwiedzającym znaleźć drogę. Aby dodać ikonę, utwórz nowe menu lub otwórz istniejące menu w pulpicie nawigacyjnym WordPress.
Aby uzyskać instrukcje krok po kroku, sprawdź nasz przewodnik dla początkujących, jak dodać menu nawigacyjne w WordPress.
Następnie kliknij na „Opcje ekranu” i zaznacz pole obok „Klasy CSS”.
Mając to zrobione, po prostu kliknij, aby rozwinąć pozycję menu, w której chcesz pokazać ikonę.
Powinieneś teraz zobaczyć nowe pole 'CSS Classes’.
Aby uzyskać klasę CSS ikony, po prostu znajdź czcionkę ikony na stronie Font Awesome i daj jej kliknięcie. Jeśli chcesz, to możesz zmienić styl ikony, klikając różne ustawienia.
W wyskakującym okienku zobaczysz wycinek kodu HTML. Klasa CSS to po prostu tekst pomiędzy cudzysłowami. Na przykład, na poniższym obrazku, klasa CSS to fa-solid fa-address-book.
Po prostu skopiuj tekst wewnątrz cudzysłowów, a następnie przełącz się z powrotem do pulpitu nawigacyjnego WordPress.
Teraz możesz wkleić tekst do pola „Klasy CSS”.
Aby dodać więcej czcionek ikon, po prostu wykonaj ten sam proces opisany powyżej.
Kiedy jesteś zadowolony z tego, jak skonfigurowane jest menu, kliknij 'Zapisz’. Teraz, jeśli odwiedzisz swoją witrynę WordPress, zobaczysz zaktualizowane menu nawigacyjne.
Metoda 2. Używanie czcionek ikon z SeedProd (bardziej konfigurowalne)
Jeśli chcesz mieć więcej wolności nad tym, gdzie używasz ikon czcionek, to zalecamy użycie wtyczki do budowania stron.
SeedProd to najlepszy drag-and-drop WordPress page builder na rynku i ma wbudowane ponad 1400 ikon Font Awesome. Ma również gotowe pole Icon, które możesz dodać do każdej strony za pomocą przeciągania i upuszczania.
Dzięki SeedProd łatwo jest tworzyć niestandardowe strony w WordPressie, a następnie pokazywać ikony Font Awesome w dowolnym miejscu na tych stronach.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik dla początkujących, jak zainstalować wtyczkę WordPress.
Uwaga: Istnieje darmowa wersja SeedProd, ale będziemy używać wersji Pro, ponieważ pochodzi ona z pudełka Icon.
Po aktywacji przejdź do SeedProd ” Ustawienia i wprowadź swój klucz licencyjny.
Informacje te znajdziesz pod swoim kontem na stronie SeedProd. Po wprowadzeniu klucza licencyjnego, przejdź dalej i kliknij przycisk „Zweryfikuj klucz”.
Następnie musisz odwiedzić stronę SeedProd ” Pages i kliknąć przycisk 'Add New Landing Page’.
Teraz możesz wybrać szablon, który będzie podstawą Twojej strony. SeedProd posiada ponad 180 profesjonalnie zaprojektowanych szablonów, z których możesz skorzystać.stomizuj zgodnie z potrzebami swojego bloga WordPress lub strony internetowej.
Aby wybrać szablon, najedź na niego myszką, a następnie kliknij ikonę 'Checkmark’.
Używamy szablonu „Ebook Sales Page” we wszystkich naszych obrazach, ale możesz użyć dowolnego projektu, który chcesz.
Następnie przejdź i wpisz nazwę dla niestandardowej strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz go zmienić na dowolny.
Kiedy będziesz zadowolony z wprowadzonych informacji, kliknij na przycisk „Zapisz i rozpocznij edycję strony”.
Następnie zostaniesz przeniesiony do edytora stron SeedProd typu drag-and-drop, gdzie możesz dostosować szablon.
Edytor SeedProd pokazuje podgląd na żywo Twojego projektu po prawej stronie i niektóre ustawienia bloków po lewej.
Menu po lewej stronie zawiera również bloki, które możesz przeciągnąć na swój projekt.
Możesz przeciągnąć i upuścić standardowe bloki, takie jak przyciski i obrazy lub użyć zaawansowanych bloków, takich jak formularz kontaktowy, odliczanie, przyciski udostępniania społecznościowego i inne.
Aby dostosować dowolny blok, wystarczy kliknąć, aby wybrać go w swoim układzie.
Menu po lewej stronie pokaże teraz wszystkie ustawienia, których możesz użyć, aby dostosować ten blok. Na przykład, często możesz zmienić kolory tła, dodać obrazy tła lub zmienić schemat kolorów i czcionki, aby lepiej dopasować swoją markę.
Aby dodać czcionkę ikony do strony, wystarczy znaleźć blok 'Ikona’ w lewej kolumnie, a następnie przeciągnąć go na swój układ.
SeedProd domyślnie pokaże ikonę „strzałki”.
Aby pokazać inną ikonę Font Awesome zamiast niej, po prostu kliknij, aby wybrać blok Ikona.
W menu po lewej stronie najedź myszką na ikonę, a następnie kliknij na przycisk „Biblioteka ikon”, gdy się pojawi.
Teraz zobaczysz wszystkie różne ikony Font Awesome, z których możesz wybierać.
Po prostu znajdź ikonę czcionki, której chcesz użyć i daj jej kliknięcie.
SeedProd doda teraz ikonę do twojego układu.
Po wybraniu ikony możesz zmienić jej wyrównanie, kolor i rozmiar za pomocą ustawień w menu po lewej stronie.
Możesz kontynuować pracę nad stroną, dodając kolejne bloki i dostosowując je w menu po lewej stronie.
Kiedy jesteś zadowolony z wyglądu strony, kliknij przycisk 'Zapisz’. Następnie możesz wybrać 'Opublikuj’, aby strona zaczęła działać.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać czcionki ikon w swoim motywie WordPress. Możesz również przejść przez nasz przewodnik po najlepszych porównywanych wtyczkach popup i jak wybrać najlepsze oprogramowanie do projektowania stron internetowych.
Jeśli podobał Ci się ten artykuł, to proszę zasubskrybuj nasz kanał YouTube dla tutoriali wideo WordPress. Możesz również znaleźć nas na Twitterze i Facebooku.