Mis on ikooni font? (Ja kuidas seda kasutada)

Ikooni fondid on tavaline CSS-i probleem; kuidas hõlpsalt ja kiiresti laadida veebikooni oma veebisaidi kujundusse.

Ikooni fondi valimise ja kasutamise lihtsustamiseks on saadaval palju teenuseid, mistõttu ei pea te oma nullist looma. Ikoonifondid on kõikjal Internetis.

Kuid mis on ikooni font? Ja kuidas te neid kasutate? Siin on juhend kõige kohta, mida peate teadma ikoonifondide kohta.

Avastage fonte

Mis on ikooni font?

Ikooni fondid on kirjatüübid, mis kasutavad kirjavormide asemel pisikesi pilte. Nagu tüüp, on iga märk skaleeritav ja seda saab CSS-i abil muuta.

Ikooni fondi kasutamise peamised põhjused on see, et saate hõlpsalt muuta suurust, värvi, kuju. Ikoonifondid on oma olemuselt läbipaistvad, nii et saate neid panna mis tahes värvi või tüüpi taustale ja saate lisada lööke või muuta ikoonide läbipaistmatust.

See on kõik CSS-iga tehtud, nii et te ei pea disaini ikooni iga uue eksemplari jaoks kordumatuid pilte looma. (See on suurepärane teie veebisaidi ja koodi kerge hoidmiseks.)

Ikooni fondid on vektorpildid, mis tähendab, et need on skaleeritavad. Nagu iga teise fondi puhul, saate neid muuta nii suureks kui väikseks, kui soovite. Kasutage ikoonifonte üksi kunstielementidena või isegi hajutatud teistele tekstiväljadele.

Kõige populaarsem ja tuntum ikoonifondide kogu on Font Awesome. Seda kasutatakse enam kui 100 miljoni veebisaidi jaoks ja see sisaldab jõulist ikoonivalikute kogumit. See töötab koos kõigi populaarsete tööriistadega, sealhulgas Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React ja Ember.

Leidub ka mõnda muud üsna tuntud font-ikoonide komplekti.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Ikoonifondide kasutamise plussid ja miinused

Miks te siis kasutaksite ikoonifonti või väldiksite seda? Siin on mõned selle stiilielemendi töötamise plussid ja miinused.

Ikoonifondide kasutamise plussid

• Ikoone on lihtne skaleerida, kui teie CSS-is on olemas sobivad klassid
• Väikeste probleemidega saate hankida suuri ikoonikogusid
• Ikooni atribuutide muutmine on lihtne, hoolimata sellest, mida kasutasite oma veebisaidi loomisel
• Ikoone saab hõlpsalt lisada igale veebisaidi lehele (sisestage lihtsalt ikooni nimi)
• Igat tüüpi stiilide vahel saab valida tuhandeid ikoone
• WordPressi kasutajad saavad ikoonifonde lisada lihtsa pistikprogrammi abil või kopeerides fondikataloogi koodi (peaaegu iga liidese)
• Kui vajate midagi eriti kohandatud, saate luua oma ikoonifondi

Miinused ikoonifondide kasutamisel

• Ikoonid on ühevärvilised või värvilised (enamikul juhtudel); veel mõned lisatasupakid muudavad seda
• Pole hea varu, kui ikooni font ei laadita
• Võimalik, et te ei vaja täielikku ikoonikomplekti
• Mõned ekraanilugejad ei tea, mida teha ikoonifondidega
• Võimalik, et te ei leia oma vajadustele vastavat pakki

Kuidas kasutada ikoonifonte

Kuigi ikoonifontide kasutamise juhised võivad sõltuvalt valitud pakkujast pisut erineda, on põhiidee sama.

Üldiselt on teil kolm võimalust (kui te ei kavatse ise pisut rohkem kodeerida):

• Kasutage pluginat, mis installib kõik, nii et peate helistama ainult ikoonidele, mida soovite kasutada. (Ülilihtne!)
• Kasutage oma CMS-i või veebisaidi koostaja sisseehitatud fondiikoone. See töötab suurepäraselt, kui teil pole kohandatud saiti või kui vajate / soovite konkreetset tüüpi fondiikooni. Enamikul veebisaitide ehitajatel on midagi "karbist väljas".
• Lingi käsitsi väliseks hostitud ikoonifondiga. (Pistikprogrammi kasutamise keerulisem versioon.)

Ikooni fondid vs SVG-d

Suurem arutelu toimub selle üle, kas peaksite oma veebisaidile väikeste piltide lisamiseks kasutama (või tahaksite kasutada) ikooni fonti versiooni SVG-piltide suhtes. Mõlemad võimalused on võrdselt elujõulised ja neil on palju pistmist isiklike eelistustega.

Ikooni fonte on enamikul inimestel üldiselt lihtsam leida ja kasutada. SVG-ikoone eelistavad kasutajad, kes vajavad suuremat kujunduskontrolli.

SVG (skaleeritav vektorvorming) fail võib teile kujunduse osas pisut rohkem paindlikkust anda. (Te ei piirdu ühe värviga). Väikesed, skaleeritavad failid saab otse oma meediumikataloogi üles laadida ja nendega on lihtne töötada. See on hea valik, kui vajate ainult käputäis ikoone ja ei soovi raamatukoguga tegeleda.

SVG-d on paindlikumad, võimalusega lisada rohkem värve ja animatsioone.

Ikooni fontide laadimine võib pikas perspektiivis olla kiirem, kuna need on vahemällu salvestatud. Kuid erinevus võib olla üsna minimaalne.

Positsioneerimisikoonide fondid võivad olla pisut keerulised, kuna nende suhtes kehtivad tüüpilised fondireeglid, nagu suurus, reavahe ja vertikaalne joondamine. Ainuüksi see on põhjus, miks enamik ikooni fonti kasutavaid inimesi valib oma teenusepakkuja loomise asemel selle asemel teenusepakkuja.

SVG-d võivad sisaldada elemente, mis muudavad need juurdepääsetavamaks kui ikoonifondid, mis võivad ekraanilugejate jaoks kokku puutuda tähemärkidena.

Ikooni fonte on enamikul inimestel üldiselt lihtsam leida ja kasutada. Raamatukogud on üldiselt saadaval ja neid pole raske mõista. SVG-ikoone eelistavad kasutajad, kes soovivad rohkem disaini juhtimise ja kohandamise võimalusi.

Mõlemat võimalust kasutatakse tavaliselt ja need töötavad enamikul juhtudel hästi. Selle valimisel on palju pistmist sellega, mis teile kõige rohkem sobib ja mis sobib teie kujunduse esteetilise ja kasutajaliidesega.

Järeldus

Üks põhjus, miks ikoonifondid on nii populaarsed, on see, et need on mitmekülgsed ja hõlpsasti kasutatavad. Tänu skaleeritavale vormingule, mille saab installida enamiku sisuhaldussüsteemide jaoks mõne klõpsuga, saab peaaegu igaüks hakata kiiresti ikoone fonte kasutama.

Ikoonifondi tegelik kasu on see, et element kasutab CSS-i ja see pole iseseisev pildifail. See on hea lahja veebisaidi loomiseks, mille elemendid laaditakse kiiresti ja vektorvormingus (suurepärane, kui peate hiljem suurust muutma).