Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2019-11-270 komment

Mi az az ikon font? És hogyan használd?

Az ikon fontok egy gyakran felmerülő problémát oldanak meg, segítségükkel hatékonyabban és gyorsabban jeleníthetők meg ikonok a weboldaladon.

Ma már rengeteg megoldás található ikon fontok kiválasztására és használatára, nem muszáj neked összehozni egyet teljesen az alapoktól. De mi is pontosan egy ikon font? A Design Shack összeszedett néhány alapvető dolgot róluk.

Az ikon fontok olyan betűtípusok, melyek apró képeket ábrázolnak betűk helyett. Legnagyobb előnyük – ugyanúgy, mint a betűknél – az, hogy méretezhetők, valamint CSS használatával módosíthatók. Itt tehát arról van szó, hogy változtatható a nagyságuk, a színük, a formájuk. Mivel alapértelmezetten átlátszóak, ezért bármilyen színt vagy hátteret kaphatnak.

Mindez CSS segítségével megoldható, vagyis nincs szükség egyedi képekre minden esetben, amikor ikon kerül a designba. Ez pedig csökkenti a weboldal, illetve a kód méretét is. 

Az ikonfontok vektorképek, ebből következik a méretezhetőségük. Mint bármely betű, olyan nagy méretet vehet fel, ami csak elfér a kijelzőn. Ugyanígy bármekkorára összezsugorítható. Használhatók önállóan, mintegy dekorációs elemként, vagy akár a szövegbe ágyazva is.

Miért érdemes ikon fontokat használni?

  • Könnyen méretezhetők, mindaddig, amíg a megfelelő osztályok léteznek a CSS-ben
  • Hatalmas ikonkönyvtárakhoz férhetsz hozzá elég egyszerűen
  • Könnyű megváltoztatni az ikonok tulajdonságait, és teljesen mindegy, miként épült fel a weboldalad
  • Egyszerű hozzáadni egy-egy ikont bármely oldaladhoz
  • WordPress felhasználók plugin segítségével használhatnak ikon fontokat, vagy átmásolhatják a könyvtárat a kódba
  • Létrehozhatod a saját ikon fontodat, ha valami egyedire van szükséged

Mikor nem érdemes ikon fontokat használni?

  • Az ikonokat általában egyetlen színben vagy gradienssel kapod meg, és többet kell fizetni azért, ha többet akarsz
  • Gyakran nincs szükség egy teljes ikonkészletre
  • Néhány képernyőolvasó nem tudja kezelni az ikonfontokat
  • Elképzelhető, hogy nem találsz olyan csomagot, mint amire szükséged lenne

Hogyan használd az ikonfontokat?

A használat attól függően változhat, hogy kitől szerzed be az ikonfont-készletet. Ugyanakkor az alapok mindenhol ugyanazok. Általában három lehetőséged van (hacsak nem tervezed, hogy nagyobb kódolásba vágsz bele):

  • Keresel egy plugint, ami mindent installál, így csak ki kell választanod, hogy milyen ikonokra van szükséged. 
  • A CMS-ed vagy weboldal-építőd beépített ikon fontjait használod. Ez jól működik abban az esetben, ha nem valami egyedi weboldalad van, vagy nincsenek speciális igényeid.
  • Manuálisan linkelsz egy kívül tárolt ikonfontot. (Ez egy bonyolultabb verziója a plugin használatának).

Ikon font vagy SVG?

Az igazi vita ott van, hogy vajon ikon fontot vagy inkább SVG képet kellene használnod abban az esetben, ha valami kis képet szeretnél megjeleníteni a weboldaladon. Mindkét megoldás működhet, elsősorban az egyéni preferenciáid határozhatják meg, hogy melyiket választod.

Egy SVG, azaz a méretezhető vektor formátum mindenesetre kicsit nagyobb mozgásteret ad. Például, nem vagy egy színre korlátozva, de animációt is adhatsz hozzá. A kicsi, méretezhető fájlokat egyből a médakönyvtárba töltheted, és innen könnyen dolgozhatsz velük. Ez tehát egy jó megoldás, ha csak néhány ikonra van szükséged.

Ezzel szemben az ikonfontok gyorsabban töltődnek be hosszú távon, ugyanis gyorsítótárazásra kerülnek. Ugyanakkor a különbség nem túl nagy. Az ikonfontok pozicionálása is okozhat gondot, mivel a betűkre vonatkozó szabályok érvényesek rá a méret, a sortávolság és a függőleges elrendezés kapcsán. Ez az oka annak is, hogy sokan egy szolgáltatótól szerzik be az ikonfontokat, és nem sajátot készítenek.

Amit még érdemes tudni, hogy az SVG-k tartalmaznak alt textet is, ami által hozzáférhetőbbek, mint az ikon fontok, melyek egyszerű betűkként jelennek meg a szövegfelolvasók számára. 

Viszont az ikonfontokat könnyebb megtalálni és használni a legtöbb ember számára. A könyvtárak mindenhol elérhetők, és nem bonyolult megérteni a használatukat. Az SVG ikonokat ezért olyan felhasználók preferálják inkább, akik nagyobb befolyást szeretnének a designjuk felett, illetve komolyabb személyre szabhatóságra törekszenek. 

Azt kell tehát mérlegelned, hogy melyik megoldás a kényelmesebb számodra, illetve melyik illeszkedik jobban a designodhoz és a felhasználói felülethez.

Végül

Az ikonfontok népszerűségének fő oka, hogy rugalmasan és könnyen használhatók. A méretezhető formátum és bármely tartalomkezelő rendszerbe való telepíthetőség miatt szinte bárki könnyen elkezdhet használni ikonfontokat. A legnagyobb előnye viszont az, hogy nem egy független képfájl, ezáltal csökken a weboldalméret, így javul a betöltődési idő. Ráadásul méretezhető, ezért bármekkora méretben megjelenítheted a későbbiekben.

Kategória: Design | Címke:

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.