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.01.29. 15:42
2019.05.08. 17:46
2019.05.05. 17:35
2019.03.16. 22:54
2019.03.09. 14:59
Friss hozzászólások
 
Információk
Szerkesztők: A
Design: A/D
Források: xxx
Nyitás: 2018.10.14.

Partnerünk:

 

 

 

 

 

 

 

 

 


Angolturi Lerakat - Angol használtruha kereskedés. Gyerek és felnõtt ruhák már 350.-Ft/kg-tól Gyors kiszállítás    *****    Egy horoszkóp a lélek tükre, egyszer mindenkinek bele kell néznie, én segítek értelmezni amit látsz, de a döntés a tiéd!    *****    Születési horoszkóp, elõrejelzés, gyermektervezés,párkapcsolati elemzés,biotérkép készítés diplomás asztrológustól.Itt!    *****    Részletes személyiség és sors analízis diplomás asztrológustól,szóban és írásban, nagyon kedvezõ áron.Ne hagyd ki! Katt!    *****    Szélessávú Honlap Debreceni ingatlanok, még több elérhetõ telefonos egyeztetés után www.simonyiingatlan.gportal.hu    *****    Támogasd adománygyûjtéseinket! Ajánld fel szervezetünknek az adód 1%-kot! Hogyan segíthetsz? Nézd meg a portálon.    *****    Érdekel az egészséges életmód, mozgás és táplálkozás? A Kit Fit oldal megnyitotta kapuit. Életmód, egészség, fitnesz....    *****    Szia! Ismered az mta nevezetû játékot? Biztos unod a folyamatos external módos gazdagrp szervereket. Nálunk a helyed!    *****    Blogom, Új olvasóit keresi. Ha Szereted a a mangákat, filmajánlót, verseket és még sorolohatnám. Akkor itt a helyed.    *****    Költöztetés bútorszállítás    *****    Mysteries of the Night ~ Az éjszaka misztériumai csak arra várnak, hogy felfedezd õket. ~ mysteriesofthenight.hu    *****    Nedves levegõ? Fõzéskor nehéz a levegõ? -- 5 kérdés a páraelszívókról -- FAVI páraelszívók    *****    Párásodik a lakás? Mentesíts okosan - FAVI páraelszívók - 5 kérdés a páraelszívókról    *****    Konyhai páraelszívók kicsit másképp, mint mások - FAVI    *****    Részletes 20-25 oldalas személyiség és sors analízis diplomás asztrológustól,ha érdekel, kattints és nézz körül nálam!!!    *****    A Hundredmoors célja az, hogy hiánycikknek számító LGBTQ+ témákkal színesítse a magyar blogszférát.    *****    A csillagjövõ asztrológia portálon,nagyon sok,asztrológiai, ezoterikus anyag valamint szoftverek találhatóak,mind Neked!    *****    A horoszkóp fontos információk összessége,rendeld meg most és 3 év elõrejelzés és egy Hold horoszkóp lesz az ajándékod!    *****    A horoszkóp a lélek tükre,fontos,hogy belenézz,ha most rendeled meg,ajándékod + 3 év elõrejelzés és egy Hold horoszkóp!    *****    Pára? Mentesíts okosan - FAVI páraelszívók - 5 kérdés a páraelszívókról - KADD IDE!