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"

5 komentarzy:

  1. Super rzeczy można robić tylko trzeba umieć :D Także czekam na instrukcje :) Interesowała by mnie ta ikonka autora.
    Pozdrawiam serdecznie :)

    OdpowiedzUsuń
  2. Świetne! Czekam na następne posty z tym fontem :D

    OdpowiedzUsuń
  3. O matko jakie my w tym zielone jesteśmy xD

    OdpowiedzUsuń
  4. Bardzo lubię z nich korzystać! :)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez My pastel life

Blog zawieszony do odwołania. Kontakt tylko przez formularz kontaktowy. Czas odpowiedzi na wiadomości jest wydłużony.

X