Font Awesome!

Probléma

Egy kép többet mond ezer szónál. De mi van, ha elég egy ikon? Melyik figyelemfelkeltőbb: "Kattints ide, ha lájkolnál!", vagy ?
Rengeteg ingyen elérhető ikon-készlet létezik, ezek között sok csak az alapokat adja ingyen, a kiegészítő karakterek fizetősek. Hobbi bloggereknek ez nem pálya, komoly cégeknek lehet ilyenre szüksége. A legnépszerűbb választások a különféle nagy CSS keretrendszerek részei, amikről egyelőre nem beszélünk, elő fognak még kerülni. A lényeg egyelőre, hogy elérhetőek külön, de más, webdizájnt segítő csomagokkal együtt is. Ez gyakran meghatározza, melyik készletet használjuk, mivel általában az illeszkedik legjobban a stílusba, amit eleve kapunk. Ha nincs keretrendszer, nem gond, kiválasztjuk az egyiket, valahogy elérjük az ikonokat, és már használhatjuk is.
Az én kedvenc választásom a Font Awesome csomag, ami az egyik legnagyobb, teljesen ingyenesen elérhető ikon-készlet. Hatalmas bázissal bír még a Bootstrap Glyphicon, de a nagyja fizetős. Természetesen nem maradhat ki a Google saját készlete sem, hiszen ők adják a szolgáltatást (Google Material néven szokás hivatkozni a Google-specifikus dizájnelemekre).

Megoldás menete

Az ikonok lényegében speciális betűtípusnak feleltethetőek meg, bár egy kicsit bonyolultabban kell rájuk hivatkozni. Képesek beépülni a szövegbe, ellentétben a képekkel, nem dobják meg nagyon a betöltési időt. Mivel vektorgrafikai elemek, könnyen átméretezhetőek anélkül, hogy minőségi változást tapasztalnánk (semmi pixelesedés).
Ahogy a különféle betűcsaládoknál láttuk, itt is előbb betöltjük az egész készletet egy CDN rendszeren keresztül, majd a szöveg adott helyén használjuk. CSS helyett itt HTML-tagekre van szükségünk, ennyi lesz a különbség.

Megoldás

A Google ikonjait használom előbb, ezek megértése valamivel könnyebb. Az egyéni betűtípusoknál használtuk a Google fontokat, és ahogy mondtam, az ikonok nem sokban különböznek ettől. Lényegében ugyanazt kell tennünk, mint ott: vagy a HTML-fájl elejére a head-be beolvassuk a stíluslap-hivatkozást, vagy később egy @import segítségével deklaráljuk, hogy mi épp Google Material ikonokat akarunk használni. A szükséges kód:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet" />

Ha csak egy-egy helyen kell, mondjuk egy bejegyzésben, akkor pedig az @import kulcsszóval:

<style>
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
</style>

