In the history of the Web, designers have tried a variety of methods to use icons and images on websites. This includes, to name a few: importing bitmap image files (usually transparent PNGs), vectoring SVG files, or even using web fonts containing symbols instead of typical characters from the alphabet. Using non-standard fonts has become the standard in web development in recent years, leading to the rise of icon fonts.
Advantages of Font Icons
Displaying icons through fonts is no different from using alternative fonts for headers, titles, and paragraphs. Implementing icons as a web font has many advantages:
- Icons are scalable without loss in definition
- There is no need to worry about Retina displays
- It is easy to apply CSS properties without editing the icon itself (color, gradient, shadows, etc.)
- You can use the same icon in different sizes and colors to save time and space
- Better page speed performance (i.e. fewer http requests)
- Icon fonts load faster than background or inline SVG’s
Now, let’s create a font icon…
Creating Icons
In order to create a font icon, the icon has to be in the SVG (Scalable Vector Graphics) format. You can download SVG icons from various sites like iconfinder.com. But here I will tell you how to create icons from Photoshop, then convert this to SVG format and as a final step, convert the SVG format to font.
Step 1.
First, we need to create nice icon in Photoshop then save as PNG.
Step 2.
After saving the image you have to convert the PNG image to SVG image. To do that you have lot of online image converter tool – among them http://picsvg.com/ and http://picsvg.com/.
Upload your image:
Choose proper filters and download the converted SVG icon.
Step 3
Converting to SVG is done. Now we have to convert that SVG to font by using http://fontello.com/ or https://icomoon.io/. To demonstrate this, I am using icomoon here.
Import your saved SVG icon in icomoon clicking on “Import Icons” button.
You can arrange, enter Meta details and change grid size etc. by using right side hamburger menu:
If you want to edit, move, or delete the icon, you can do it by choosing the button which is highlighted in the following snapshot:
After all the editing is completed, click on `Generate font’:
Rename all the icons and define a Unicode character for each (optional):
Download the generated files:
That’s it!!! The icon font you have just generated consists of various font formats (for cross-browser compatibility) and demo files, including HTML and CSS.
