Surely you’ve ever wanted a font to dominate them all (your icons), a modifiable and scalable font, but how do you create it? There are many reasons why converting your website icons into a single font is a very good idea. French Email Address , One of them is that this way we can drastically reduce the weight , and therefore accelerate the loading time of the web by up to 14% .
Another reason is the versatility that it supposes when developing the web, since adding an icon is reduced to introducing a simple line of HTML and also offers you all the advantages of treating that icon as a font in CSS, being able to change the size or color at any time , without having to upload the images by FTP again and again.
And finally, and perhaps the most important reason, for the simplicity when it comes to scaling the icons, from a mobile screen to a 40-inch screen without losing resolution, since, in short, we are talking about vectors and not raster images such as would be the case of a normal png.
How to start?
The first thing you should do is create your icons in Illustrator, Sketch, Photoshop, or any other vector editing program .
Make sure all strokes are expanded (in Illustrator -> Object> Expand) and that there are no masks or effects. It should be a simple and clean traced object.
Export the icon as .SVG , a vector format.
Iconvau allows us to download a template to create our icons even more easily.
How to convert them into a font?
There are many free websites that allow you to compile your .SVG icons into a single source format file. We recommend
Basically all three do the same, they let you upload your own icons, or choose from a catalog of your own free icons, and download the file with the sources and all the necessary materials to install them on your website.
You can also use Glyph , a Photoshop plugin that allows you to do the same as these websites:
How to use the font?
As simple as uploading the font by FTP to a folder on your website (we will guess that to / fonts) and adding the following code to your CSS file, similar to any other font:
Why are there different formats? Simply because of the incompatibilities of the browsers. If you even notice the same .EOT file is called twice, this is due to a problem with older versions of Internet Explorer. Finally, a . USA Business SVG file is included, to support iOS. But do not worry, the user’s browser will only download the first compatible format, so including the rest does not imply excess weight .
