Jak łatwo dodać krój pisma z ikonkami do twojego motywu WordPress

Czcionki ikon są jednym z najskuteczniejszych narzędzi w naszym zestawie narzędzi do projektowania WordPress i mogą być również twoje.

Są one czymś więcej niż tylko ozdobą – można zmieniać ich rozmiar, ładują się szybko jak czcionki internetowe i nie spowalniają witryny, jak tradycyjne ikony graficzne. Ponadto można je stylizować za pomocą CSS, aby uzyskać dokładnie taki wygląd, jaki chcesz.

Odkryliśmy dwie niezawodne metody dodawania czcionek ikon do WordPressa, a ten artykuł pokaże Ci, jak to zrobić.

Czym są kroje pisma z ikonkami i dlaczego warto z nich korzystać?

Kroje pisma z ikonkami zawierają symbole lub małe obrazki zamiast liter i cyfr.

Te czcionki ikon można wykorzystać na wiele różnych sposobów. Można ich na przykład użyć w koszyku, przyciskach pobierania, polach funkcji, konkursach rozdania, a nawet menu nawigacyjnym WordPress.

W rzeczywistości WordPress używa ikonek kroju pisma w swoim obszarze administracyjnym.

Większość odwiedzających natychmiast zrozumie, co oznaczają powszechnie używane ikonki, dzięki czemu Twoja witryna będzie łatwiejsza w nawigacji. Mogą one również pomóc w stworzeniu wielojęzycznej witryny internetowej, ponieważ większość ludzi zrozumie powszechnie używane kroje pisma ikon, niezależnie od języka, którym się posługują.

W porównaniu do ikonek opartych na obrazkach, ikonki z krójem pisma wczytują się znacznie szybciej, dzięki czemu mogą zwiększyć szybkość i wydajność WordPressa.

Istnieje kilka zestawów czcionek ikon typu open-source, których można używać za darmo, ale w tym przewodniku będziemy używać Font Awesome, ponieważ jest to najpopularniejszy zestaw ikon typu open-source.

Mając to na uwadze, przyjrzyjmy się, jak można łatwo dodać czcionki ikon do motywu 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 (bezpłatne i łatwe)

Najprostszym sposobem na dodanie własnych czcionek ikon do WordPressa jest użycie wtyczki Font Awesome.

Wtyczka ta umożliwia korzystanie z darmowych krojów pisma ikon na stronach i we wpisach bez konieczności modyfikowania plików twojego motywu WordPress. Wszelkie nowe ikonki Font Awesome będą również automatycznie pobierane przy każdej aktualizacji wtyczki.

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

Po włączaniu można dodać ikonkę Font Awesome do dowolnego bloku krótkiego kodu. Wystarczy otworzyć stronę lub wpis, w którym ma być wyświetlany krój pisma z ikonką, a następnie kliknąć ikonę „+”.

Możesz teraz wyszukać „Krótki kod” i wybrać odpowiedni blok, gdy się pojawi.

Po wykonaniu tej czynności można dodać dowolną ikonkę Font Awesome za pomocą poniższego krótkiego kodu:

[icon name="rocket"]

Po prostu zastąp „rocket” nazwą ikonki, którą chcesz wyświetlić. Aby uzyskać nazwę, przejdź do biblioteki Font Awesome i kliknij ikonkę, której chcesz użyć.

W wyświetlonym oknie kliknij ikonę.

Font Awesome automatycznie skopiuje nazwę do twojego schowka.

Po wykonaniu tej czynności wystarczy wkleić nazwę do krótkiego kodu. Możesz teraz kliknąć „Opublikuj” lub „Aktualizuj”, aby uruchomić krój pisma ikonki.

Czasami może zaistnieć potrzeba wyświetlenia czcionki z ikonką wewnątrz bloku tekstu. Na przykład, może być konieczne wyświetlenie symbolu praw autorskich po nazwie marki.

Aby to zrobić, wystarczy wkleić krótki kod wewnątrz dowolnego bloku akapitu.

Następnie można użyć ustawień w menu po prawej stronie, aby dostosować ikonę, podobnie jak w przypadku dostosowywania opcji dla bloków tekstowych. W WordPress można na przykład zmienić kolor tekstu, rozmiar czcionki i kolor tła.

