Ikony na stronach www – jak wstawić Remix Icon krok po kroku
Ikony są nieodłącznym elementem nowoczesnych stron internetowych. Poprawiają czytelność, UX i estetykę interfejsu, a przy tym potrafią zastąpić długie opisy jednym prostym symbolem. Jednym z najlepszych darmowych źródeł ikon jest Remix Icon.
W tym artykule pokażę:
- czym jest Remix Icon,
- dlaczego warto go używać,
- oraz jak wstawić ikony na stronę www – krok po kroku (HTML, CSS, WordPress).
Czym jest Remix Icon?
Remix Icon to darmowa, open-source’owa biblioteka ikon stworzona z myślą o nowoczesnych stronach i aplikacjach webowych. Zawiera ponad 2 500 ikon w spójnym, minimalistycznym stylu.
Najważniejsze zalety Remix Icon
- darmowe do użytku komercyjnego
- spójny styl (outline + fill)
- bardzo lekka biblioteka
- SVG + font icon
- idealne do stron WWW, UI i dashboardów
Jak pobrać i używać Remix Icon na stronie?
Masz trzy główne sposoby wstawiania ikon z Remix Icon. Najszybszy to CDN.
Metoda 1: Remix Icon przez CDN (najprostsza)
1. Dodaj bibliotekę do <head>
Wklej ten kod w sekcji <head> swojej strony HTML:
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
2. Wstaw ikonę w HTML
Każda ikona to zwykły element <i> z odpowiednią klasą:
<i class="ri-home-line"></i>
Przykłady:
<i class="ri-mail-fill"></i>
<i class="ri-instagram-line"></i>
<i class="ri-shopping-cart-2-line"></i>
Nazwy ikon znajdziesz bezpośrednio na stronie remixicon.com – kliknij ikonę i skopiuj klasę.
Metoda 2: Stylowanie ikon w CSS
Ikony Remix Icon zachowują się jak tekst, więc łatwo je stylować:
.icon {
font-size: 24px;
color: #333;
}
<i class="ri-heart-fill icon"></i>
Możesz też:
- zmieniać kolor przy
:hover - animować (
transform,transition) - skalować (
font-size)
Metoda 3: Remix Icon jako SVG (większa kontrola)
Jeśli zależy Ci na:
- idealnej ostrości,
- animacjach SVG,
- pełnej kontroli nad kolorem i kształtem,
możesz pobrać ikonę jako SVG i wstawić ją bezpośrednio do HTML.
To rozwiązanie polecane jest głównie do landing page’y i projektów premium.
Ikony Remix Icon w WordPressie
Jeśli tworzysz stronę na WordPressie:
Opcja 1: Własny motyw
Dodaj CDN w pliku header.php lub przez functions.php.
Opcja 2: Page builder (Elementor, Gutenberg)
- wklej ikonę jako HTML (
<i class="ri-..."></i>) - albo użyj widgetu HTML
OPCJA 1: Dodanie CDN w pliku header.php (najprostsza)
Co to jest header.php?
To plik motywu WordPressa, który odpowiada za sekcję <head> strony (czyli m.in. CSS, meta tagi, fonty).
Jak to zrobić?
- Wejdź w Wygląd → Edytor plików motywu
- Otwórz plik
header.php - Znajdź linię:
</head> - Tuż nad nią wklej CDN Remix Icon:
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
Od tego momentu możesz używać ikon:
<i class="ri-home-line"></i>
Uwaga: ta metoda jest OK, ale niezalecana w profesjonalnych projektach, bo przy aktualizacji motywu kod może zniknąć.
OPCJA 2: Dodanie CDN przez functions.php (lepsza praktyka).
Co to jest functions.php?
To plik, w którym WordPress:
- dodaje style,
- skrypty,
- funkcje motywu.
Dlaczego to lepsze?
✔ bezpieczne
✔ zgodne ze standardami WordPress
✔ nie zniknie przy aktualizacji (jeśli używasz motywu potomnego)
Jak dodać Remix Icon przez functions.php?
- Otwórz plik
functions.php(najlepiej w motywie potomnym) - Wklej kod:
function add_remixicon_cdn() {
wp_enqueue_style(
'remixicon',
'https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css',
array(),
'4.2.0'
);
}
add_action('wp_enqueue_scripts', 'add_remixicon_cdn');
- Zapisz plik.
Od teraz ikony działają na całej stronie.
SEO i wydajność – dlaczego to ma znaczenie?
Używanie ikon z CDN:
- przyspiesza ładowanie strony
- zmniejsza liczbę zapytań HTTP
- poprawia Core Web Vitals
Dodatkowo ikony:
- poprawiają UX, co pośrednio wpływa na SEO,
- zwiększają czytelność treści i czas spędzony na stronie.
Podsumowanie
Jeśli tworzysz nowoczesne strony WWW, Remix Icon to jedno z najlepszych narzędzi do ikon:
- szybkie wdrożenie,
- darmowe użycie,
- świetny wygląd na desktopie i mobile.
To idealne rozwiązanie zarówno dla stron firmowych, landing page’y, jak i blogów opartych o SEO.