Раніше при створенні сайтів доводилося використовувати растрові іконки. Це було красиво, але незручно з цілого ряду причин. Сьогодні на місце растрових іконок прийшли векторні. Це оригінальне і елегантне рішення, яке прикрасить і освіжить ваш сайт.

Пример иконочного шрифта

Інструкція

1. Існує хороший веб-сервіс для створення шрифтів з іконок. Називається він Fontastic. Він повністю безкоштовний і без реклами. Першим ділом зареєструємося на сайті сервісу. Заходимо на сайт fontastic.me, вводимо в поле вводу свою електронну адресу і придумаємо пароль, далі тиснемо велику жовту кнопку “Create your Icon Font”. Іноді трапляється, що ніяка інформація, що підтверджує успішну реєстрацію, не виводиться. Не хвилюйтеся про це, переходьте до наступного кроку.

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

2. Тепер натискаємо на кнопку “Login” у верхньому правому кутку. На сторінці знову вводимо свій e-mail та пароль, натискаємо кнопку “Login”.Почекавши кілька секунд, відкриється панель для створення шрифтів з іконок.

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

3. Перед вами великий вибір іконок. Клікаючи на вподобані іконки мишею, виберіть стільки іконок, скільки вам потрібно. У верхній частині після слова “PUBLISH” вказується кількість обраних іконок.

Выбираем векторные иконки

4. Якщо вами не вистачає іконок з представленого кількості, перегорніть сторінку до низу і знайдіть кнопку з написом “Add more icons”. Натисніть на неї.

Добавляем иконки

5. Відкриється сторінка з додатковими пакетами іконок. Деякі з них платні (позначені лейблом “Premium”), деякі безкоштовні. Для активації додаткових іконок, натисніть кнопку “ACTIVATE” на обраних пакетах. Тепер вони з’являться в загальному списку доступних іконок, коли ви перейдете в початок роботи з панеллю керування, натиснувши на кнопку “Home” у верхньому меню.

Добавляем пакеты иконок

6. Якщо вам потрібно додати власні іконки, то на цій же сторінці вгорі праворуч натисніть на кнопку “IMPORT ICONS”. Тепер ви можете завантажити свої власні іконки. Зверніть увагу, що підтримуються тільки векторний формат SVG.

Добавляем свои векторные иконки

7. Вибравши потрібну кількість іконок, натискаємо кнопку “CUSTOMIZE”. Тут ви побачите всі вибрані іконки, і можете присвоїти довільні назви класів для них, за якими ви будете звертатися до них у стилях CSS. Чи можете залишити назви за замовчуванням, які привласнила іконок система.

Обзор выбранных векторных иконок

8. Натискаємо кнопку “PUBLISH”. Тут можна завантажити створений векторний иконочный шрифт (кнопка “DOWNLOAD”). Скачуємо на комп’ютер архів зі шрифтом, створений сервісом.

Загружаем векторный иконочный шрифт

9. У скачаному архіві знаходиться CSS-файл стилю, HTML-файл з іменами класів іконок і папка “fonts” зі шрифтами. Цей иконочный шрифт можна використовувати на своєму сайті.

Архив с иконочным шрифтом

10. Щоб використовувати створений иконочный шрифт, потрібно зробити наступне:- розпакувати вміст архіву і завантажити на свій сайт в директорію зі стилями;- вставити посилання на CSS-файл в розділ HEAD всіх сторінок сайту, які будуть працювати з цим иконочным шрифтом;- у коді сторінки використовуємо ім’я створених раніше класів для використання тільки що створеного иконочного шрифту.

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

НАПИСАТИ ВІДПОВІДЬ

Please enter your comment!
Please enter your name here