Vodič za bolje i oštrije UI ikone s web-fontovima

Ako ste upoznati s korištenjem formata bitmapnih slika (kao što su PNG i GIF) za prikazivanje ikona na web-lokaciji, tada ćete također biti upoznati s njegovim nedostacima. Prije svega, ovisno o dimenziji i broju informacija o boji koje ikona ima, veličina datoteke ikone može biti vrlo velika.

Ako imamo previše ikona za postavljanje na web-lokaciju, to će također potencijalno usporiti izvedbu web-lokacije jer preglednik mora izvršiti mnoge HTTP zahtjeve. Iako se ovaj problem može riješiti pomoću CSS-a, veličina datoteke je i dalje velika.

Bitmap ikona također ima nedostatke u fleksibilnosti i skalabilnosti; recimo da moramo povećati ili zumirati ikonu na određenu razinu ili je gledati kroz vrlo visoku razlučivost zaslona, primjerice na zaslonu mrežnice; ikona će definitivno ispadne izgleda mutno.

Pa, ako uzmete u obzir neka od gore navedenih pitanja, vjerojatno ćete morati koristiti fontove ikona.

Korištenje ikona Fontovi

font je skup ikona upakiranih u web-font koji se kasnije može ugraditi na web-mjesto pomoću 'Font-lica. Kao što je Chris u CSS-triku istaknuo, postoje mnoge prednosti korištenja fonta nad slikom za isporuku ikona;

Font je objekt temeljen na vektorima koji je, po svojoj prirodi, neovisan o rezoluciji, tako da će ikona ostati oštra u raznim razlučivostima zaslona, uključujući vrlo visoke razlučivosti zaslona (poput razine mrežnice).
Također je skalabilan, dopuštajući da se proširi na više razina bez gubitka kvalitete i preciznosti.
Budući da je ikona u osnovi font, možemo kontrolirati i boju, transparentnost, tekstualne sjene, pa čak i promijeniti veličinu kroz stilsku tablicu
Također možemo animirati ikonu pomoću CSS3.
Ikona se poziva s oznakom 'Font-lica pravilo koje je podržano već u programu Internet Explorer 4 (s .eot).
Manji HTTP zahtjev i manja veličina datoteke.

Ovdje su neke od najboljih besplatnih fontova ikona koje možemo pronaći:

Font Awesome
IcoMoon
Ikone društvenih medija
Zurb Zaklada Ikone

Provjerite jeste li provjerili i slijedili licencu prije nego što je ugrađujete u svoju web-lokaciju kako biste poštovali autorovo vrijeme i naporan rad.

@ font-face Pravilo

Kao što smo spomenuli, ikone su ugrađene pomoću 'Font-lica pravilo kroz stilski list koji definira novo font-family. U sljedećem primjeru koristit ćemo web simbole;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); format src: url ('fonts / websymbols-regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.woff') format ('woff'), URL ('fonts / websymbols-regular-webfont.ttf') format ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') format ('svg');

Zatim u HTML dokumentu trebamo samo dodati znakove koji predstavljaju ikonu, a ne primijeniti novi font-family naširoko u dokumentu, možemo učiniti konkretnije dodavanjem dodatne klase određenim elementima da bi se ikona trebala pretvoriti u, kao što je to slučaj;

  h
 ja
 j
  ja

Natrag na stilsku ploču definiramo novo font-family za tu klasu koju smo upravo dodali:

 .icon-font font-family: WebSymbolsRegular; veličina fonta: 12pt;

Demo @ font-face

Korištenje pseudo-elemenata

Ako se ikona tretira kao popratni element, možemo je i isporučiti pseudo elemenata. Pod pretpostavkom da je naša HTML oznaka sljedeća:

  Odgovor
 Odgovori svima
 Naprijed
 vezanost
 Slika

Možemo to učiniti na taj način:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): prije content: "h";  ul.icon-font.pseudo li: nth-child (2): prije content: "i";  ul.icon-font.pseudo li: nth-child (3): prije content: "j";  ul.icon-font.pseudo li: nth-child (4): prije content: "A";  ul.icon-font.pseudo li: nth-child (5): prije content: "I";

Demo Pseudo-element

Privatna uporaba Unicode

Postoji okolnost da ikone nisu ugrađene u slova (A, B, C, D, itd.), Već su ugrađene u Unicode Private Use kako bi se smanjilo sukob među znakovima. Kao i kod FontAwesome, autor je na sreću dodao sve kodove znakova u slogovnoj tablici, koja izgleda ovako;

 .staklo s ikonama: prije sadržaj: "f0c6";

Ali kada trebamo ugraditi ikonu izravno u HTML, nešto poput sljedećeg koda \ f0c6 neće prikazati istaknutu ikonu jer ona nije valjani znak kodiran u HTML-u.

HTML-u je potrebna numerička referentna oznaka za prikaz posebnih znakova. O tome smo malo razgovarali u prethodnom vodiču o gumbima CSS3; ovaj znak ima prefiks s kombinacijom znaka za znak & (&), znak hash (#) i x zatim slijedi heksadecimalni broj koji predstavlja znak.

Na primjer, f0c6 je heksadecimalni broj, tako da će brojčana referenca znakova u HTML-u biti & # Xf0c6;, u FontAwesome taj će kôd prikazati ikonu spajalice, tako;

Demo Unicode

Podređivanje fonta

Ikone u zbirci možda nisu sve potrebne. U tom slučaju možemo izbaciti nekorištene znakove tako što ćemo podesiti font koji će također biti rezultira nižim veličinama datoteka fonta. Srećom, tu je i praktičan alat iz FontSquirrela koji lako radi ovaj posao, @ font-face generator.

Nakon što odete na tu stranicu i dodate font, odaberite Stručnjak. Vidjet ćete još nekoliko opcija; Odaberi Prilagođeni podskup.

U ovom primjeru koristimo font Sociolico za prikazivanje ikona društvenih medija na našoj web-lokaciji, ali ikone koje će nam trebati samo su Dribble, Facebook i Twitter koje su predstavljene tim znakovima; d, f i t. Dakle, stavite te znakove u polje za unos pojedinačnih znakova na sljedeći način:

I završili smo. Sada možemo skinuti font, au mom slučaju veličina fonta se pokazala samo 3Kb do 5Kb. Također zapamtite da su jedini likovi koji će se prikazati u ikonu samo d, f i t, dok će ostali znakovi biti samo uobičajeno pismo.

Konačna misao

Jedna stvar koju ne možemo učiniti na ovoj praksi je dodavanje vrlo detaljnih efekata poput ove ikoni.

Međutim, ako naš cjelokupni dizajn ne zahtijeva detalje na toj razini, ovaj bi pristup mogao biti bolji način posluživanja ikona na web-lokacijama. To je fleksibilnost, skalabilnost, spremna je za mrežnicu s vrlo malom veličinom datoteke, što još možemo tražiti?

Konačno, ako želite zaroniti dublje u ovu temu, ispod smo sastavili nekoliko korisnih referenci, kao i naš demo i izvorni kod za preuzimanje.

Kako napraviti vlastitu ikonu Webfont - WebDesignerDepot.com
Prikazivanje fontova i atributa podataka - 24Ways
Privatna uporaba Unicode - Wikipedija

Demo
Preuzimanje izvora