Tegnap nagy változás történt itt nálunk, ugyanis megtörtént egy alapos design csere. A tegnapi bejegyzésben többek között azt is megemlítettük, hogy kisképek helyett SVG-t használtunk. Ebben a bejegyzésben leírom, hogy hogyan tudtok Ti is egyszerűen Icon Font-ot használni!

Először ismerkedjünk meg az SVG-vel! Az SVG lényege röviden az, hogy alakzatokból (kör, négyzet, stb.) áll össze a teljes kép és nagyításnál nem romlik a kép minősége, ami weboldalak készítésénél nagyon hasznos dolog lehet!

Az icomoon segítségével fogjuk mi most beszerezni ezeket az ikonokat! Első lépés: kattintsunk az IcoMoon App feliratú gombra, amit a fejléc jobb sarkában találunk:

Néhány másodperc múlva többszáz ikon kerül a szemünk elé, melyek közül kattintással kiválaszthatjuk a nekünk tetszőket!

Miután minden szükséges ikon megvan, kattintsunk a Font feliratú gombra. A fent megjelenő link segítségével máris használhatjuk ikonjainkat, viszont én most a hosszabb módszert mutatom be nektek, ugyanis jobban szeretem saját tárhelyen tárolni a weblaphoz tartozó kiegészítőket.

A Download gombra kattintva egy tömörített mappában megkapjuk az összes szükséges fájlt a használathoz, sőt még egy kis felesleget is, amit rögtön kitörölhetünk (Read Me fájl, demo.html, demo files, selection.json)! :) Ezután létrehozunk például egy iconfont nevű mappát tárhelyünkön és ebbe feltöltjük a style.css fájlt, valamint a fonts mappát.

Honlapunk Head részébe megadjuk a CSS fájl elérési útját:

<link rel="stylesheet" type="text/css" href="/iconfont/style.css"> 

Eljött az idő, kezdjük el használni ikonjainkat a megadott példa szerint:

 <span class="icon-[ikon neve]"></span>

Az [ikon neve] szöveg helyére pedig az IcoMoon Appban megtalálható jelzéseket írjuk:

Például ha a fenti képen látható hangjegy ikont szeretnéd használni, akkor a következőt kell beírni HTML-be:

  <span class="icon-music"></span>

Remélem felkeltettem az érdeklődéseteket ehhez a hasznos dologhoz, jó munkát kívánok! :)