Шрифтовые картинки, знаки, иконки, символы для сайта

При разработке дизайна большинства современных сайтов широко используются шрифтовые картинки (иконки, символы, значки). Они включены в популярный фреймворк Bootstrap, но так же могут использоваться отдельно от него.

Вы наверняка видели эти значки где-нибудь в меню, форме поиска, при реализации кнопок социальных сетей и в других элементах веб-интерфейса.

Большинство новых Wordpress тем так же используют в своем дизайне шрифтовые иконки.

Шрифтовые картинки, знаки, иконки

В этой статье:

  1. Расскажу об удобстве использования векторных изображений;
  2. Продемонстрирую установку шрифтовых картинок на сайт на примере Font Awesome;
  3. Напишу о 3-х WordPress плагинах иконочных шрифтов;
  4. Выложу несколько популярных наборов шрифтов;
  5. Сделаю обзор парочки интересных онлайн сервисов для подбора иконок.

Удобство использования иконочных шрифтов

У векторных шрифтовых иконок есть ряд преимуществ по сравнению с растровыми изображениями. Ведь с помощью CSS с ними можно творить «чудеса».

Преимущества:

  • Огромное количество готовых наборов, выполненных в одном стиле (вебмастера ликуют);
  • Изменение размера картинки без потери качества;
  • Задавание цвета, фона, тени и прочих свойств каскадных стилей;
  • Значки отлично отображаются на любых устройствах и экранах.

Установка Font Awesome иконок на сайт

На примере бесплатного шрифта Font Awesome расскажу, как установить красивые шрифтовые иконки на свой сайт.

Самый простой вариант - добавить в секцию <head>…</head> код. Вам даже не придется ничего устанавливать. Можно сразу будет приступить к добавлению иконок на сайт.

Код для вставки (при обновлении версии Font Awesome код следует взять с официальной страницы: http://fontawesome.io/get-started/):

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

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

Примеры использования можно посмотреть тут: http://fontawesome.io/examples/

Для вставки изображения в запись следует использовать такую конструкцию:

<i class="fa fa-skype"></i>

Где fa-skype – название иконки.

В результате чего появится значок Скайпа:

Полный список всех доступных шрифтовых картинок и их названий вы найдете тут: http://fontawesome.io/icons/.

Установка векторных шрифтовых иконок в WordPress

Если вдруг ваша Вордпресс тема не поддерживает Bootstrap иконки, не отчаивайтесь. Ведь есть же плагины, которые всегда выручат в трудную минуту и позволят решить практически любую задачу.

Расширений достаточно много. Вот некоторые из них:

  1. WP Visual Icon Fonts - плагин векторных иконок для WordPress сайта. С помощью него, можно вставлять миниатюрные изображения на страницы, в записи, виджеты, а так же непосредственно в файлы шаблона с помощью простого HTML. Он включает в себя набор Font Awesome 4, а так же Genericons. Всего насчитывается более 430 символов.Плагин шрифтовых иконок WordPress
  2. Font Awesome icon, как не трудно догадаться по названию, импортирует в WordPress одноименный пиктографический шрифт. Это расширение интегрирует кнопки иконок в визуальный редактор, а так же позволяет использовать шорткоды для добавления в записи, на страницы и в виджеты.Font Awesome для WP
  3. Menu Icons – у этого Вордпресс плагина несколько иное назначение. Он добавляет иконки в меню. Поддерживает следующие шрифты: Dashicons, Font Awesome, Foundation Icons, Genericons, Fontello, а так же некоторые другие эксклюзивные изображения.Вставка иконочных изображений в меню

Все 3 плагина шрифтовых символов доступны для установки из административной панели WordPress.

Кстати, заметил, что очень многие шаблоны посадочных страницы (Landing page) в WordPress используют шрифтовые иконки. Выглядит очень эффектно.

Скачать наборы красивых шрифтовых иконок

Представляю вашему вниманию подборку отличных наборов шрифтовых иконок:

Font Awesome – один из самых популярных наборов шрифтовых значков. Полностью совместим с Twitter Bootstrap.

WebHostingHub - содержит достаточно много интересных глифов. Больше чем Font Awesome.

Mfglabs - еще один хороший набор.

Entypo – более 250 шрифтовых картинок.

Онлайн сервис подбора шрифтовых иконок

Разработчики шрифтовых иконок постарались уменьшить вес наборов до минимума. Однако перфекционисты наверняка не захотят качать полный комплект, если собираются применять на своих веб-проектах лишь несколько символов.

Для этих целей можно использовать онлайн сервисы для подбора иконок, которые позволят выбрать несколько понравившихся и интегрировать их на свой сайт без лишнего «балласта».

Онлайн сервис иконочных шрифтов IcoMoon

IcoMoon - бесплатный онлайн сервис шрифтовых изображений.

Как использовать:

  1. Перейдите по ссылке, выберите понравившиеся изображения и нажмите Generate Fonts внизу экрана.иконки для сайта
  2. Затем, опять же, внизу страницы нажмите «Download» (Скачать);
  3. Скачанный архив следует распаковать в директорию сайта и подключить файлы шрифтов.

Кстати, иконки можно редактировать – поворачивать и отражать зеркально. Для этого следует на начальной странице в панели инструментов выбрать значок карандаша и нажать на изображение.

редактирование картинки

Онлайн сервис шрифтовых картинок Fontello

В онлайн-сервисе Fontello доступные следующие иконочные шрифты: Fontelico, Font Awesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, Web Symbols.

Интерфейс очень схож с предыдущим сайтом.

Выбираете заинтересовавшие вас иконки, затем скачиваете их на свой компьютер.

онлайн сервис иконок для сайта

Инструкцию по установке на сайт вы найдет тут (правда, на английском языке).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *