Що таке іконочние шрифт?
Іконочние шрифт - це той же шрифт. Однак, замість букв і цифр, в них містяться символи і спеціальні знаки. Ви можете оформляти їх через CSS точно так же, як робите це зі звичайним текстом.
Плюси і мінуси
Існує чимало плюсів від заміни растрових зображень іконочние шрифтами. Ось деякі з них:
- оформлення через CSS;
- векторна природа дозволяє легко масштабувати їх до будь-яких розмірів без втрати якості;
- один HTTP запит замість кількох, на відміну від растрових зображень;
- швидке завантаження через невеликого розміру;
- широка браузерна підтримка, включаючи IE6.
Чи означає це, що іконочние шрифти є панацеєю? Ні, звичайно ні. Це відмінний прийом, який ви можете використовувати в дизайні проекту, але в їх використанні є і парочка мінусів. Наприклад, якщо ви хочете показати складне зображення, а не простий значок, то іконочние шрифт - не найкраще рішення.
Так само, як правило, вони можуть відображатися тільки в одному кольорі, якщо ви не скористаєтеся CSS трюками. Крім того, деякі іконки можуть бути створені під конкретні розміри, наприклад 16 × 16, 32 × 32, 48 × 48 і т.д. Якщо з якоїсь причини ви зміните розмір на 25 × 25, то результат може бути нечітким.
Варто відзначити, що крім іконочние шрифтів є ще одне популярне рішення: SVG. Їх використання може вирішити деякі проблеми. Наприклад, ви можете використовувати більш одного кольору.
Далі ми розглянемо дві бібліотеки іконочние шрифтів:
Так само ми розглянемо чотири різних приклад використання іконочние шрифтів.
Font Awesome
Font Awesome - це бібліотека, яка містить 439 іконок. Вона є абсолютно безкоштовною як для особистого, так і для комерційного використання. Спочатку вона розроблялася для Bootstrap, однак ви можете використовувати її і окремо.
Робота з Font Awesome
Найпростіший спосіб підключити Font Awesome - підключити через CDN. Якщо ж ви працюєте оффлайн - вам доведеться завантажити набір іконок.
Так само вам необхідно підключити CSS і згенеровані шрифти в різних форматах.
Для використання іконок, ви повинні розмістити їх усередині елемента span або i. Потім, потрібно присвоїти їм два класи: fa плюс другий клас, який повинен відповідати назві іконки, наприклад fa-home. Тут можна знайти назви всіх доступних іконок.
Додаткову інформацію та безліч прикладів можна знайти на цій сторінці.
Тепер давайте розглянемо кілька прикладів.
Font Awesome. Приклад # 1
У першому прикладі, ми створюємо вертикальне меню. Спочатку поміщаємо іконки всередині елемента i і вдвічі збільшуємо їх розмір, використовуючи зумовлений клас fa-2x. Потім оформляємо їх за допомогою CSS.
HTML буде виглядати наступним чином:
Font Awesome. Приклад # 2
HTML для однієї іконки буде виглядати наступним чином:
CSS для стилізації значків:
Font Awesome. Приклад # 3
HTML і CSS схожі на попередні. Результат.
іконки IcoMoon
IcoMoon - це ще один популярний іконочние шрифт. На цей раз ми можемо вибрати з двох пакетів: один з відкритим вихідним кодом, інший преміум. Більш детальну інформацію можна знайти тут. Залежно від обраного пакета, кількість і формат доступних значків буде відрізнятися. Наприклад, в безкоштовному пакеті 450 іконок, в платному 1266.
Так само IcoMoon надає онлайн додаток. де ви можете знайти і завантажити більше 3500 іконок. В даному додатку можна здійснювати основні операції: поворот, зміну кольору і багато іншого.
До того ж у вас є можливість імпортувати свої ікони і створювати власні іконочние шрифти.
Робота з IcoMoon
Пакет, який ви вибираєте, включає зображення в різних форматах (SVG, PSD, AI). Після завантаження іконок, ви повинні підключити CSS і згенерувала папку шрифтів.
Щоб використовувати іконки IcoMoon ви повинні помістити з них всередині елемента span. Потім ви повинні призначити клас, який повинен відповідати імені бажаної іконки, наприклад icon-home. Також ви можете налаштувати назви значків у вкладці Preferences.
IcoMoon. приклад
Розміщуємо іконки всередині елементів span. і оформляємо за допомогою CSS.
HTML для двох іконок виглядає наступним чином:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!