Što je ikona slova? (I kako koristiti jedan)

Fontovi ikona popularno su rješenje za uobičajeni CSS problem; kako na učinkovit način ugraditi web ikone u dizajn svoje web stranice.

Uz puno usluga na raspolaganju da biste olakšali odabir i korištenje fonta ikona, ne morate sami kreirati ispočetka. Fontovi ikona nalaze se na cijelom internetu.

Ali što je točno font ikone? I kako ih koristiti? Evo vodiča za sve što trebate znati o fontovima ikona.

Istražite fontove

Što je ikona slova?

Fontovi ikona su slova koja koriste sitne slike, a ne oblike slova. Kao i tip, svaki je znak skalabilan i može se mijenjati pomoću CSS-a.

Glavni razlozi upotrebe fonta ikone su u tome što možete lako promijeniti veličinu, boju, oblik. Fontovi ikona su po prirodi transparentni tako da ih možete staviti na bilo koju boju ili vrstu pozadine, a možete dodavati poteze ili mijenjati neprozirnost ikona.

Sve je učinjeno pomoću CSS-a tako da ne morate stvarati jedinstvene slike za svaku novu instancu u dizajnu. (Ovo je sjajno za lagano zadržavanje vaše web stranice i koda.)

Fontovi ikona su vektorske slike, što znači da su skalabilne. Kao i kod bilo kojeg drugog fonta, možete ih učiniti tako velikim ili malim koliko želite. Koristite samostalne fontove kao elemente umjetnosti ili ih se čak raštrkajte po ostalim tekstnim poljima.

Najpopularnija i najpoznatija knjižnica fontova ikona je Font Awesome. Koristi se na više od 100 milijuna web stranica i uključuje snažnu zbirku opcija ikona. Radi sa svim popularnim alatima, uključujući Web Fontove + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React i Ember.

Postoji nekoliko drugih prilično dobro poznatih setova ikona fonta.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Za i protiv upotrebe ikona fontova

Pa zašto biste koristili - ili izbjegavali - font ikone? Evo nekih od prednosti i nedostataka rada s ovim elementom umjetničkog stila.

Prednosti upotrebe ikona fontova

• Ikone je lako skalirati sve dok odgovarajuće klase postoje u vašem CSS-u
• Možete dobiti velike knjižnice ikona s malo problema
• Promjena svojstava ikona je jednostavna, bez obzira na to što ste koristili za izradu svoje web stranice
• Lako je dodati ikone na bilo koju stranicu na web mjestu (samo umetnite naziv ikone)
• Tisuće ikona koje možete odabrati u svim vrstama stilova
• Korisnici WordPressa mogu dodavati fontove ikona jednostavnim dodatkom ili kopiranjem direktorija fontova u kod (gotovo bilo sučelje)
• Možete stvoriti vlastiti font ikone ako vam treba nešto super prilagođeno

Slabosti korištenja ikona fontova

• Ikone su jednobojni ili gradijent boje (u većini slučajeva); neki više premium paketa to mijenjaju
• Nema dobrog povrata ako se font ikone ne učita
• Možda vam neće trebati kompletni set ikona
• Neki čitači zaslona ne znaju što učiniti sa fontovima ikona
• Možda nećete naći paket koji odgovara vašim potrebama

Kako koristiti ikonu Fontovi

Iako se upute za korištenje fontova ikona mogu malo razlikovati ovisno o tome kojeg pružatelja ste odabrali, osnovna ideja je ista.

Obično imate tri mogućnosti (osim ako sami ne namjeravate učiniti malo jače kodiranje):

• Upotrijebite dodatak koji instalira sve pa samo morate pozvati ikone koje želite koristiti. (Super jednostavno!)
• Koristite ugrađene ikone fonta vašeg CMS-a ili web mjesta za izradu web stranica. To izvrsno funkcionira ako nemate prilagođeno web mjesto ili trebate / želite određenu vrstu ikone fonta. Većina graditelja web stranica dolazi s nečim „izvan okvira“.
• Ručno povezivanje s vanjskim fontom ikone. (Složenija verzija korištenja dodatka.)

Fontovi ikona vs SVG-ovi

Veća rasprava se pomiče bi li trebali (ili želite) koristiti font ikone prema SVG slikama za umetanje malih slika na svoju web stranicu. Obje su opcije podjednako održive i imaju puno veze s osobnim preferencijama.

Fontove ikona većini ljudi je lakše i lakše pronaći i koristiti. SVG ikone preferiraju korisnici kojima je potrebna veća kontrola dizajna.

SVG (skalabilni vektorski format) datoteka može vam pružiti malo više fleksibilnosti u dizajnu. (Niste ograničeni na jednu boju). Male skalabilne datoteke mogu se učitati izravno u vaš medijski imenik i s njima je lako raditi. Ovo je dobra opcija ako vam treba samo nekoliko ikona i ne želite se baviti knjižnicom.

SVG-ovi su fleksibilniji s mogućnošću dodavanja više boja i animacija.

Fontovi ikona dugoročno se mogu brže učitavati jer su u predmemoriranju. Ali razlika može biti prilično minimalna.

Fontovi ikona za pozicioniranje mogu postati malo varljivi jer podliježu tipičnim pravilima fonta poput veličine, razmaka linija i okomitih poravnanja. Samo to je razlog zašto se većina ljudi koja koristi font ikone odlučuje za uspostavljenog davatelja usluga, umjesto da pokušava napraviti svoj vlastiti.

SVG-ovi mogu sadržavati elemente koji ih čine dostupnijim od fontova ikona, koji mogu naići na znakove slova na čitačima zaslona.

Fontove ikona većini ljudi je lakše i lakše pronaći i koristiti. Knjižnice su općenito dostupne i nije ih teško razumjeti. SVG ikone preferiraju korisnici koji žele više mogućnosti dizajna i prilagodbe.

Obje se opcije obično koriste i u većini slučajeva djeluju dobro. Odabir ima mnogo veze s onim što vam najviše odgovara i što odgovara vašoj estetskoj dizajni i korisničkom sučelju.

Zaključak

Jedan od razloga što su fontovi ikona toliko popularni jest taj što su svestran i jednostavan za upotrebu. Zahvaljujući skalabilnom formatu koji se može instalirati s nekoliko klikova na većinu sustava za upravljanje sadržajem, gotovo svatko može početi brzo koristiti fontove ikona.

Stvarna korist fonta ikone je u tome što element koristi CSS, a nije neovisna slikovna datoteka. Ovo je dobro za izradu vitke web stranice s elementima koji se učitavaju brzo i u vektorskom formatu (izvrsno ako kasnije trebate promijeniti veličinu).