Previously, when creating sites had to use bitmap icons. It was beautiful, but inconvenient for a number of reasons. Today, in place of bitmap icons come vector. This is the original and elegant solution that will enhance and refresh your website.
1. There is a good web service for creating fonts out of icons. It’s called Fontastic. It is completely free and without ads. The first thing to check in on the service website. Go to the website fontastic.me entered in the field enter your email address and invent a password, then press the big yellow button «Create your Icon Font». Sometimes it happens that no information confirming successful registration is displayed. Don’t worry about it, skip to the next step.
2. Now click on the «Login» button located in the upper right corner. On the opened page again, enter your e-mail address and password, click «Login».
After waiting a few seconds, a panel will appear to create fonts out of icons.
3. Here is a large selection of icons. Clicking on icons with the mouse, select as many icons as you want. In the upper part after the word «PUBLISH» is specified the number of selected icons.
4. If you do not have enough icons from the number, scroll to the bottom and find the button that says «Add more icons». Click on it.
5. Page appears with additional packages of icons. Some of them are paid (marked with the label «Premium»), some free. To activate additional icons, click the «ACTIVATE» button on the selected packages. Now they will appear in the list of available icons, when you go to the getting started with control panel, clicking on «Home» in the top menu.
6. If you need to add your own icons, then on the same page at the top right, click on the button «IMPORT ICONS». Now you can upload your own icons. Please note that the only supported vector format SVG.
7. Choosing number of icons, click «CUSTOMIZE». Here you will see all the selected icons, and can assign an arbitrary class names for them, by which you will refer to them in CSS styles. Or you can leave the default name that was assigned to the icons system.
8. Click «PUBLISH». Here you can download a vector icon font (the button «DOWNLOAD»). Downloadable to your computer archive with the font created by the service.
9. In the downloaded archive is a CSS style file, an HTML file with the class names of the icons and the fonts folder with fonts. This icon font you can use on your website.
10. To use an icon font, you need to do the following:
— unzip the archive and upload to your site in the directory with styles;
— insert link to CSS file in the HEAD section of all pages of the website, which will work with an icon font;
— in the code pages use the name of the previously created classes to use the newly created an icon font.