Применение иконочных шрифтов улучшает дизайн сайта. Однако подключение иконочного шрифта увеличивает размер загружаемых страниц и время их загрузки. Чтобы ускорить загрузку сайта WordPress можно уменьшить размер иконочного шрифта путем исключения из него неиспользуемых иконок. В статье рассмотрена работа с сервисом fontello.com для создания персонального набора иконок под конкретный проект.
Fontello является инструментом для быстрой упаковки векторных изображений в вебшрифтыОсновное преимущество вебшрифта в том, что шрифт - это векторное изображение. У шрифта нет пикселизации или размытия при отображении на экранах с высоким разрешением. А с помощью CSS можно задавать иконкам нужные параметры: размер, цвет, тени и другие. Ограничение fontello-шрифта - иконки одноцветные.
Как создать набор иконок и использовать fontello-шрифт на сайте (видео):
Как создать набор иконок и использовать fontello-шрифт на сайте (инструкция):
1. На сайте http://fontello.com/ выбери иконки для своего проекта. Выбор производиться нажатием мышки на иконку. На сайте можно задать имена иконок и их коды, а также указать имя шрифта. После подбора иконок скачай файл со шрифтом к себе на компютер.
2. Распакуй на компьютере скачанный архив. Файлы шрифта и таблицы стилей закачай на сайт WordPress. Для сайта используй дочерную тему.
3. Подключи шрифт к сайту. Для этого добавь в файл стилей темы (файл style.css) строку:
@import url('css/myfont.css');
где myfont - имя шрифта.
4. Сохрани изменения и пользуйся шрифтом. Для вставки иконки добавь html-код:
<i class="CLASSNAME"></i>где "CLASSNAME" - имя иконки.
Для записей или страниц в редакторе код надо вставлять в режиме "текст"
Имя иконки можно узнать из файла demo.html, который входит в состав архива шрифта.
Заключение
Создание своего набор иконок и подключение их к сайту позволит существенно уменьшить размер загружаемой страницы и тем самым ускорить загрузку сайта wordpress. Удачи! Александр Коваль- Ссылка на Fontello.com - http://fontello.com/
