Mivel mi is nagyon sok helyen hivatkozunk ezekre az ikonokra, ideje egy átfogóbb képet nyújtani az ikonok használatáról.  Éppen attól függően hogy mit szeretnénk vele csinálni. Már sokan kitaposták előttünk az utat hogy egyszerűen hozzáférhessünk minden esetben.

Mi az Font Awesome?

Vektorgrafikus (vagyis jól tűrik a kicsinyítést és nagyítást, kicsiben sokáig láthatóak, nagyban pedig nem romlik a minőségük), ikonok tömkelege, amiket főleg webdesign felhasználásra terveztek. Több száz ingyenes ikon közül válogathatunk, több különböző témakörben, és formában.  A rendszer jó pár éve a virágkorát éli, így folyamatosan friss ikonokkal gazdagítanak minket a készítők!

Az ikonokról itt olvashatsz bővebben, és itt tekintheted meg a galériát.

Mi alapesetben kétféleképpen használjuk ezeket az ikonokat, mindkét módszernek más-más feladata van, és nem feltétlenül tudjuk áthidalni a kettő közt lévő akadályokat.

Direkt használat

Ennél a felhasználási módnál, csak lehívjuk az ikonkészletet, és direkten, mint HTML elemek, egy-egy osztállyal ellátva, hívjuk be az ikonokat.  A használatuk borzasztóan egyszerű, viszont hatalmas gondban vagyunk akkor ha olyan helyre akarjuk beszúrni, aminek nem tudunk beleírni a HTML kódjába (ugye ez Gportálon, és a legtöbb alapból admin felülettel ellátott szolgáltatónál elég esélyes).

Ilyekor ezt a kódot szúrjátok be a jobb oldalra vagy a láblécbe Gportálon:

Több különböző azonosítót találunk, itt rá van szükségünk, definiálták is nekünk a kis ikont mint egy pici <i></i> tag-et. Ezt ahogy van be is szúrhatjuk!

Használat betűtípusként

Előttünk már kitaposták az utat ennek a tekintetében. Lényegében létre lett hozva az ikonkészlet, mint betűtípus (persze kicsit másabb értelemben, de talán így lehetne definiálni), és nekünk csak meg kell hívni, majd alkalmazni.

Bármilyen elem, esetleg  bármilyen elem ::before vagy :after részének van egy olyan tulajdonsága CSS-ben hogy content. Akkor érdemes ezeket használni, ha egy olyan HTML elemről beszélgetünk amibe nem tudunk beleírni nem tudjuk közvetlenül az elemet változtatni  (Pl Gportál, címkék, dátum szerző, akár egy bejegyzés cím)  Ebben a content tulajdonságban megadhatunk tetszőleges képet vagy szöveget. Ugye ekkor a fent említett direkt módszert nem tudjuk alkalmazni, ugyanis ott HTML tag-et szúrunk be.

Az alábbi kódot szúrd be az oldaladon, egy jobb oldali üres modulba, vagy a láblécbe.

Most írjuk fel, próbaképpen egy blogmodulban lévő címkére! Szúrjunk be elé egy ikont.

A contentnek az alábbi azonosítóját szúrjuk be a választott ikonnak, nagyon fontos a \-jel, e-nélkül nem fog megjelenni a kis ikonunk!

Fontos megjegyezni hogy a Script ami előhívja nekünk a kis ikonokat, ebben a verzióban csak a  Font Awesome v4.6.3-at támogatja, minden ikonnál megnézheted hogy melyik verzió része, sajnos újabb verziókat nem fogunk tudni megjeleníteni ezzel a módszerrel!

Kódokért köszönet:

# # #

Súgó 2 hozzászólás

Új hozzászólás Frissítés

1

2018.11.30. 12:16 A Nagyon szépen köszönöm a felvilágosítást, mindig jó tanulni valamit! És valóban (már én is megtaláltam) frissíteni fogjuk a cikket egyrész ez alapján másrészt pedig megtaláltam a 5.0.0-át. ^^

2018.11.24. 18:38 nikkii Az az oka, ha nem megy, hogy te a 4.7.0 verziót linkelted be, ami még a régi, viszont az új (5-ös verzió) oldalát nézed/használod az ikonok kereséhez. A fas/fab/far az új verzióban jött be, az előzőben csak a fa osztály volt ezek helyett. :)