Іконки веб-шрифтів: альтернатива зображенням

Крейг Баклер

Оригінал: sitepoint.com/webfont-icons

Переклад: Влад Мержевич

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

На щастя, HTML5 надає нам ще один варіант: веб-шрифти. Набір шрифтів може містити графічні іконки та набори символів. Wingdings - один з найбільш відомих, але вільні шрифти, такі як Iconic, можуть бути більш корисними та надати приклад коду на HTML і CSS.

Переглянути демонстраційну сторінку

Як тільки ви знайдете або створите відповідний шрифт, вам потрібно конвертувати його в різні формати, щоб забезпечити хорошу кросбраузерну сумісність. @Font-Face Generator на fontsquirrel.com виконає важку роботу за вас і надасть zip-файл, що містить усі шрифти та CSS-код. Шрифт потім імпортується вгорі вашого CSS-файлу, наприклад.

@font-face {
  font-family: "IconicStroke";
  src: url("iconic_stroke.eot");
  src: url("iconic_stroke.woff") format("woff"),
  url("iconic_stroke.ttf") format("truetype"),
  url("iconic_stroke.otf") format("opentype"),
  url("iconic_stroke.svg#iconic") format("svg");
}

Можна додати іконку символу у ваш HTML-файл, наприклад, за допомогою «r» для іконки RSS. Проте це може заплутати людей, які використовують програми читання з екрана, тому безпечніше застосувати псевдоелементи.

Ваш HTML:

<a href="rss.xml" class="rss">RSS Feed</a>

Ваш CSS:

.rss:before {
  font-family: "IconicStroke";
  content: "r";
}

Переваги іконок веб-шрифтів

Веб-шрифти можуть бути ідеальною альтернативою графіці:

  • шрифти можна масштабувати до будь-якого розміру, використовувати будь-які кольори та застосовувати CSS-ефекти;
  • веб-шрифти пропонують хорошу кросбраузерність і навіть працюють в IE6;
  • один файл зі шрифтом може бути ефективнішим, ніж кілька зображень.

Недоліки іконок веб-шрифтів

Веб-шрифти не завжди підходять:

  • символи можуть бути лише однотонними (хоча можуть допомогти ефекти CSS3);
  • створення шрифтів не простіше, ніж PNG або SVG;
  • розмір файлу зі зображенням може бути меншим, якщо потрібно лише кілька іконок.

В цілому, недоліків мало, щоб іконки веб-шрифтів не сподобались, крім того, вони можуть скоротити час розробки. Ви вже використовували цей прийом у ваших проектах?

Переглянути демонстраційну сторінку з іконками веб-шрифтів

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

Часті запитання