Your Own Font Icon Set With Fontello
We can see that font symbols are widely used on websites, and for good reason. The font icon is reliable, looks sharp on a high-resolution screen, and can be easily adjusted in terms of size, color, and position of the icon via CSS. This makes it easier to animate font symbols, even with CSS3 transformations and transitions.
There are a large number of font symbol sets that can be used immediately, but they may not always meet all your requirements. You may want to be able to customize your symbols, in which matter it might be better to create your own symbol set.
Preparation of symbols
First of all, we need to prepare the symbols. The symbols must be in vector form. If you are familiar with vector applications such as Adobe Illustrator, Inkscape, and Corel DRAW, you can create your own icons. Make sure that the symbols retain uniform characteristics, then export them in SVG format.
You can also collect SVG icons that are available for free online. In this example, we use the SVG symbols From Ionicons. Ionicons actually has its own font symbol, but in this example, we will only extract a few of them to explain how to create your own symbol set.
Some of these symbols consist of several shapes. Before we can use them as a font symbols, we need to merge the shapes into a single connection. To do this, open it .svg in Illustrator. Select All the shapes and go to: Object > composite path > create. Do this for the other symbols as well.
Create a font
Fontello makes it easy to create font symbols. In addition to including symbols from popular font symbol sets, Fontello also allows us to download external symbols. Just drag and drop all the selected icons onto Fontello. Once downloaded, they will appear in the custom icons section as follows.
You can click on the pencil icon to change the properties of the icon, namely the CSS name and the hexadecimal code.
Select your custom icons, define the name of your font and click on the Download button.
Fontello generates all the required font formats: .svg, .EOT, .ttf, and .woff. and the stylesheets plus the demo. That’s it. creating font symbols has never been easier. I hope you find this tip useful.