Как создать свой набор иконок и ускорить загрузку сайта wordpress

Делаем свой набор иконок на Fontello.com и подключаем их к сайту WordPress

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

Чтобы ускорить загрузку сайта 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.

Удачи!
Александр Коваль