FontAwesome и ещё 25 бесплатных иконочных шрифтов
CSS

FontAwesome и ещё 25 бесплатных иконочных шрифтов

8 мая 2017

На днях WPLift опубликовал большую подборку иконочных шрифтов (или шрифтовых иконок?) Не смог пройти мимо и хочу поделиться этой прекрасной коллекцией с читателями. Заодно покажу каким образом эти шрифты подключаются к Вордпресс.

Что такое иконочный шрифт

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

В чем плюсы

  • Масштабирование без потери качества, это же обычный текст по-сути.
  • Простая стилизация, как обычного текста.
  • Поддержка всеми браузерами, включая очень старые.
  • Относительно малый вес.

В чем минусы

  • Нельзя измененять геометрию иконок.
  • Нельзя использовать несколько цветов внутри одной иконки.

Если это критично, значит лучше сразу перейти на формат SVG и не мучиться.

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

Зачем это нужно

Существуют исследования, которые доказывают, что использование иконок повышает юзабилити сайта, упрощает взаимодействие пользователя с интерфейсом сайта. Грамотно подобранные и уместно размещённые иконки — это всегда стильно, красиво и удобно.

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

1. Font Awesome

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

Font Awesome

Скачать

2. Dashicons

Этот набор известен всем пользователям Вордпресс, именно Dashicons используются в оформлении админпанели платформы.

Dashicons

Скачать

3. Themify Icons

Набор из 320+ иконок от известной компании Themify. Бесплатный для личного и коммерческого использования.

Themify Icons

Скачать

4. Foundation Icon Fonts 3

Набор из 283 иконок со скругленными углами.

Foundation Icon Fonts 3

Скачать

5. Elegant Icon Font

Бесплатный набор из 360 иконок различных направлений от Elegant Themes.

Elegant Icon Font

Скачать

6. Dripicons

Набор стильных иконок.

Dripicons

Скачать

7. Pictonic

Бесплатный набор из 266 иконок разной направленности, регистрация в сервисе открывает доступ к тысячам других иконок.

Pictonic

Скачать

8. Sosa

Бесплатный набор из 160 иконок широкого спектра применения от Ten by Twenty.

Sosa

Скачать

9. Metrize Icons

Коллекция из 300 бесплатных иконок в Metro-стиле.

Metrize Icons

Скачать

10. Ionicons

Прекрасный набор иконок, можно подключить прямо из MaxCDN.

Ionicons

Скачать

11. Symbol Signs

Специфический набор из 50 символов.

Symbol Signs

Скачать

12. Icomoon

Большой бесплатный набор из 490 векторных иконок.

Icomoon

Скачать

13. Batch

Пакет из 343 интересных иконок от Адама Уиткрофта.

Batch

Скачать

14. Socialico

Набор из 74 иконок социальных сетей.

Socialico

Скачать

15. Raphaël Icon-set

Интересный набор иконок с привязкой к буквам.

Raphaël Icon-set

Скачать

16. Entypo

Бесплатный набор из 411 премиум-иконок, имеется дополнение иконок социальных сетей.

Entypo

Скачать

17. MFG Labs Icon Set

Набор уникальных иконок от MFG Labs, разработанных для собственных нужд и впоследствии переданных в свободный доступ.

MFG Labs Icon Set

Скачать

18. Ligature Symbols

Бесплатный набор иконок.

Ligature Symbols

Скачать

19. PW Drawn Icon Font

80 бесплатных иконок, выполненных в очень интересном стиле, который сильно отличается от остальных.

PW Drawn Icon Font

Скачать

20. Fontelico

Маленький набор из 30 забавных иконок.

Fontelico

Скачать

21. Feather Icon Set

Набор модных иконок в стиле минимализма.

Feather Icon Set

Скачать

22. Premium Pixels

Набор из 80 иконок.

Premium Pixels

Скачать

23. Rondo Social Icon Font

Небольшой набор круглых иконок социальных сетей.

Rondo Social Icon Font

Скачать

24. Map Icons

Отличный набор иконок для отображения географических объектов на картах Google Maps, например.

Map Icons

Скачать

25. Weather Icons

222 погодные иконки способны отобразить любое состояние погоды.

Weather Icons

Скачать

26. Typicons

Универсальный набор из 336 шрифтовых иконок разных направлений.

Typicons

Скачать

Как подключить иконочный шрифт к Вордпресс

1. Плагины

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

Отмечу наиболее известные:

2. Без плагинов

Любители хендмейда могут без сторонних плагинов загрузить в свою тему любой шрифт и зарегистрировать шорткод, который будет выводить иконки. Покажу на примере Font Awesome.

Все операции производятся в файле function.php активной темы или в специальном функциональном плагине.

Подключение шрифта

Загружаем с MaxCDN актуальную на данный момент версию Font Awesome 4.7.0

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Регистрация шорткода

// FontAwesome Shortcode

function fontawesomefunc($atts) {
	extract(shortcode_atts(array(
		"type"	=>	'',
		"size"	=>	''
		), $atts));
	if ( $size != '' ) { $size = ' fa-'.$size; }
	return '<i class="fa' . $size . ' fa-' . $type . '" aria-hidden="true"></i>';
}
add_shortcode('icon', 'fontawesomefunc');

Теперь в редакторе можно использовать шорткод  [icon] с двумя переменными type и size, которые задают тип и размер иконки.

Пример использования шорткода

[icon type="wordpress" size="3x"]

В результате должен генерироваться такой HTML-код

<i class="fa fa-wordpress" aria-hidden="true"></i>

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

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

ПОДПИСАТЬСЯ

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

Услуги фрилансеров по фиксированной цене — 500 р.