How to make your own icon font

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 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.

Регистрируемся в сервисе Fontastic

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.

Входим в панель управления Fontastic

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.

Используем созданный иконочный шрифт на своём сайте

Post Comment