Kas ir ikonas fonts? (Un kā to izmantot)

Ikonu fonti ir populārs risinājums kopīgai CSS problēmai; kā efektīvi un ātri ielādēt tīmekļa ikonas vietnes dizainā.

Tā kā ir pieejams daudz pakalpojumu, lai ikonas fontu varētu viegli izvēlēties un lietot, jums nav jāveido savs no nulles. Ikonu fonti ir atrodami visā internetā.

Bet kas īsti ir ikonas fonts? Un kā jūs tos izmantojat? Šeit ir ceļvedis visam, kas jums jāzina par ikonu fontiem.

Izpētiet fontus

Kas ir ikonas fonts?

Ikonu fonti ir burtveidoli, kas izmanto niecīgus attēlus, nevis burtu formas. Tāpat kā tips, katra rakstzīme ir pielāgojama, un to var mainīt, izmantojot CSS.

Galvenie ikonas fonta izmantošanas iemesli ir tas, ka jūs varat viegli mainīt izmēru, krāsu, formu. Ikonu fonti pēc savas būtības ir caurspīdīgi, lai jūs varētu tos ievietot uz jebkuras krāsas vai fona veida, kā arī pievienot insultus vai mainīt ikonu necaurredzamību.

Tas viss tiek darīts ar CSS, tāpēc jums nav jāizveido unikāli attēli katram jaunam dizaina ikonas gadījumam. (Tas ir lieliski piemērots, lai jūsu vietne un kods būtu viegls.)

Ikonu fonti ir vektora attēli, kas nozīmē, ka tie ir mērogojami. Tāpat kā jebkuru citu fontu, jūs varat tos padarīt tik lielus vai mazus, cik vēlaties. Izmantojiet tikai ikonu fontus kā mākslas elementus vai pat izkaisītus citos teksta laukos.

Populārākā un pazīstamākā ikonu fontu bibliotēka ir fonts satriecošs. Tas tiek izmantots vairāk nekā 100 miljonos vietņu, un tajā ir iekļauta spēcīga ikonu opciju kolekcija. Tas darbojas ar visiem populārajiem rīkiem, ieskaitot Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React un Ember.

Ir arī daži citi diezgan labi zināmi fontu ikonu komplekti.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Plusi un mīnusi, izmantojot ikonu fontus

Tad kāpēc jūs izmantotu vai izvairītos no ikonas fonta? Šeit ir daži no plusiem un mīnusiem, strādājot ar šo mākslas stila elementu.

Plusi, izmantojot ikonu fontus

• Ikonas ir viegli mērogot, ja vien jūsu CSS ir atbilstošas ​​klases
• Jūs varat iegūt lielas ikonu bibliotēkas ar nelielām nepatikšanām
• Ikonu rekvizītu mainīšana ir vienkārša neatkarīgi no tā, ko izmantojāt savas vietnes izveidošanai
• Ikvienai vietnes lapai ir viegli pievienot ikonas (vienkārši ievietojiet ikonas nosaukumu)
• Ir tūkstošiem ikonu, no kurām izvēlēties visu veidu stilus
• WordPress lietotāji var pievienot ikonu fontus ar vienkāršu spraudni vai kopējot fontu direktoriju kodā (gandrīz jebkurā saskarnē)
• Ja jums ir nepieciešams kaut kas īpaši pielāgots, jūs varat izveidot savu ikonas fontu

Mīnusi, izmantojot ikonu fontus

• Ikonas ir vienas krāsas vai krāsu gradients (vairumā gadījumu); to maina vēl daži premium klases iepakojumi
• Nav laba rezerves, ja ikonas fonts netiek ielādēts
• Jums, iespējams, nav nepieciešams pilns ikonu komplekts
• Daži ekrāna lasītāji nezina, ko darīt ar ikonu fontiem
• Iespējams, ka neatradīsit jūsu vajadzībām atbilstošu iepakojumu

Kā lietot ikonu fontus

