Close Popup
Eng

Fontello

2018.04.27
Fontello

Több szolgáltatás is létezik (például a fontello.com), amely megengedi, hogy feltöltsük az általunk használni kívánt vektoros (SVG) ikoncsomagunkat, amiből aztán generálnak nekünk egy betűkészletet.

Manapság ha egy olyan új weboldal fejlesztésébe kezdünk, ami sok ikont használ, akkor érdemes megfontolni az "ikon betűkészlet" (icon fonts) használatát.

Mi is az a Font Awesome?

Aki jártas a webes fejlesztésben, annak valószínűleg ismerősen cseng a "Font Awesome" betűkészlet, ami számtalan ikont vonultat fel egyetlen font fájlban. Ezek gyakorlatilag ugyanolyan betűtípusok, mint bármelyik másik, azzal a különbséggel, hogy betűk helyett ikonokat jelenítenek meg. Segítségével a weboldalunk szövegét fel tudjuk dobni, olvashatóbbá, színesebbé téve még a legszárazabb tartalmakat is. 

Előfordulhat azonban, hogy nekünk egyedi ikonokra van szükségünk, viszont szeretnénk ezt a technológiát alkalmazni, a rengeteg előnye miatt.

Miért éppen Fontello?

Több szolgáltatás is létezik (például a fontello.com), amely megengedi, hogy feltöltsük az általunk használni kívánt vektoros (SVG) ikoncsomagunkat, amiből aztán generálnak nekünk egy betűkészletet.

Ennek használatával csökkenteni tudjuk a weboldalunk betöltési idejét, mivel a font fájlok sokkal kevesebb helyet foglalnak, mint ha SVG ikonokat alkalmaznánk, arról nem beszélve, hogy a böngészőnknek csak egy kérést kell küldenie a szerver felé.

Ezen felül további plusz, hogy a betűkészlet-gyorsítótár miatt további teljesítmény növekedés is megfigyelhető.

Mivel a böngésző szövegként kezeli ezeket az ikonokat, így CSS-ben egyszerűen alkalmazható rájuk minden formázás ami a szövegekre (betűméret, szín, áttetszőség, árnyék stb.).

Az inline és a képként használt SVG-vel szemben nagyobb a böngésző-támogatottsága.