Іконкові шрифти, альтернативи FontAwesome
Що таке «Іконковий шрифт» — це звичайний шрифт, але замість літер та цифр у ньому відображаються різні піктограми та символи. В останні роки такі шрифти активно використовують у веб-дизайні як іконки для сайту. З їхньою допомогою можна покращити юзабіліті сайту, спростити сприйняття інформації. Ще з плюсів використання іконкових шрифтів у порівнянні з іконками-картинками:
- Можливість масштабування без втрати якості
- Безпроблемна підтримка у більшості браузерів
- Можливість стилізації, робота як із звичайним текстом
- Невелика вага
- За один запит на сервер завантажуються всі необхідні іконки
Крім використання для сайтів, такі шрифти можна встановити і в свою ОС і використовувати в програмах, наприклад, у Фотошопі.
Найпопулярніший іконковий шрифт FontAwesome https://fontawesome.com/, але оскільки інформації про нього і так повно, ми краще розглянемо альтернативні шрифти.
StackIcons (http://stackicons.com/)
Цей шрифт як іконки містить логотипи різних інтернет та ІТ брендів.
Шрифт поставляється з CSS, тому ви маєте можливість його кастомізації. Іконки шрифту можна використовувати без фону або з фоном, зробивши з квадратними, із закругленими кінцями і просто круглими.
Ви можете використовувати кольорові іконки, які повторюють реальні кольори бренду.
Ліцензія: SIL Open Font and MIT
Twemoji Awesome (http://ellekasai.github.io/twemoji-awesome/)
Twemoji - це open source проект смайликів від Twitter. Канадський дизайнер Elle Kasai створила на його основі іконний штифт Twemoji Awesome.
Всі імена класів для відображення іконок такі ж, як у шпаргалці Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), але вам потрібно використовувати тире (-) замість підкреслення (_), ось і все.
Ліцензія: MIT та CC-BY для Emoticon graphics
Octicons (https://octicons.github.com/)
Octicons – це іконковий шрифт від GitHub.Він дозволить використовувати у вашому проекті ті самі іконки, що й на GitHub. Доступно понад 170 іконок.
Android Icons (https://www.androidicons.com/)
Цей шрифт включає 250 іконок в 5 різних розмірах і 14 кольорах.
Ліцензія: Attribution-ShareAlike 4.0 International
DevIcons (http://vorillaz.github.io/devicons/#/main)
DevIcons – це іконковий шрифт, розроблений Теодором Ворільясом. Він містить 85 символів та логотипів знайомих додатків для розробки, таких як GitHub, Laravel, Django, Visual Studio та багатьох інших.
Material Design Iconic Font (http://zavoloklom.github.io/material-design-iconic-font/)
Цей шрифт містить безліч іконок, натхненних дизайном Google Material і згрупованих у 15 різних категорій. Щоб використовувати їх, потрібно просто підключити файл шрифту Material-Design-Iconic-Font.ttf до сайту, а потім, використовуючи цю шпаргалку, додати іконки на сайт. Також можна змінювати розміри, кольори і взагалі працювати з ними як зі звичайним шрифтом за допомогою CSS.
Ліцензія: Attribution-ShareAlike 4.0 International
Категорії
Свіжі записи
Приклади
Після того, як ви підключили Font Awesome до свого проекту, іконки можна викликати за допомогою тега . Деякі приклади були запозичені із документації Bootstrap.
Наведені приклади є kept простий і сумісний з використанням Font Awesome CDN, які забезпечує auto-accessibility support. Якщо ви не використовуєте Font Awesome CDN, натисніть на manual manual accessibility examples and read more about making your icons more awesome for all users
Базові іконки
Приклад: Базові іконки fa-camera-retro
Ви можете розмістити іконки Font Awesome у будь-якому місці, використовуючи в імені класу префікс fa та назву іконки. Font Awesome розроблений так, щоб він міг бути використаний у рядкових елементах (ми любимо використовувати тег, оскільки він дуже короткий, але використання тега буде семантично правильніше).
class="fa fa-camera-retro"> fa-camera-retro
- Приклад: Базові іконки Якщо ви змінюєте значення властивості font-size у контейнера іконок, то іконки стануть більшими. Така поведінка відбувається і з кольором, тінню та іншими властивостями, які можуть успадковуватись.
Збільшені іконки
Для збільшення розмірів іконок у батьківському елементі використовуйте класи fa-lg (збільшення на 33%), fa-2x, fa-3x, fa-4x, або fa-5x.
class="fa fa-camera-retro fa-lg"> fa-lg
class="fa fa-camera-retro fa-2x"> fa-2x
class="fa fa-camera-retro fa-3x"> fa-3x
class="fa fa-camera-retro fa-4x"> fa-4x
class="fa fa-camera-retro fa-5x"> fa-5x
- Якщо ваші іконки обрізані зверху та знизу, переконайтеся у правильному значенні властивості line-height.
Іконки з фіксованою шириною
Використовуйте клас fa-fw для того, щоб встановити фіксовану ширину іконок. Чудово підходить для випадків, коли різна ширина іконок заважає правильному вирівнюванню. Особливо корисно при використанні іконок у навігації та списках груп.
class="list-group">
class="list-group-item"
href="#">
class="fa fa-home fa-fw"
aria-hidden ="true"> Головна
class="list-group-item"
href="#">
class="fa fa-book fa-fw"
aria-hidden ="true"> Бібліотека
class="list-group-item"
href="#">
class="fa fa-pencil fa-fw"
aria-hidden ="true"> Програми
class="list-group-item"
href="#">
class="fa fa-cog fa-fw"
aria-hidden ="true"> Налаштування
Іконки списків
- Іконки списків
- можуть бути використані
- як маркери
- у списках
Використовуйте класи fa-ul та fa-li для швидкого видалення стандартних маркерів у ненумерованих списках.
Обрамлені та винесені іконки
…Душа моя осяяна неземною радістю, як ці чудові весняні ранки, якими я насолоджуюся від щирого серця… Я зовсім один і блаженствую в тутешньому краю, ніби створеному для таких, як я.
Використовуйте класи fa-border та fa-pull-right або fa-pull-left для виділення цитати чи підключення іконки статті.
class="fa fa-quote-left fa-3x fa-pull-left fa-border"
aria-hidden ="true"> . Душа моя осяяна неземною радістю, як ці чудові весняні ранки, якими я насолоджуюся від щирого серця. Я зовсім один і блаженствую в тутешньому краю, ніби створеному для таких, як я.
Анімовані іконки
Приклад завантаження (з fa-spinner icon) Приклад завантаження (з fa-circle-o-notch icon) Приклад завантаження (з fa-refresh icon) Приклад завантаження (з fa-cog icon) Приклад завантаження (з fa-spinner icon)
Використовуйте клас fa-spin, щоб змусити обертатися будь-яку іконку, та використовуйте клас fa-pulse, щоб змусити обертатися іконку по 8 кроків. Також працює з класами fa-spinner, fa-refresh і fa-cog.
class="fa fa-spinner fa-spin fa-3x fa-fw">
class="sr-only">Завантаження
class="fa fa-circle-o-notch fa-spin fa-3x fa-fw">
class="sr-only">Завантаження
class="fa fa-refresh fa-spin fa-3x fa-fw">
class="sr-only">Завантаження
class="fa fa-cog fa-spin fa-3x fa-fw">
class="sr-only">Завантаження
class="fa fa-spinner fa-pulse fa-3x fa-fw">
class="sr-only">Завантаження
На замітку: Деякі браузери на декількох платформах мають проблеми з анімацією іконок, що дає ефект "нестримних веселощів" у іконки. Читайте проблему #671 для ознайомлення з нею та вивчення можливих рішень.
На замітку: Анімація CSS3 не підтримується в IE8 - IE9.
Повернені та віддзеркалені іконки
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
Щоб довільно повертати та дзеркати іконки, використовуйте класи fa-rotate-* and fa-flip-* .
class="fa fa-shield"> normal
class="fa fa-shield fa-rotate-90"> fa-rotate-90
class="fa fa-shield fa-rotate-180"> fa-rotate-180
class="fa fa-shield fa-rotate-270"> fa-rotate-270
class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal
class="fa fa-shield fa-flip-vertical"> fa-flip-vertical
Групові іконки
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera
Щоб зробити групу з іконок, використовуйте клас fa-stack для батька, клас fa-stack-1x для завдання стандартного розміру іконки, а клас fa-stack-2x для збільшеного. Клас fa-inverse може бути використаний для надання альтернативного кольору іконці. Також можна використовувати класи збільшення для керування розмірами іконок.
class="fa-stack fa-lg">
class="fa fa-square-o fa-stack-2x">
class="fa fa-twitter fa-stack-1x">
fa-twitter на fa-square-o
class="fa-stack fa-lg">
class="fa fa-circle fa-stack-2x">
class="fa fa-flag fa-stack-1x fa-inverse">
fa-flag на fa-circle
class="fa-stack fa-lg">
class="fa fa-square fa-stack-2x">
class="fa fa-terminal fa-stack-1x fa-inverse">
fa-terminal на fa-square
class="fa-stack fa-lg">
class="fa fa-camera fa-stack-1x">
class="fa fa-ban fa-stack-2x text-danger">
fa-ban на fa-camera
Приклади для Bootstrap 3
Font Awesome чудово працює з усіма компонентами Bootstrap.
Користувальницький CSS
Все, що ви можете зробити зі шрифтами за допомогою CSS, ви зможете зробити з Font Awesome.
Приклад рейтингу (позичено з CSS Tricks)
Загальна доступність
Відновлення. Збереження. Тримайтеся міцніше!
Трохи про наші думки про загальнодоступність ікон. Якщо іконка використовується для декорування або відображення бренду, то вони не повинні бути оголошені загальнодоступно, тому що вони впливають на додатки, які читають сайти в слух. Якщо іконка передає зміст тексту в контексті інтерфейсу, переконайтеся, що цей зміст також передається і допоміжними технологіями, додатковим текстом або прихованим блоком.
class="btn btn-default"
href="path/to/settings"
aria-label="Налаштування">
class="fa fa-cog"
aria-hidden ="true">
class="btn btn-danger"
href="path/to/settings"
aria-label="Видалити">
class="fa fa-trash-o"
aria-hidden ="true">
class="btn btn-primary"
href="#navigation-main"
aria-label="Перейти до основного меню">
class="fa fa-bars"
aria-hidden ="true">
class="fa fa-refresh fa-spin fa-3x fa-fw"
aria-hidden ="true">
class="sr-only">Відновлення.
class="fa fa-cog fa-spin fa-3x fa-fw"
aria-hidden ="true">
class="sr-only">Збереження. Тримайтеся міцніше!
class="input-group margin-bottom-sm">
class="input-group-addon">
class="fa fa-envelope-o fa-fw"
aria-hidden ="true">
class="form-control"
type="text"
placeholder="Ваш email">
class="input-group">
class="input-group-addon">
class="fa fa-key fa-fw"
aria-hidden ="true">
class="form-control"
type="password"
placeholder="Пароль">
href="path/to/shopping/cart"
class="btn btn-primary"
aria-label="Подивитися 3 предмети у вашому кошику">
class="fa fa-shopping-cart"
aria-hidden ="true">
class="fa fa-battery-half"
aria-hidden ="true">
class="sr-only">Рівень заряду: 50%
Font Awesome надається за ліцензією SIL OFL 1.1 ·
Розробка надається за ліцензією MIT License
Документація надається за ліцензією CC BY 3.0
