Знайомство з иконочными шрифтами, починаючи з Font Awesome і IcoMoon

12

Від автора: Сьогодні иконочные шрифти придбали велику популярність, і все більше і більше веб-розробників використовують їх у своїх проектах. Якщо ви ще не знайомі з иконочными шрифтами, то ця стаття забезпечить вам знайомство з ними.

Я продемонструю класні речі, яких можна досягти завдяки використанню иконочных шрифтів, але спочатку я розповім, що таке иконочные шрифти, а також виділю їх переваги і недоліки. Потім я розгляну два популярних иконочных шрифту, і ми подивимося на різні приклади, що показують, яким чином їх можна використовувати в наших проектах.

Що таке иконочные шрифти?

Иконочные шрифти – це просто шрифти. Однак, замість літер і цифр в них містяться символи і гліфи. Ви можете керувати їх оформленням з допомогою CSS точно також, як ви це робите у випадку зі звичайним текстом. Тому иконочные шрифти стали так популярні в Інтернеті.

Достоїнства і недоліки иконочных шрифтів

Є кілька значних вигод у використанні иконочных шрифтів у порівнянні з растровими зображеннями в ваших проектах. Ось деякі з них:

Ви можете застосувати до них будь CSS ефект.

Оскільки вони є векторною графікою, вони масштабуються. Це означає, що ви можете збільшувати або зменшувати їх розмір без втрати якості.

Ви відправляєте один або кілька HTTP запитів для їх завантаження замість безлічі HTTP запитів, потрібних для завантаження растрової графіки.

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

Вони підтримуються всіма браузерами (навіть аж до IE6).

Отже, застосовні иконочные шрифти у всіх випадках? Ні, звичайно ні. Вони є відмінним способом поліпшити дизайн вашого проекту, але вони також мають свої обмеження. Наприклад, якщо ви хочете показати складне зображення (композицію) замість простої іконки, тоді иконочные шрифти – не найкраще рішення.

До них може бути застосовано тільки один колір, якщо тільки ви не будете використовувати додаткові CSS прийоми. Більш того, иконочные шрифти розроблені у відповідності з певними сітками, наприклад, 16×16, 32×32, 48×48 і т. д. Якщо з якоїсь причини ви вирішите змінити сітку на 25×25, швидше за все ви не отримаєте ідеальний результат (певні CSS властивості також можуть допомогти).

Крім иконочных шрифтів, слід згадати про те, що існує інше популярне рішення для векторних іконок: SVG іконки. У них є можливість вирішити деякі проблеми, що постають перед иконочными шрифтами. Наприклад, до них можна застосувати більше одного кольору.

Далі в цій статті ми розглянемо основи використання наступних двох бібліотек з иконочными шрифтами:

Font Awesome

IcoMoon

Ми розглянемо 4 різних прикладу, в яких використовуються иконочные шрифти.

Іконки Font Awesome

Font Awesome – це багата колекція з 439 іконок. Ця бібліотека є повністю безкоштовною як для особистого, так і комерційного використання. Спочатку вона була створена для фреймворку Bootstrap, однак ви можете використовувати її в будь-якому з вподобаних вам фреймворків.

Починаємо знайомство з Font Awesome

Найпростіший спосіб використовувати Font Awesome у вашому проекті – це використовувати мережу доставки (розповсюдження) контенту (CDN). Якщо, однак, ви працюєте оффлайн, то вам потрібно буде завантажити архів з бібліотекою.

Вам також потрібно знайти і вставити його в папку з вашим проектом CSS файл і папку з згенерованими шрифтами, що містить різні формати шрифтів. Потім вам потрібно додати CSS файл в ваш HTML-документ. Нарешті, вам необхідно перевірити, що в директиві @font-face в атрибуті src URL шляху у вашому CSS файлі вказують на потрібну папку. Щоб ознайомитися з повним переліком можливих способів використання даних іконок в ваших проектах, прочитайте їх ввідне керівництво.

Щоб використовувати іконки, вам необхідно помістити всередину елемента span або елемента i. Потім вам потрібно присвоїти їм два класу. Клас fa плюс другий клас, який є ім’ям самої іконки, яку ви хотіли б використовувати, наприклад, fa-home. В їх пам’ятці ви побачите імена всіх наявних у них іконок.

Додаткові встановлені класи дозволяють вам легко змінювати іконки. Більш детальну інформацію про цих класах і приклади їх використання ви знайдете за цим посиланням.

Давайте тепер подивимося на три різних приклад використання іконок Font Awesome.

Font Awesome приклад №1

У першому прикладі ми будемо створювати вертикальне меню. Спочатку ми помістимо іконки всередину елемента i і збільшимо їх розмір у два рази відносно розміру їх контейнера, використовуючи попередньо клас fa-2x. Потім ми задамо для них оформлення за допомогою CSS.

