Font Awesome - jak dodać go do naszej strony lub bloga?

niedziela, 10 kwietnia 2016

Font Awesome może nie jest wszystkim znany, ale prawie na każdym blogu jest on widoczny. Najbliższy przykład zastosowania Font Awesome, znajdziecie na moim blogu - są to ikonki społecznościowe w górnym menu, w kolumnie bocznej oraz ikonki udostępniania, jednak można je zastosować w inny sposób np. dodając ikonkę autora w stopce bloga zamiast napisu "Autor".

Jednak zanim dojdziemy do instrukcji związanych z Font Awesome, wypadałoby powiedzieć kilka słów o tym, co to właściwie jest.

Font Awesome 

Jest to font w formie ikon, a dokładniej font zawierający wektorowe ikony. Jest to font przeznaczony do użytku na stronach internetowych. Jest ona najpopularniejszą biblioteką fontów obrazkowych inaczej icon fonts.

Po mimo tego, że są to ikonki, to można je edytować tak jak każdy inny font na stronie za pomocą CSS czyli np. zmienić ich wielkość, kolor, dodać cień.

Można je używać jako ikon społecznościowych, obrazków uzupełniających nasz wpis, podmienić różne wyrazy (nawet te w stopce bloga) na ikonki, dodawać je do menu.

Jak dodać Font Awesome do naszego bloga/strony?

Pierwsze co musimy zrobić, aby nasz Font Awesome działał, to musimy zainstalować go w szablonie, a robimy to tak:

1. Wchodzimy na stronę Font Awesome

2. Klikamy na "start for free" 

3. Wpisujemy swój adres e-mail

Po wpisaniu adresu e-mail, klikamy "send kit code" 

4. Wchodzimy na naszego maila, na mailu powinna być wiadomość od font awesome, musimy potwierdzić nasz e-mail, klikając "click to confirm your e-mail address + set things up" 

5. Przekieruje nas do utworzenia konta na stronie font awesome 

6. Po utworzeniu konta, przekieruje nas na stronę z naszym indywidualnym kodem, który umożliwi działanie ikon font awesome na naszej stronie 

7. Kopiujemy kod, który jest przedstawiony na obrazku przy punkcie nr 6

8. Wybieramy motyw - po prawej stronie przy mój motyw mamy trzy szare kropeczki, klikamy na nie - edytuj kod HTML. Wyszukujemy </head> i NAD </head> wklejamy kod i wybieramy "zapisz"

Jeśli spodobał Ci się wpis, przekaż go dalej :)