Trochę o Font Awesome

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.

Zasada działania i jak dodać Font Awesome do naszego bloga?

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. Kopiujemy kod, który jest przedstawiony na obrazku


3. Wybieramy szablon - edytuj kod HTML. Wyszukujemy <head> i NAD <head> wklejamy kod. Musimy pamiętać aby na końcu naszego kodu, a dokładnie za ostatnim " a przed  dopisać /


Oto przykłady co można z Font Awesome zrobić i jak to zrobić w tekście:

Ogień prosto z Font Awesome

Diamenty też się znajdą



Jak dodać Font Awesome w gadżecie HTML/JavaScript

Pokażę Wam, jak można dodać Font Awesome jako gadżet czyli zrobić z nich np. ikonki społecznościowe. Można to zrobić na dwa sposoby:

Sposób pierwszy:

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript
2. Wklejamy taki kod:

<div class="facebook" style="font-style: normal;"><a class="Facebook" href="LINK DO STRONY"><br /><i class="fa fa-facebook"></i></a>
<div class="instagram"><a class="Instagram" href="LINK DO STRONY"><br /><i class="fa fa-instagram"></i></a>
<div class="pinterest"><a class="Pinterest" href="LINK DO STRONY"><br /><i class="fa fa-pinterest-p"></i></a>
<div class="pytaj"><a class="pytaj" href="LINK DO STRONY"><br /><i class="fa fa-question"></i></a><br /></div></div></div></div></div>

To co pogrubione, jest selektorami. Dzięki temu, możemy ustawiać każdą ikonkę indywidualnie i jej kod może wyglądać np. tak:

przechodzimy do szablon - dostosuj - dodaj arkusz CSS 

.instagram {margin: -37px 10px 10px 40px;
font-size: 30px;}

Sposób drugi: 

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript 
2. Wklejamy taki kod:

<div class='ikonki'>
<a href='LINK'>
<i class='fa fa-facebook'/>
</i></a>
<a href='LINK'>
<i class='fa fa-instagram'/>
</i></a>
<a href='LINK'>
<i class='fa fa-camera'/>
</i></a>
<a href='LINK'>
<i class='fa fa-pinterest-p'/>
</i></a>
<a href='LINK'>
<i class='fa fa-question'/>
</i></a>
</div>

To co pogrubione jest selektorem. W tym wypadku mamy jeden selektor do wszystkich ikonek, co jest szybsze i bardziej dokładne w ustawieniu ich. CSS do tego będzie wyglądać tak:

.ikonki {
float: right;
margin-right: 50px;
font-size: 20px;
letter-spacing: 10px;
}

Starałam się Wam wytłumaczyć jak najprościej o co chodzi z Font Awesome. Niedługo pojawią się instrukcję z wykorzystaniem tego fontu :)

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Ń
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona