Számos oka van annak, hogy a webhely ikonjait egyetlen betűtípussá konvertálni nagyon jó ötlet.

Az egyik az, hogy így kapunk drasztikusan csökkenti a súlyt, és ezért akár 14% -kal is meggyorsíthatja a web betöltési idejét.

Egy másik ok az a sokoldalúság, amelyet a web fejlesztésekor feltételez, mivel az ikon hozzáadása egyszerű HTML-sor bevezetésére szorítkozik, és emellett kínál minden előnye annak, ha ezt az ikont betűtípusként kezeljük a CSS-ben, és bármikor megváltoztathatjuk a méretet vagy a színt, anélkül, hogy FTP-vel kellene képeket feltölteni újra és újra.

És az utolsó, és talán a legfontosabb ok, hogy miért egyszerűség a mászásnál az ikonok, a mobil képernyőről a 40 hüvelykesre a felbontás elvesztése nélkül, mivel, röviden vektorokról beszélünk és nem raszterképek, mint egy normál png esetén.

Hogyan kezdjük?

  • Az első dolog, amit meg kell tennie, az ikonok létrehozása az Illustrator, a Sketch, a Photoshop vagy bármely más alkalmazásban vektorszerkesztő program.
  • Győződjön meg arról, hogy minden vonás kibővült (az Illustratorban -> Objektum> Kibontás), és hogy nincsenek maszkok vagy effektek. Egyszerű és tiszta nyomon követhető objektumnak kell lennie.
  • Exportálja az ikont .SVG néven, egy vektoros formátum.

Az Iconvau lehetővé teszi számunkra a sablon letöltését, hogy még könnyebben létrehozhassuk az ikonjainkat.

Hogyan lehet őket forrást szerezni?

Sok ingyenes weboldal létezik amelyek lehetővé teszik .SVG ikonjainak egyetlen forrás formátumú fájlba történő összeállítását. Hármat ajánlunk:

Iconvau

Fontello

fonts 40df

Icomoon

Alapvetően mindhárman ugyanazt teszik, lehetővé teszik, hogy feltöltse saját ikonjait, vagy válasszon a saját ingyenes ikonjai katalógusából, és töltse le a fájlt a forrásokkal együtt és az összes szükséges anyagot a webhelyükre történő telepítéshez.

Használhatja a Glyph nevű Photoshop bővítményt is, amely lehetővé teszi, hogy ugyanezt tegye, mint ezek a webhelyek:

A betűtípus használata?

Olyan egyszerű, mint a betűtípus FTP-vel történő feltöltése a webhely mappájába (ezt kitaláljuk a/fonts-ra), és a következő kódot hozzáadva a CSS-fájlhoz, hasonlóan bármely más betűtípushoz:

@ font-face font-family: '40df';
src: url ('fonts/40df.eot');
src: url ('fonts/40df.eot? #iefix') formátum ('embedded-opentype'),
url ('fonts/40df.woff') formátum ('woff'),
url ('fonts/40df.ttf') formátum ('truetype'),
url ('fonts/40df.svg # icomoon') formátum ('svg');
betű súlya: normál;
betűtípus: normális;
>

(Megjegyzés: meg kell változtatnia a fájlok elérési útját és nevét a sajátjához)

Miért vannak különböző formátumok? Egyszerűen a böngészők inkompatibilitása miatt. Ha azt is észleli, hogy ugyanazt az .EOT fájlt kétszer hívják meg, akkor ez az Internet Explorer régebbi verzióival kapcsolatos problémának tudható be. Végül egy .SVG fájl is szerepel az iOS támogatására. De ne aggódjon, a felhasználó böngészője csak az első kompatibilis formátumot tölti le, így a többi beillesztése nem jelent túlsúlyt.

A következő dolog az osztályok felvétele hogy az ikonokat egyenként lehívhassa. A CSS fájlban valami hasonlót fogunk tartalmazni:

.icon-twitter: a tartalom előtt: "\ e000";
>
.icon-facebook: a tartalom előtt: "\ e001";
>
.icon-dribbble: tartalom előtt: "\ e002";
>

Ne aggódjon, minden olyan fordítóval létrehozott fájl, amelyet korábban láttunk, cs-kkel lesz ellátva, amelyekben ezek a kódok szerepelnek, tehát csak át kell másolnia őket a webhely CSS-be.

Az ikonok HTML-ben történő felhívása ugyanolyan egyszerű, mint az oldalra történő felvétel:

(Ne felejtsen el szóközt beírni a címke bezárása után)

Használhatja a "span", vagy az "i" vagy "em" címkét, mivel azok beillesztett tagok és nem jelentenek sortörést.

Végül, ha egy adott ikont szeretne módosítani, használja a CSS-t, mint bármelyik normál betűtípussal:

egy .icon-twitter szín: # 41b7d8;
>
a: lebeg .ikon-twitter szín: # 005580;
méret: 40px;
>

Ezek a Vállalati színek a fő közösségi hálózatokról, ha azokat a megfelelő ikonjaikban szeretné használni (via: rubberkethings):

  • Twitter: # 41b7d8
  • Facebook: # 3b5997
  • Google: # d64937
  • LinkedIn: # 0073b2
  • Vimeo: # 388fc5
  • Flickr: # ff0084
  • Pinterest: # cb2027
  • Skype: # 00aff0
  • RSS: # e0812a

És már meg is van! Most sokkal könnyebben módosíthatja az ikonokat, mint korábban, és megváltoztathatja azok méretét anélkül, hogy elveszítené a felbontást. Mindez előnyök.

@sickmonkeys

Pixel oktató, vagy mi ugyanaz, digitális tervező. Művészettörténész és vizuális kultúra. Seriephile.