Ha emlékeztek a Google fontok letöltésére, látható, hogy a linkek eleje ugyanaz. Fontos, hogy ott css?=, itt pedig icon?= van! Ezzel is megkülönböztetjük a két készletet, a fontokat és az ikonokat.
Miért tudjuk mindezt megtenni? Talán már felmerült az egyéni fontkészleteknél is, hogy egyes betűtípusokat használhatunk így, másokat le kell töltenünk, hosztoljuk, és csak utána építhetjük be a blogba. Az ilyen "mindenki számára elérhető" rendszerekből kevés van, általában a nagyobb, gyakran használt keretrendszerek, nagy ikonkészletek vagy betűtípus-csomagok tartoznak ide. Mivel ezeket rengeteg oldal használja, nem lenne effektív, ha mindig mindenkinek egyenként le kéne töltenie, ezért hozták létre a CDN-rendszereket. A Content Delivery Network, azaz tartalomszolgáltató hálózatok olyan hatalmas szerverek, amik a világon mindenkit kiszolgálnak ezekkel, így elég csak hivatkozni rájuk, a böngésző automatikusan csatlakozik, letölti a szükséges csomagokat, majd ezekkel kiegészíti az adott oldal működését. Nagy előnye, hogy tárolja is ezt, vagyis ha legközelebb ugyanerre a csomagra szüksége van egy másik oldal betöltéséhez, akkor csak előhúzza a helyi fájlokat, nem kell megint társalognia a szerverekkel. Ez jelentősen rövidítheti az oldalbetöltési időt.
Ezzel a módszerrel olvassuk be a többi ikon-készletet is. Ha nagyvonalúak akarunk lenni, és tudjuk, hogy a későbbiekben használni fogjuk a Bootstrap keretrendszert (tudjuk, hogy használni fogjuk, de nem most... bár ha tömegek tüntetnek ellene a Foundationt, vagy a W3.CSS-t követelve, meggyőzhető vagyok), egyszerűen olvassuk be annak a stíluslapjait. Ez támogatja a Glyphicon ikonokat. Ha csak a Font Awesome-ra van szükség, akkor elég csak a Font Awesome önmagában. A szükséges kódok (hasonlóan az előbb látottakhoz, itt is lehet helyben importálni vagy globálisan, az egész blogra érvényesen, ez utóbbiakat mutatom csak):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    rel="stylesheet" /> <-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
    rel="stylesheet" /> <-- FA -->

És máris használhatóak!

Hogy az ikonokra hivatkozhassunk, a nekik megfelelő HTML-taget kell használnunk. Ez egy speciális i tag, de használható a span is helyette. Az i a rövidsége miatt elterjedtebb. Egy osztálytulajdonságot kell beállítanunk rajta, ami minden nagy készletnél más és más. A Glyphicon és a FA kicsit különböznek a Google ikonjaitól, mert míg utóbbinál a tagek között kell megadnunk az ikon nevét, előbbieknél az osztály része. Lássunk egy példát!

See the Pen jVdqKL by Szuzs (@szuzs) on CodePen.

Már csak két kérdés maradt, az első égetőbb: mik a használható ikonok? És mi a kódjuk? Fejből kell tudni mind a háromszor 600-at? Nem, a cikk elején mutatott linkek pont azokra az oldalakra visznek, ahol ezek fel vannak sorolva képpel, kóddal, példával. Keresőjük is van. Használjuk bátran! A kevésbé bátrak kereshetnek a neten posztereket, amit kinyomtatva felakaszthatnak a falra, habár az ikonok listája jóformán naponta változik. Ha valamit nem támogat egy rendszer sem (ilyen a Blogger ikonja, de türelmesek vagyunk), az szomorú, de megoldjuk másképp.
A másik az ikonok változtatása. Mint mondtam, a méretük szabadon változtatható CSS-sel, ugyanígy a színük is. FA készlet esetében a népszerűbb formák közvetlenül a HTML-tagen keresztül alakíthatóak. Erről lásd itt és itt.

Melyiket válasszuk? Attól függ. Én jobban preferálom a FA készletét, plusz ez nagyobb szabadságot nyújt az ikonok terén. Ha Google terméket fejlesztünk, az ő dizájn-elveikhez a saját ikonjaik passzolnak jobban. A cikkek során igyekszem mindkettőt használni, de ez nem jelenti azt, hogy kötelező az adott ikonnal dolgozni, mindenki arra teszi le a voksát, amelyik szimpatikus.

Összefoglalás

Ebben a cikkben megnéztük, hogyan használhatunk ikonokat a szövegben. Találkoztunk a Glyphiconokkal, a Font Awesome és a Google Material ikonkészletekkel, megnéztük, hogyan olvashatóak be egy CDN-szolgáltatáson keresztül, végül be is raktunk párat a szövegbe. A továbbiakban bármikor nyugodtan használhatjuk ezeket. Vagy ha így jobban tetszik: