Jak dodać ikonki SVG do menu nawigacyjnego?
Chcę dodać ikonki SVG przy linkach w menu – np. ikonkę domu przy stronie głównej albo ikonkę koszyka przy sklepie. Jak to zrobić w WordPress bez wtyczki?
1 Odpowiedź
Hej!
Ikonki SVG w menu wyglądają świetnie i są lekkie – skalowalny format który nie pikseluje na żadnym ekranie.
Metoda przez CSS i pseudoelementy
Każdy element menu dostaje automatycznie klasę CSS na podstawie ID strony. Możesz też dodać własną klasę w Wygląd – Menus (włącz Klasy CSS w Ustawieniach ekranu).
.menu-item-home a::before {
content: url('ikonka.svg');
margin-right: 8px;
vertical-align: middle;
}
Metoda przez SVG inline w functions.php
add_filter('nav_menu_item_title', 'dodaj_ikonki_menu', 10, 4);
function dodaj_ikonki_menu($title, $item, $args, $depth) {
if ($title === 'Sklep') {
$title = '... ' . $title;
}
return $title;
}
Najprostszy sposób – font ikonkowy
Załaduj Font Awesome przez functions.php i w etykietach menu wpisz klasy Font Awesome np. Strona główna. WordPress pozwala wpisywać HTML w etykietach menu. 😊