WordPress zamieni krótki kod w ikonkę Font Awesome i wyświetli ją obok twojego tekstu.

Inną opcją jest dodanie krótkiego kodu do dowolnego obszaru gotowego na widżet.

Na przykład, możesz dodać blok z krótkim kodem do panelu bocznego twojej witryny lub podobnej sekcji.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat korzystania z krótkich kodów w twoim panelu bocznym WordPress.

Możesz nawet dodać krótki kod ikonki do kolumn i stworzyć 111111 pięknych boksów funkcji.

Szczegółowe instrukcje można znaleźć w naszym przewodniku na temat dodawania boksów funkcji z ikonkami w WordPressie.

Wiele witryn internetowych wykorzystuje w swoich menu krój pisma z ikonkami, aby ułatwić odwiedzającym poruszanie się po nich. Aby dodać ikonkę, utwórz nowe menu lub otwórz istniejące menu w kokpicie WordPress.

Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem dla początkujących, jak dodać menu nawigacyjne w WordPress.

Na stronie Wygląd „ Menu kliknij „Opcje ekranu”, a następnie zaznacz pole obok „Klasy CSS”.

Po wykonaniu tej czynności wystarczy kliknąć, aby rozwinąć pozycję menu, w której ma być wyświetlana ikonka.

Powinieneś teraz zobaczyć nowe pole „Klasy CSS”.

Aby uzyskać klasę CSS ikonki, wystarczy znaleźć jej krój pisma na witrynie internetowej Font Awesome i kliknąć. Jeśli chcesz, możesz zmienić styl ikonki, klikając na różne ustawienia.

W wyskakującym okienku zobaczysz fragment kodu HTML. Klasa CSS to po prostu tekst między cudzysłowami. Na przykład na poniższym obrazku klasa CSS to fa-solid fa-address-book.

Wystarczy skopiować tekst wewnątrz cudzysłowu, a następnie przełączyć się z powrotem do kokpitu WordPress.

Możesz teraz wkleić tekst do pola „Klasy CSS”.

Aby dodać więcej krojów pisma ikon, wystarczy wykonać ten sam proces opisany powyżej.

Gdy będziesz zadowolony z konfiguracji menu, kliknij „Zapisz”. Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz zaktualizowane menu nawigacyjne.

Metoda 2. Używanie krojów pisma z ikonami w SeedProd (większe możliwości dostosowania)

Jeśli chcesz mieć swobodę korzystania z ikonek pisma w dowolnym miejscu twojej witryny, zalecamy użycie wtyczki do tworzenia stron.

SeedProd to najlepszy na rynku kreator stron WordPress typu ” przeciągnij i upuść „, który ma wbudowanych ponad 1400 ikon Font Awesome. Posiada również gotowy blok ikon, który można dodać do dowolnej strony za pomocą przeciągania i upuszczania.

Dzięki SeedProd możesz również stworzyć własny motyw WordPress, który będzie pasował do twojego pożądanego projektu witryny internetowej.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do SeedProd ” Ustawienia i wpisz swój klucz licencyjny.

Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po wpisz klucz licencyjny, przejdź dalej i kliknij przycisk „Zweryfikuj klucz”.

Następnie należy przejść na stronę SeedProd ” Pages i kliknąć przycisk „Add New Landing Page”.

Teraz możesz wybrać szablon, który posłuży jako podstawa Twojej strony. SeedProd ma ponad 350+ profesjonalnie zaprojektowanych szablonów, które możesz dostosować do potrzeb swojego bloga WordPress lub strony internetowej.

Można na przykład utworzyć wiralową stronę docelową listy oczekujących, stronę squeeze page, a nawet niestandardową stronę błędu 404, aby utrzymać zaangażowanie klientów.

Aby wybrać szablon, najedź na niego kursorem myszy, a następnie kliknij ikonkę „Znacznik wyboru”.

Używamy szablonu „Ebook Sales Page” we wszystkich naszych obrazach, ponieważ jest on idealny do sprzedaży produktów cyfrowych. Możesz jednak użyć dowolnego projektu.

Następnie wpisz rodzaj nazwy dla własnej strony. SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz go zmienić na dowolny inny.

