Применение иконочных шрифтов улучшает дизайн сайта. Однако подключение иконочного шрифта увеличивает размер загружаемых страниц и время их загрузки.
Чтобы ускорить загрузку сайта 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/
