Strona bez ikon wygląda jak tekstowa płachta z 2005 roku. Ale rysowanie ikon w Photoshopie i użeranie się ze sprite'ami to żadna przyjemność, zwłaszcza jeśli nie jest Pan/Pani projektantem.

Font Awesome rozwiązuje ten problem od 2012 roku: to darmowa biblioteka z ponad 2000 ikon wektorowych, które zachowują się jak zwykły tekst. Zmienia Pan/Pani kolor w CSS, ikona zmienia barwę. Zwiększa Pan/Pani rozmiar czcionki, skaluje się bez pikselizacji i rozmycia.

W praktyce darmowa wersja wystarcza do menu, przycisków i mediów społecznościowych. A jeśli potrzebne są duotony i ponad 30 000 ikon, dostępna jest wersja Pro od 60 USD rocznie. Poniżej trzy sposoby dodania Font Awesome do WordPressa: od najprostszego po ręczną instalację dla tych, którzy nie boją się functions.php.

💡 Szybki przegląd:

• Proszę zainstalować oficjalną wtyczkę Font Awesome z katalogu WordPress, zajmie to minutę i nie wymaga edycji kodu
• Dla ręcznej kontroli proszę podłączyć Font Awesome przez CDN lub Kit w functions.php motywu potomnego
• Jeśli korzysta Pan/Pani z Elementora, ikony są już wbudowane, osobna wtyczka nie jest potrzebna
• Po podłączeniu proszę zmieniać rozmiar, kolor i animację ikon przez CSS lub gotowe klasy

Czym jest Font Awesome

Font Awesome to czcionka ikonowa: zamiast liter zawiera symbole-ikony. Przeglądarka renderuje je jako grafikę wektorową, więc na każdym ekranie i w dowolnej skali krawędzie pozostają ostre. Żadnych PNG, sprite'ów i srcset.

Biblioteka dzieli się na dwie części. Darmowa zawiera pięć stylów: Solid, Regular, Brands, Duotone i Sharp. Pro dodaje Thin, Light i dziesiątki tysięcy ikon, plus możliwość przesyłania własnych SVG przez Kit. Dla typowej wizytówki czy bloga Free pokrywa zdecydowaną większość potrzeb: strzałki, media społecznościowe, wyszukiwanie, koszyk, checkboxy.

Główną przewagą nad ikonami rastrowymi jest pełna kontrola przez CSS. Kolor, rozmiar, cień, obrót, animacja, wszystko ustawia się klasami bez żadnej edycji grafiki.

Sposób 1: oficjalna wtyczka (zalecana)

Najbezpieczniejszą drogą jest zainstalowanie oficjalnej wtyczki Font Awesome z WordPress.org. Wydaje ją ten sam zespół, który tworzy samą bibliotekę. Wtyczka aktualizuje się synchronicznie z premierą nowych wersji ikon i nie zależy od Pana/Pani motywu.

Jak zainstalować:

Proszę przejść do Wtyczki → Dodaj nową. W polu wyszukiwania proszę wpisać „font awesome" i nacisnąć Enter.

Proszę kliknąć Zainstaluj, a następnie Włącz.

Gotowe. Po aktywacji w menu Ustawienia pojawi się pozycja Font Awesome, gdzie można przełączyć źródło ikon (CDN lub Kit), włączyć zgodność z czwartą wersją i uruchomić skaner konfliktów.

Wtyczka dodaje do edytora blokowego osobny blok „Font Awesome Icon". Po kliknięciu na niego otwiera się wyszukiwarka całej biblioteki. Wybiera Pan/Pani ikonę, klika „Wstaw", a ona pojawia się w tekście jako SVG. Stylizacja bezpośrednio w panelu bocznym bloku: rozmiar, kolor, obrót.

Dla klasycznego edytora działa shortcode:

1
[icon name="download" prefix="fa-solid"]

Albo czysty HTML:

1
<i class="fa-solid fa-download"></i>

Jeśli mają Państwo konto Pro, proszę utworzyć Kit na fontawesome.com, skopiować API Token i wkleić go w ustawieniach wtyczki. Po tym Icon Chooser będzie pokazywał również ikony Pro.

Sposób 2: ręczna instalacja przez functions.php

Sposób dla tych, którzy chcą kontrolować każdy zasób ładowany na stronę lub nie instalują zbędnych wtyczek. Działa przez motyw potomny, aby aktualizacja motywu głównego nie skasowała Państwa zmian.