Gdy jesteś zadowolony z informacji, które wpiszesz, kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Następnie zostaniesz przeniesiony do kreatora stron SeedProd typu „przeciągnij i upuść”, gdzie możesz dostosować szablon do własnych potrzeb.

Edytor SeedProd pokazuje podgląd na żywo twojego projektu po prawej stronie i niektóre ustawienia bloków po lewej stronie.

Menu po lewej stronie zawiera również bloki, które można przeciągnąć na twój projekt.

Możesz przeciągać i upuszczać standardowe bloki, takie jak przyciski i obrazy, lub korzystać z zaawansowanych bloków, takich jak formularz kontaktowy, odliczanie, przyciski udostępniania w mediach społecznościowych i inne.

Aby dostosować dowolny blok, wystarczy kliknąć, aby wybrać go w twoim układzie.

Menu po lewej stronie pokaże teraz wszystkie ustawienia, których można użyć, aby dostosować ten blok. Na przykład, możesz często zmieniać kolory tła, dodawać obrazki tła lub zmieniać schemat kolorów i kroje pisma, aby lepiej pasowały do twojej marki.

Aby dodać krój pisma do strony, wystarczy znaleźć blok „Ikonka” w lewej kolumnie, a następnie przeciągnąć go na twój układ.

SeedProd domyślnie wyświetli ikonkę „strzałki”.

Aby zamiast tego wyświetlić inną ikonkę Font Awesome, wystarczy kliknąć, aby wybrać blok Ikonka.

W menu po lewej stronie najedź twoim kursorem myszy na ikonkę, a następnie kliknij przycisk „Biblioteka ikonek”, gdy się pojawi.

Zobaczysz teraz wszystkie różne ikonki Font Awesome, które możesz wybrać.

Po prostu znajdź ikonkę pisma, którego chcesz użyć i kliknij ją.

SeedProd doda teraz ikonkę do twojego układu.

Po wybraniu ikonki można zmienić jej wyrównanie, kolor i rozmiar, korzystając z ustawień w menu po lewej stronie.

Można również dodać odnośnik do ikonki pisma, wpisując go w polu „Link” w menu po lewej stronie.

Inną opcją jest skorzystanie z gotowej ikonki SeedProd.

Pozwala to na wpisanie pewnego rodzaju tekstu, a następnie wyświetlenie obok niego ikonki z krojem pisma, co sprawia, że jest to świetny wybór dla pól funkcji.

Wystarczy znaleźć ikonkę w menu po lewej stronie i przeciągnąć ją na twój układ.

Następnie można kliknąć, aby wybrać blok i zmienić ikonkę, wykonując ten sam proces opisany powyżej.

Następnie możesz wpisać rodzaj tekstu nagłówka i treści.

Możesz także zmienić wypełnienie i margines bloku, dodać animacje CSS i więcej, wybierając kartę „Zaawansowane”.

Możesz kontynuować pracę nad stroną, dodając kolejne bloki i dostosowując je w menu po lewej stronie.

Kiedy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz”. Następnie możesz wybrać opcję „Opublikuj”, aby uruchomić stronę.

Alternatywa: Użyj ikon SVG

Innym sposobem na dodanie obrazków ikonek do WordPressa jest użycie ikon SVG. Skrót od skalowalnego formatu wektorowego, jest to powszechnie używany format obrazków dla grafiki wektorowej.

Wiele osób używa ikon wektorowych SVG zamiast czcionek ikon, gdy chcą dodać wiele kolorów do swoich ikonek. Pliki te są również znane z tego, że są bardziej przyjazne dla SEO i wymagają mniejszej liczby żądań serwera do wczytywania niż inne ikonki obrazków.

Jeśli chcesz dowiedzieć się więcej o SVG, możesz zapoznać się z naszym przewodnikiem krok po kroku, jak dodawać pliki obrazów SVG w WordPress.

Mamy nadzieję, że ten poradnik pomógł ci nauczyć się dodawać czcionki ikon do motywu WordPress. Możesz również zapoznać się z naszym przewodnikiem po najlepszych kreatorach motywów WordPress i sposobach zmiany czcionek w motywie WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.