Font félelmetes és icomoon munka ikonochnym font
Mi ikonochny font?
Ikonochny font - ez ugyanaz a font. Azonban ahelyett, hogy a betűk és számok, bennük a karaktereket és speciális karaktereket. Akkor stílus őket CSS ugyanúgy, mint a közönséges szöveget.
Érvek és ellenérvek
Sok előnye helyett bittérképes betűtípus ikonochnymi. Íme néhány közülük:
- design CSS;
- vektor természete megkönnyíti a skála, hogy bármilyen méretű minőségromlás nélkül;
- Egy HTTP kérés helyett több, ellentétben bitmap;
- Gyorsabb betöltése miatt a kis méret;
- széles böngésző támogatja, beleértve IE6.
Ez azt jelenti, hogy ikonochnye betűtípusok csodaszer? Nem, természetesen nem. Ez egy jó módszer, melynek segítségével a tervezés a projekt, de használja őket, van néhány rossz. Például, ha azt szeretnénk mutatni egy összetett kép, hanem egy egyszerű ikon, akkor ikonochny font - nem a legjobb megoldás.
Tehát, mint egy szabály, hogy csak akkor jelenik meg az egyik szín, ha nem használja a CSS trükköket. Továbbá, néhány ikonok hozhatók létre az egyedi méretek, például 16 × 16, 32 × 32, 48 × 48, stb Ha valamilyen okból megváltoztatja a méretét 25 × 25, az eredmény lehet homályos.
Érdemes megjegyezni, hogy amellett, hogy ikonochnyh betűtípusok, van egy másik népszerű megoldás: SVG. Használatuk megoldani bizonyos problémákat. Például, akkor több mint egy szín.
Következő nézzük két ikonochnyh font könyvtárak:
Ahogy nézzük négy különböző alkalmazási példákat ikonochnyh betűtípusokat.
font Awesome
Font Awesome - egy könyvtár, amely 439 ikonok. Ez teljesen ingyenes, mind a magán és kereskedelmi használatra. Eredetileg azt tervezték Bootstrap, de lehet használni külön-külön.
Munka betűtípus Awesome
A legegyszerűbb módja annak, hogy csatlakozni betűtípus Awesome - keresztül kapcsolódik a CDN. Ha offline dolgozik - akkor le kell tölteni a készüléket.
Csak meg kell csatlakoztatni a generált CSS és betűtípusok különböző formátumokban.
Ahhoz, hogy a ikonok, meg kell elhelyezni őket belül a span elem, vagy i. Ezután meg kell, hogy azokat két osztály: fa plus másodosztályú, amely nevének megfelelő ikonok, mint például a fa-home. Itt megtalálja a nevét minden rendelkezésre álló ikonok.
További információ és sok példát találunk ezen az oldalon.
Most nézzük meg néhány példát.
Betűtípus Awesome. Example # 1
Az első példában létrehozunk egy függőleges menüt. Először helyezze az ikonokat az elem belsejében i és egy dupla növekedést méretük, amely előre meghatározott osztály fa-2x. Aztán rendezni őket a CSS segítségével.
HTML nézne ki:
Betűtípus Awesome. Example # 2
HTML Egyetlen ikon az alábbiak szerint:
CSS stílus ikonok:
Betűtípus Awesome. Példa # 3
HTML és CSS hasonló korábbiak. Eredmény.
ikonok IcoMoon
IcoMoon - egy másik népszerű ikonochny font. Ekkor tudjuk választani a két csomag: egy nyílt forráskódú, a másik prémium. További részletes információ itt található. Attól függően, hogy a csomagot választott, számát és méretét a rendelkezésre álló ikonok más lesz. Például, egy ingyenes csomag 450 ikonok a fizetett 1266-ban.
Csak IcoMoon az online alkalmazás. ahol megtalálható és letölthető több mint 3500 ikonok. alapvető műveleteket lehet végezni ezt az alkalmazást: forgatás, változások színek, és így tovább.
Ezen kívül lehetőség van a importálni az ikonok és hozza létre saját ikonochnye betűtípusokat.
Munka IcoMoon
A csomagot választja, képeket is különböző formátumokban (SVG, PSD, AI). A letöltés után az ikonok, csatlakoztatni kell a CSS és a generált font mappát.
Ahhoz, hogy használni IcoMoon ikonok van, hogy az egyik rész a span elem. Ezután meg kell adnia egy osztályt, hogy meg kell egyeznie a neve a kívánt ikont, például ikon-home. Azt is beállíthatja a nevét az ikonok a lap Beállítások.
IcoMoon. példa
Azt hogy az ikonok az elemek belsejében span. és kivenni a CSS.
HTML két ikonok jelentése a következő:
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!