Korištenje vektorskih ikona

Prvo nisam ni imao ideju da postoji nešto ovakvo, cijeli set ikona koji su dio utf8 simbola: HTML Unicode UTF-8

…i to mi se činilo odlično rješenje za zamjenu ponekih ikona kojima se neće gubiti oštrina na mobitelu…a i destkopu također.

No nedostaci su:
-prilično ograničen izbor ikona
-veličina se mora podešavati sa font-size. (To i nebi bio problem da se jednako prikazuje na svim browserima…ali koliko vidim, ne prikazuje se isto)

Uglavnom, ovo gore mi se više ne čini dobrim rješenjem…no možda griješim, pa me slobodno netko ispravi.
S druge strane, u kojem smjeru krenuti za rješenjem? …a da sve skupa bude što bezbolnije. :slight_smile:

Hvala za bilo kakvi savjet!

Ispravno ti se čini, podrška za unicode je šarolika i nemoj ovo koristit.
Koristi svg ili icon-fontove. Oštrina također odlična jer su oba riješenja vektorska.

2 Likeova

Awsome font se najviše koristi.
https://fortawesome.github.io/Font-Awesome/

Slazen se s blajom, napravi samo svoje breakpointove i koristi svg ikone, ionako ih neces sve koristit, samo ti otezavaju stvar

Super, tako nešto sam tražio.
Jeli postoji ikakav dobar razlog još za odluku između svg ili icon-font?

Ako hoćeš brz i relativno lak način korištenja ikonica na stranici bez da hoćeš neku veliku kontrolu izgleda ikona onda icon-fonts.
Ako hoćeš kontrolu na izgledom ikona onda svg.
Ja bi osobno izabrao svg jer je standard i možeš radit što hoćeš s njim, ali vjerojatno je tebi brzina i ergonomija korištenja važnija.

1 Like

A opet, starije IE ( 8 > ) verzije ne čitaju SVG. Postoje neke JS zakrpe za to ali to je opet opterečivanje.
Ako brineš za optimizaciju IE 8 > onda možda bolje icon-font.

Ma ovo sa font awesome mi je baš awesome…jednostavno za koristiti, a i ima puno ikonica.
Nego, baš zato što postoje sve žive ikonice, nije mi baš jasno da nema neki izbor “x” ikone …ima samo jedna, koja mi je puno previše premasna. http://fortawesome.github.io/Font-Awesome/icon/times/

A meni treba fini tanki x …kojeg sam odličnog našao među tim standardnim utf8 karakterima…samo ako ga koristim kao takvog, onda mi se različito prikazuje među browserima.

Dali možda ipak postoji neka caka da ukrotim to različito prikazivanje…pa makar samo za tu jednu ikonu? Možda odabir nekog fonta koji je univerzalan među browserima?

Ako ti fali neka ikona, odi ovdje: https://icomoon.io/app

Ucitaj Font Awesome (imaju ga oni u library-ju), i onda dodaj jos ikone koje ti fale iz nekog drugog icon fonta.

1 Like

Ne možeš natjerati sve preglednike da 100% isto prikazuju font.
Zašto jednostavno ne nacrtaš taj x u ilustratoru ili nekom vektorskom programu i ekportaš ga kao
SVG.

Cool ideja…jos samo da mi je znati pokrenuti ilustrator :smile:

1 Like

Ovo je odlična stvar…em mogu extendat druge ikone, em mogu izbaciti suvišne.

Samo me zanima nešto…kad označim ikone koje trebam, generiram font te downloadam isti…i onda zavirim u folder/fonts koji dobijem i tamo se nalaze:
-font.eot
-font.ttf
-font.woff

Dok kod prijašnjeg font-awesome sam imao iste te i još dodatno:
-font.woff2
-font.otf

Te različite verzije fonta pretpostavljam su podrška za različite browsere/uređaje?? Gdje mi konkretno onda fale ova dva, ako su uopće bitna??

otf ti ne treba a woff2 je noviji format sa boljom kompresijom od woff formata.

woff2 format mozes generirati ovdje: https://everythingfonts.com/ttf-to-woff2

1 Like