Proszę utworzyć motyw potomny

W folderze wp-content/themes/ proszę utworzyć katalog z sufiksem -child (na przykład astra-child). W środku, dwa pliki.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Proszę przejść do Appearance → Themes i aktywować motyw potomny.

Proszę podłączyć Font Awesome przez CDN

Proszę dodać w functions.php motywu potomnego kod:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Ten hak pobiera darmową wersję z CDN cdnjs, najbardziej niezawodnego publicznego CDN dla FA 6. Liczba 6.7.2 to wersja na czerwiec 2026; proszę sprawdzić aktualną na stronie pakietu cdnjs i podstawić najnowszą.

Alternatywa: Kit od Font Awesome

Kit daje dostęp do ikon Pro i automatycznie ładuje tylko te style, które są używane na stronie, co oznacza mniej zbędnych kilobajtów.

Proszę zarejestrować się na stronie Font Awesome, utworzyć Kit, skopiować kod osadzenia i wkleić go w header.php motywu potomnego przed </head>:

1
<script src="https://kit.fontawesome.com/ВАШ_КОД.js" crossorigin="anonymous"></script>

Minusem Kita jest to, że darmowy plan jest ograniczony do 10 000 odsłon strony miesięcznie. Dla witryny z większym ruchem, albo CDN, albo Pro.

Wbudowany edytor motywu (Appearance → Theme File Editor) umożliwia edycję functions.php bezpośrednio z panelu administracyjnego. Jednak bezpieczniej jest pracować przez FTP lub menedżer plików hostingu: literówka w kodzie PHP psuje stronę, a bez dostępu do plików nie będzie czym jej przywrócić.

Sposób 3: przez Elementor lub inny kreator

Jeśli już korzystają Państwo z Elementora, osobna wtyczka Font Awesome nie jest potrzebna, kreator zawiera bibliotekę od razu po instalacji.

W dowolnym widżecie z ikoną (Icon, Icon Box, Icon List) klikają Państwo ikonę → otwiera się biblioteka z wyszukiwaniem we wszystkich stylach Free. Kolor, rozmiar, cień i efekty hover konfiguruje się w panelu bocznym bez ani jednej linii CSS.

To samo dotyczy SeedProd, Beaver Builder i Divi. Proszę sprawdzić ustawienia swojego kreatora: prawie wszystkie popularne wizualne buildery do WordPressa mają już Font Awesome wbudowany w rdzeń.

Jak zmienić styl ikon

Po podłączeniu Font Awesome zarządza się ikonami wyłącznie przez klasy i CSS. Bezpośrednia edycja plików SVG nie jest potrzebna.

Rozmiar

Rozmiar ikony określa się gotowymi klasami. Jedna klasa powiększa ikonę o jedną trzecią, inna, dwukrotnie, kolejna, trzykrotnie, i tak aż do dziesięciokrotnego powiększenia. Dokładne wartości wszystkich klas znajdą Państwo na stronie Font Awesome.

Przykład ikony powiększonej trzykrotnie:

Przykład ikony powiększonej trzykrotnie:

1
<i class="fa-solid fa-download fa-3x"></i>

Obrót i odbicie lustrzane

• fa-rotate-90, obrót o 90°
• fa-rotate-180, o 180°
• fa-rotate-270, o 270°
• fa-flip-horizontal, odbicie lustrzane w poziomie
• fa-flip-vertical, odbicie lustrzane w pionie

Animacja

Dwie opcje, obie przez klasy:

• fa-spin, równomierne obracanie (odpowiednie dla spinnerów ładowania)
• fa-pulse, obracanie w ośmiu krokach (przerywana pulsacja)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Kolor

Kolor ikony jest dziedziczony z tekstu nadrzędnego. Aby ustawić własny, reguła CSS:

1
.fa-download {
2
    color: #27ae60;
3
}

Najprościej dodać taki CSS przez Appearance → Customize → Additional CSS. Zmiany są stosowane natychmiast i widoczne w czasie rzeczywistym.

Ikona przez pseudoelement

Gdy ikona ma wisieć na elemencie bez zbędnego znacznika, należy użyć ::before lub ::after w CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Kod \f08e to identyfikator Unicode ikony. Znajdzie go Pan/Pani na stronie konkretnej ikony w serwisie fontawesome.com, gdzie jest podany pod nazwą.

