Font Awesome – Jak dodać Ikony graficzne do swojego motywu.

Font Awesome to czcionka obrazkowa, która pozwala na wykorzystanie na Twojej stronie skalowalnych ikon, bardzo często wykorzystuję ją w swoich projektach, co ważne ikony są wektorowe, więc wyglądają bardzo dobrze zarówno w dużym jak i w małym rozmiarze.

Czcionka ta została również wykorzystana na moim blogu – w footerze, przy komentarzach oraz na stronie głównej (ikony facebooka i twittera).

Dodajemy Font Awesome do naszego szablonu

Są dwa sposoby na dodanie Font Awesome do swojego szablonu WordPress. Pierwszy sposób to pobranie całego archiwum ze strony projektu a następnie skopiowanie katalogu font-awesome do swojego szablonu. Następnie w pliku, w którym są ładowane nasze style css dodajemy następującą linie kodu:

wp_enqueue_style( 'style-name', get_stylesheet_uri() . '/css/font-awesome.css', array(), 4.03 );

Drugim rozwiązaniem jest wykorzystaniu zewnętrznego serwera, co zdecydowanie odciąży naszą stronę i trochę przyspieszy jej ładowanie (w stosunku do wykorzystania pierwszej metody). Aby skorzystać z tego rozwiązania, dodajemy taki kod:

wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css', null, '4.0.1' );

Wszystkie dostępne ikony można zobaczyć na oficjalnej stronie projektu. Ikony dodajemy w bardzo prosty sposób, na przykład taki kod:

<i class="fa fa-apple"></i>

użyty w widżecie tekstowym, w treści posta/strony (w tym przypadku pamiętajmy o użyciu edytora tekstowego), lub bezpośrednio w plikach html/php da nam następujący efekt:

Oczywiście ikonami możemy manipulować, używając CSSa, tak więc możemy dowolnie zmieniać kolor, rozmiar, efekty hover, cienie itd. Więcej przykładów można znaleźć na tej stronie.

Font Awesome bazuje na licencji Open Source (GPL) a zatem można go wykorzystywać do dowolnych celów, również komercyjnych. 

Tagi artykułu:

×

Interesujesz się WordPressem?

Polub nas na Facebooku, będziesz na bieżąco!

facebook