Lai gan instrukcijas par ikonu fontu izmantošanu var nedaudz atšķirties atkarībā no tā, kuru pakalpojumu sniedzēju izvēlaties, pamatideja ir tāda pati.

Parasti jums ir trīs iespējas (ja vien jūs neplānojat pats veikt mazliet grūtāku kodēšanu):

• Izmantojiet spraudni, kas instalē visu, tāpēc jums ir jāzvana tikai tām ikonām, kuras vēlaties izmantot. (Ļoti viegli!)
• Izmantojiet iebūvētās fontu ikonas no sava CMS vai vietnes veidotāja. Tas darbojas lieliski, ja jums nav pielāgotas vietnes vai jums ir nepieciešams / vēlaties noteikta veida fonta ikona. Lielākā daļa vietņu veidotāju nāk ar kaut ko “neiespējamu”.
• Manuāla saite uz ārēji mitinātu ikonas fontu. (Sarežģītāka spraudņa izmantošanas versija.)

Ikona Fonti pret SVG

Plašākas diskusijas notiek par to, vai mazo attēlu ievietošanai savā vietnē vajadzētu (vai gribētu) izmantot ikonas fontu pret SVG attēliem. Abas iespējas ir vienlīdz dzīvotspējīgas, un tām ir daudz sakara ar personīgajām vēlmēm.

Ikonu fontus lielākajai daļai cilvēku parasti ir vieglāk atrast un lietot. Lietotāji, kuriem nepieciešama lielāka dizaina kontrole, dod priekšroku SVG ikonām.

SVG (mērogojams vektora formāts) fails var dot jums nedaudz lielāku elastību dizaina jomā. (Jums nav tikai viena krāsa). Mazos, pielāgojamos failus var augšupielādēt tieši multivides direktorijā, un ar tiem ir viegli strādāt. Šī ir laba iespēja, ja jums ir nepieciešama tikai nedaudz ikonu un nevēlaties rīkoties ar bibliotēku.

SVG ir elastīgāki ar iespēju pievienot vairāk krāsu un animācijas.

Ikonu fonti ilgtermiņā varētu tikt ātrāk ielādēti, jo tie ir kešatmiņā. Bet atšķirība var būt diezgan minimāla.

Ikona pozicionēšanas fonti var kļūt nedaudz sarežģīti, jo uz tiem attiecas tipiski fontu noteikumi, piemēram, lielums, atstarpe starp rindām un vertikālā izlīdzināšana. Tas vien ir iemesls, kāpēc vairums cilvēku, izmantojot ikonas fontu, izvēlas reģistrētu pakalpojumu sniedzēju, nevis mēģina izveidot savu.

SVG var ietvert elementus, kas padara tos pieejamākus nekā ikonu fonti, kurus ekrāna lasītājiem var sastapt kā burtu rakstzīmes.

Ikonu fontus lielākajai daļai cilvēku parasti ir vieglāk atrast un lietot. Bibliotēkas parasti ir pieejamas un nav grūti saprotamas. SVG ikonas dod priekšroka lietotājiem, kuri vēlas vairāk dizaina vadības un pielāgošanas iespēju.

Abas iespējas parasti izmanto un vairumā gadījumu darbojas labi. Izvēloties vienu, ir daudz darīšanas ar to, kas jums ir visērtākais un kas atbilst jūsu dizaina estētiskajam un lietotāja interfeisam.

Secinājums

Viens no ikonu fontiem, kas ir tik populārs, ir daudzpusīgi un ērti lietojami. Pateicoties mērogojamam formātam, ko lielākajai daļai satura pārvaldības sistēmu var instalēt ar pāris klikšķiem, gandrīz ikviens var ātri sākt lietot ikonu fontus.

Īsts ikonas fonta ieguvums ir tas, ka elements izmanto CSS un nav neatkarīgs attēla fails. Tas ir noderīgi, lai izveidotu vienkāršu vietni ar elementiem, kuri tiek ielādēti ātri un vektora formātā (lieliski, ja vēlāk jāmaina lielums).