Створюємо власний шрифт з іконок для сайту

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

МАГАЗИН Лендінзі УНІВЕРСИТЕТ АКЦІЇ ВІД ПАРТНЕРІВ

У цій статті-уроці я розповім вам як створити свій власний шрифт для веб-сайту, використовуючи власноруч створені іконки. Все, що нам для цього знадобиться - програма для створення векторної графіки (Adobe Illustrator або Inkspcape) і доступ в інтернет! Отже, приступимо! Всі використані зображення, іконки і css шрифт цього ви зможете скачати в кінці статті.

Підготовка векторних іконок

Для цього уроку ми зробимо щось просте. Для першої іконки ми намалюємо звичайну зірочку. Для другої іконки - орла з буквою W всередині. Намалювати це досить легко і ви можете створити будь-які форми і комбінації. Я використовував ілюстратор для цих цілей.

Після того, як ви закінчили творчу частину - ваш твір необхідно зберегти в SVG форматі. Тиснемо "Зберегти Як" і вибираємо тип файлу як SVG. Тепер можна переходити безпосередньо до створення шрифту.

Створення власне шрифту

Для цих цілей ми використовуємо популярний і безкоштовний сервіс IcoMoon.

Перше, що потрібно зробити - створити новий проект, тому натискаємо на меню в лівому верхньому кутку і натискаємо "New Project". Далі довантажувати наші готові svg файли після натискання на кнопку "Import Icons". Проробивши ці кроки ви повинні бачити у себе на моніторі зображення такого роду:

Далі виділяємо курсором наші іконки (вони будуть виділені помаранчевої рамкою при виборі) і тиснемо кнопку "Font>" внизу екрана.

Після того, як ви все налаштували - натискаємо кнопку "Download" внизу сторінки і завантажуємо архів. У цьому архіви ви знайдете ваш шрифт в форматах ttf, eot, svg і woff + демо-сторінку зі шрифтом.

Використання іконок на сайті

Тепер, все що нам потрібно - це підключити шрифт CSS за допомогою кнопки @ font-face, і вказати інші параметри (вони все прописані в css-файлі в архіві, який ви завантажили.

Тепер ми можемо використовувати наш шрифт в HTML коді наступним чином:

Вказавши назву класу для тега ми отримуємо нашу іконку.

От і все! Тепер ви можете створювати будь-які шрифти з ваших іконок для різних проектів.

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

пов'язані записи

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.