Egyéb Tutorialok
Egyéb Tutorialok : Font Awesome

Font Awesome

  2018.11.15. 18:17


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:

<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" rel="stylesheet" />

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!

 

A Gportálos szerkesztő másodjára "már nem eszi meg" a kis ikonokat, így ha csinálsz valamit ilyen fontawesome direkt beszúrással, érdemes kimásolni, mert ha valamit szerkesztesz a modulban, ezek az amúgy üres <i></i> tag-ek eltűnnek.

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.

<link title="Font Awesome" rel="stylesheet" href="/portal/framework/upload/766182_1466169388_09997.css">

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

.blogtags a::before{
       content: " \c520";
       font-family: Font Awesome;
       color: black; }

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:

# # #

 

2 hozzászólás
Utolsó hozzászólásokÚjabbak 1 KorábbiakLegelső hozzászólások
Idézet
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. ^^

 

Idézet
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. :)

 
Welcome

Bár a cím az bizonyos mértékben árulkodó lehet, de azért leírom: Az oldal első sorban a bloggereket segíti, és főleg a Gportálos bloggereknek nyújt technikai segítségeket. Persze reméljük, hogy más szolgáltatókon tevékenykedő bloggerek is találnak maguknak elég csemegézni valót. Amikről szó lesz a továbbiakban, az ajánlók, interjúk, leírások, inspirációs bejegyzések, olykor sablonok és kritikák is

Jó böngészést kívánunk!

Vedd fel velünk a kapcsolatot!

VKHKS/H

 
Útmutatók

Egy útmutató kezdő bloggereknek, akik főleg a Gportál keretein belül szeretnének blogolni. Különböző témákat, egy-egy kérdés keretein belül tisztázunk, itt főleg a Gportál működéséről, és a legfőbb dolgokról lesz szó, egy új blog beindítása terén. 

Itt olvashatod el!

 
Chat

Ha szeretnél valamilyen formában nyomot hagyni az oldalon, akkor nagyon jó helyen jársz! Segítségért is nyugodtan gyertek hozzánk! Egyedül cserekérést nem áll módunkban elfogadni, ugyanis nincs lehetőség cserére az oldallal.

 
BlogPlusz
Friss bejegyzések
2020.08.31. 13:52
2020.01.29. 15:42
2019.05.08. 17:46
2019.05.05. 17:35
2019.03.16. 22:54
Friss hozzászólások
 
Információk
Szerkesztők: A
Design: A/D
Források: xxx
Nyitás: 2018.10.14.

Partnerünk:

 

 

 

 

 

 

 

 

 


A horoszkóp a lélek tükre,fontos információk. Májusban,minden megrendelés 1000 Ft. kedvezménnyel vehetõ igénybe. Várlak!    *****    A csillagjövõ oldalon,sok asztrológiai, ezoterikus olvasmány,valamint meditációk és megrendelési lehetõségek találhatók!    *****    Kérdezõ horoszkóp, kötetlen beszélgetés mobilon, vagy messengeren, skypeon 5000 Ft. Szeretettel várlak! Kattints hívj!!!    *****    SKAM - SKAM France - wtFock - Druck - SKAM Italia és a többi! Folyamatosan bõvülõ magyar tartalmak! - SKAM SKAM SKAM    *****    Sorozatok Áprilisban-Read&Speak Blog-Sorozatok Áprilisban-Sorozatok Áprilisban-Read&Speak Blog-Sorozatok Áprilisban    *****    Sorozatok Áprilisban-Read&Speak Blog-Sorozatok Áprilisban-Sorozatok Áprilisban-Read&Speak Blog-Sorozatok Áprilisban    *****    SKAM - SKAM France - wtFock - Druck - SKAM Italia és a többi! Folyamatosan bõvülõ magyar tartalmak! - SKAM SKAM SKAM    *****    Gondolatok, vélemények, élménybeszámolók, tagek és egyebek (kpop, ajánlók, horror, blogtippek)    *****    Naruto rajongói oldal és Fanfiction Konoha.hu, Naruto rajongói oldal és Fanfiction Konoha.hu Naruto rajongói oldal    *****    A dohányboltos lány új novella. Sniffany felnõtt meséi, képei és versei a blogon :)    *****    Informatika és Informatikus könyvtáros tételek    *****    AemyDesign.hu teljes kódolt designek gportalra és wordpressre, kódok, tutorialok. képek - AemyDesign.hu - AemyDesign.hu    *****    SKAM - SKAM France - wtFock - Druck - SKAM Italia és a többi! Folyamatosan bõvülõ magyar feliratos tartalmak! - SKAM    *****    Kedves látogatóim! Március hónapban, minden születési horoszkóp megrendeléshez egy Biotérkép elemzést adok ajándékba!!!!    *****    Naruto rajongói oldal és Fanfiction Konoha.hu, Naruto rajongói oldal és Fanfiction Konoha.hu Naruto rajongói oldal    *****    Luxus házikedvenc prt lányokról szóló kis történet, egyéb cikkek.:)    *****    SKAM - Ismerd meg és nézd meg a híres norvég sorozatot és a remakeket! - SKAM - Egyre több MAGYAR feliratos tartalommal!    *****    Adóbevallás (Szja) - SMS-BEN KÉRHETI A BEVALLÁST!!! Kinek készít a Nemzeti Adó- és Vámhivatal (NAV)    *****    A horoszkópod olyan tendenciákra mutat, melyek ismerete, sokat segít az elõre jutásban, a fejlõdésben. Rendeld meg most!    *****    Nagyon részletes születési horoszkóp 20-25 oldal + 3 éves elõrejelzés 20-25 oldal,e-mailben, utána ingyenes konzultáció.