Cum să vă transformați pictogramele într-un font
Există multe motive pentru care convertirea pictogramelor site-ului dvs. într-un singur font este o idee foarte bună.
Una dintre ele este că așa ajungem reduce drastic greutatea, și, prin urmare, accelerați timpul de încărcare al web până la 14%.
Un alt motiv este versatilitatea pe care o presupune atunci când dezvoltăm webul, deoarece adăugarea unei pictograme se reduce la introducerea unei linii simple de HTML și vă oferă, de asemenea, toate avantajele tratării acelei pictograme ca font în CSS, fiind capabil să schimbe dimensiunea sau culoarea în orice moment, fără a fi nevoie să încărcați imagini prin FTP de mai multe ori.
Și ultimul, și poate cel mai important motiv, de ce simplitate la urcare pictogramele, de la un ecran mobil la unul de 40 inci fără a pierde rezoluția, din moment ce, pe scurt, vorbim despre vectori și nu imagini raster, cum ar fi cazul unui png normal.
Cum să înceapă?
- Primul lucru pe care trebuie să-l faci este să îți creezi icoanele în Illustrator, Sketch, Photoshop sau oricare altul program de editare vectorială.
- Asigurați-vă că toate cursele sunt extinse (în Illustrator -> Object> Expand) și că nu există măști sau efecte. Ar trebui să fie un obiect simplu și curat.
- Exportați pictograma ca .SVG, un format vectorial.
Iconvau ne permite să descărcăm un șablon pentru a crea icoanele noastre și mai ușor.
Cum să le faci sursă?
Există multe site-uri web gratuite care vă permit să vă compilați pictogramele .SVG într-un singur fișier format sursă. Vă recomandăm trei:
Iconvau
Fontello
Icomoon
Practic, toate trei fac la fel, vă permit să încărcați propriile pictograme sau să alegeți dintr-un catalog cu propriile pictograme gratuite și să descărcați fișierul cu sursele și toate materialele necesare pentru a le instala pe site-ul dvs. web.
De asemenea, puteți utiliza Glyph, un plugin Photoshop care vă permite să faceți același lucru cu aceste site-uri web: