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.
Uwaga: Istnieje darmowa wersja SeedProd, ale my będziemy używać wersji Pro, ponieważ jest ona dostarczana z blokiem ikonek.
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.
Shraddha Patil
Very Helpful! I was searching for such solutions. Glad I found it here. Thank you!!
WPBeginner Support
Glad our guide was helpful
Administrator
Juan
Hi there, many thanks for suych a great explanation.
But I don´t understand something.
On the wp_enqueue_style() function, the first parameter is a string called 'wpb-fa’. I looked on the documentation and it is supposed to be the name of the stylesheet. But I don´t understand. What is this name for? Is mandatory to be named that way in this case? The stylesheet isn´t named „style.css”?
Sorry for the noob questions.
Thanks
WPBeginner Support
The wpb-fa is the unique name for the script, that section is not for the name of the stylesheet
Administrator
M. Hridoy
Hi,
This is Great! Thanks for your awesome resourceful worth reading post.Indeed a timely and useful post which I could pick up some valuable information on this subject. Keep updating new suggestions with us…
WPBeginner Support
Thank you and you’re welcome
Administrator
drkumar kumar
nice article , thanks for sharing
WPBeginner Support
Thank you, glad you liked our article
Administrator
Niranjan G Vala
Hello wp beginners support team, I am visually impaired web designer.
Have read this whole artical but still want some help regarding integrating the font icons in my website.
I want to use Font Awesome with my theme. and already followed the steps provided above in artical.
The icons are working in post and pages vary fine but i want to use it in menus.
Here what I have done with css.
.shoppingcart::before {
font-family: FontAwesome;
content: „\f07a”;
color: #ffffff;
}
But still it didn’t worked. Then what I have done wrong?
Please assist me out of this problem.
I will always appreciate.
Vary Thank you all at wp beginners.
WPBeginner Support
Hi Niranjan,
An easier way to add Font Awesome is to add its CSS classes to invidual menu items. After enqueuing font stylesheet.
Go to Appearance » Menus page and click on Screen Options button. From there make sure that CSS Classes check box is checked.
Next click to expand an individual menu item and you will notice the option to add CSS classes. Each font-awesome icon has its own CSS class for exmaple, fa fa-lg fa-home CSS classes will be used for home icon. You can find them all on Font Awesome website.
After adding CSS class you can use those classes in your custom CSS to style the icons.
Administrator
Niranjan G Vala
First thanks to all at WP Beginners for your valuable response. And sorry for late feedback. Unfortunately I was not able to reply quickly because the mail was in the spam folder. Now it works fine and i’m able to use font awesome in navigation menus.
One suggestion is that please mention the accessibility level of plugins/themes when you post an artical. Wordpress core is fully accessible but 60% of plugins and themes are not following the web accessibility guidelines (WCAG 2.0) witch is the recommendation of world wide web consortium (w3.org). Or please add skip links on your website for better accessibility. Making websites accessible will help lot to persons with disabilities like myself to navigate the website lot easier. Thanks.
ripon
in a website there should have font awesome icon. I want to make that dynamic. I want to change that icon from wordpress control panel. like why choose us section there should have responsive design font icon. I want to change that from wordpress theme option.
Tobias
Hi, awesome tutorial, thank you!
Can you help me?
I used this line of the code „-o-transform: scale(1);” to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using –
Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!
valldahi
Thank you very much Isy. methode 1
Nrusingh Pr Acharya
Thanks for this method. I inserted FA manually because better is not in support anymore with WP v4.7.
I am following your tutorials from first, and I’m pretty much confident in Wordpress now. Thanks.
zeniwo
A very informative article , it really helped me in clearing my doubts about adding icon fonts in wordpress themes . Bloggers like you help hundreds of new and budding bloggers like me to understand things and move ahead . Thank you very much for this useful article.
WPBeginner Support
Glad you found it helpful
Administrator
Rhonda
Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.
WPBeginner Support
Glad you found it helpful
Administrator
Kobe
Thanks for this post. It was really useful. I’ve been using Better Fonts Awesome plugin and it helped me much. But then I needed to form my content into responsive columns and I started to search for plugin that will allow me to do that. Accidentally I came across MotoPress Editor. Actually I do not like visual editors due to dependency on them but it saved me as I could form the columns visually and use Font Awesome Icons, selecting sizes and colors easily. Thank you again for good job.