HTML-розмітка для двох пунктів меню буде виглядати наступним чином:

  • І відповідне оформлення на CSS:

    nav li {
    background: #ededed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    }
    nav li:not(:first-child) {
    margin-top: 1px;
    }
    nav li a {
    outline: none;
    position: relative;
    width: 100%;
    height: 100%;
    }
    nav i {
    color: steelblue;
    vertical-align: middle;
    }
    nav li after a: {
    background: #ededed;
    content: attr(data name);
    display: none;
    margin-left: 1px;
    width: 160px;
    height: 80px;
    left: 80px;
    position: absolute;
    font-size: 1.2 em;
    }
    nav li a:hover:after {
    display: inline-block;
    }

    Результат показаний в наступному демо-прикладі:

    Font Awesome приклад №2

    У наступному прикладі ми створимо просту панельку з кнопками соціальних мереж. Для цього ми обертаємо іконки в елемент i і подвоюємо їх розмір відносно батьківського контейнера за допомогою передвстановленого класу fa-2x. Потім ми задаємо оформлення через CSS.

    HTML-розмітка для окремої іконки виглядає так:

    І відповідні CSS-стилі для оформлення іконок:

    section a {
    padding: 7px;
    color: black;
    }
    section i {
    vertical-align: middle;
    transition: color .3s ease-in-out;
    }
    section a:nth-child(1):hover i {
    color: #3b5998;
    }

    А ось і демо-приклад:

    Font Awesome приклад №3

    У третьому прикладі ми використовуємо іконки для форми авторизації. Іконки ми використовуємо також, як і в попередніх прикладах. Ми просто додаємо інший встановлений клас fa-fx для іконок, щоб поставити їм фіксовану ширину (приблизно 1.25 em).

    Код HTML і CSS схожий на попередні приклади. А ось і сам результат:

    Зверніть увагу на те, що іконки використовуються як в формі авторизації, так і для посилань на соціальні мережі.

    Іконки IcoMoon

    IcoMoon – є ще одним популярним рішенням, що дозволяє використовувати иконочные шрифти. Ця бібліотека містить два комплекти іконок: один є безкоштовним, інший відноситься до преміум класу (включає всі доступні опції). Більш детально про цих комплектах ви можете прочитати тут. В залежності від обраного комплекту, кількість та формат іконок доступних буде відрізнятися. Наприклад, кількість іконок для безкоштовного комплекту складає 450, а для платного -1266.

    Крім цих комплектів, IcoMoon надає онлайн додаток, в якому ви можете шукати і безкоштовно завантажувати більше 3500 іконок. Цей додаток надає кілька базових опцій для редагування, включаючи можливість повертати іконки, змінювати їх колір і т. д.

    Також існує можливість імпортувати ваші власні іконки і навіть створювати ваші власні иконочные шрифти. Нарешті, є безкоштовний і кілька платних (базові і необмежені можливості) тарифних планів.

    Починаємо знайомство з IcoMoon

    Комплект, який ви виберіть для завантаження, включає в себе іконки різних форматів (наприклад, SVG, PSD, AI). Використовуючи веб-додаток, відразу після того як ви вибрали потрібні вам іконки, ви можете завантажити їх у форматі SVG (ми не будемо використовувати даний варіант), або у вигляді иконочного шрифту.

    Після завантаження іконок вам необхідно вставити в папку з вашим проектом CSS файл і папку з згенерованими шрифтами, що містить різні формати шрифтів, і перевірити, що в директиві @font-face в атрибуті src URL шляху у вашому CSS файлі вказують на потрібну папку.

    Також є можливість використовувати спеціальну посилання для «швидкого старту», яку можна безпосередньо вставити в ваш HTML-документ (розглядайте її як посилання на CDN), а потім ви зможете використовувати вибрані іконки. Проте така можливість існує лише для безлімітного тарифного плану. Базовий тарифний план також надає дану можливість, але її використання обмежене одним днем.

    Також, як і у випадку з іконками Font Awesome, для використання іконок IcoMoon вам потрібно помістити кожну іконку всередину елемента span. Потім вам необхідно додати клас, який є ім’ям вас цікавить іконки, наприклад, icon-home. Ви також можете змінювати імена іконок (замість префікса за замовчуванням, ви можете визначити свій власний префікс) у вкладці «Настройки», перед завантаженням иконочных шрифтів. Давайте розглянемо приклад.

    IcoMoon приклад

    У даному прикладі ми будемо використовувати іконки для створення розділу section, що відноситься до робочого процесу вашої компанії. Ми обертаємо іконки в елемент span і оформляємо їх за допомогою CSS.

    HTML-розмітка для двох іконок виглядає наступним чином:


  • Analyze
  • +

  • Design
  • +
  • Наш CSS:

    section li:nth-child(even) {
    color: #ededed;
    width: 6%;
    font-size: 2.5 em;
    height: 63px;
    margin-top: 31.5 px;
    line-height: 63px;
    }
    section span {
    padding: 15px 0;
    font-size: 5em;
    display: block;
    color: steelblue;
    transition: all .2s ease-in-out;
    }
    section li:hover span {
    transform: translateY(-10px);
    }

    І демо-приклад:

    Висновок

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