Skąd brać ikony

Proszę otworzyć fontawesome.com/icons, wpisać słowo kluczowe w wyszukiwarkę i wybrać styl. Na stronie ikony znajduje się snippet HTML, Unicode oraz lista dostępnych stylów. Kopiuje Pan/Pani i wkleja w wybrane miejsce.

Kilka słów o wideoporadniku

Jeśli wygodniej jest Panu/Pani oglądać niż czytać, oto tutorial pokazujący, jak dodać ikony Font Awesome do menu WordPress:

Po obejrzeniu proszę wrócić do tekstu, poniżej omówiono niuanse, których nie ma w filmie.

⁉️🤔 Często zadawane pytania

Czy za Font Awesome trzeba płacić?

Darmowa wersja pokrywa potrzeby zdecydowanej większości stron: ponad 2000 ikon w pięciu stylach, w tym ikony marek (Facebook, Twitter, Instagram i setki innych). Wersja Pro kosztuje od 60 USD rocznie i dodaje rodziny Thin, Light, Sharp, Duotone we wszystkich stylach oraz możliwość wgrywania własnych plików SVG. Płacenie ma sens, jeśli sprzedaje Pan/Pani ikony jako część produktu lub bezwzględnie potrzebuje duotonów. Wtyczka Font Awesome na WordPress.org jest całkowicie darmowa, ikony Pro podłącza się przez API Token w ustawieniach tej samej wtyczki, nie trzeba niczego kupować ani instalować osobno.

Który sposób integracji wybrać?

Dla początkujących i typowych stron: oficjalna wtyczka. Instaluje się ją dwoma kliknięciami, ma wbudowaną wyszukiwarkę ikon w edytorze i skaner konfliktów. Ręczna instalacja przez CDN jest uzasadniona, jeśli minimalizuje Pan/Pani liczbę wtyczek na stronie i dokładnie wie, do którego pliku dodać wp_enqueue_style. Kit od Font Awesome to kompromis: prostota podłączenia bez wtyczki, ale z darmowym limitem 10 000 wyświetleń.

Co zrobić, jeśli ikony się nie wyświetlają?

W pierwszej kolejności proszę uruchomić Conflict Detection Scanner w ustawieniach wtyczki Font Awesome. Najczęściej problem polega na tym, że motyw lub inna wtyczka ładują własną wersję Font Awesome i dochodzi do konfliktu wersji. Skaner znajdzie źródło konfliktu, a wtyczka zaproponuje jego zablokowanie. Drugi częsty przypadek to błąd składni: proszę sprawdzić, czy używa Pan/Pani prefiksu fa-solid, a nie fa (to składnia starej, czwartej wersji).

Czy można używać Font Awesome bez WordPressa?

Tak, Font Awesome nie jest związany z WordPressem. Proszę dodać link CDN w sekcji <head> dowolnego dokumentu HTML i wstawiać ikony za pomocą znacznika <i class="fa-solid fa-имя"></i>. Działa z React, Vue, Laravel, czystym HTML, a nawet w generatorach PDF. Na stronie fontawesome.com/docs znajdują się instrukcje dla kilkunastu platform.

Czym Font Awesome jest lepszy od innych bibliotek ikon?

Dwa główne argumenty: wielkość społeczności i kompatybilność. Font Awesome jest używany przez miliony stron, dlatego dokumentacja jest przetłumaczona na kilkanaście języków, a odpowiedzi na wszelkie problemy wyszukuje się w Google w kilka sekund. Po drugie, oficjalna wtyczka do WordPressa z automatycznym rozwiązywaniem konfliktów: ani Material Icons, ani Bootstrap Icons czegoś takiego nie oferują.

Czy warto się w to angażować: co wybrać do swoich potrzeb

Jeśli doczytał Pan/Pani do tego miejsca, poniższa tabela zaoszczędzi czas:

Proszę sprawdzić, czy po integracji ikony wyświetlają się poprawnie w różnych przeglądarkach i na urządzeniach mobilnych. Jeśli zauważy Pan/Pani migotanie lub podmianę ikon, proszę uruchomić skaner konfliktów z sekcji „Troubleshoot" w ustawieniach wtyczki. Problem prawie zawsze rozwiązuje się jednym kliknięciem.