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

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

Fontello является инструментом для быстрой упаковки векторных изображений в вебшрифты
Основное преимущество вебшрифта в том, что шрифт — это векторное изображение. У шрифта нет пикселизации или размытия при отображении на экранах с высоким разрешением. А с помощью CSS можно задавать иконкам нужные параметры: размер, цвет, тени и другие. Ограничение fontello-шрифта — иконки одноцветные.

Как создать набор иконок и использовать fontello-шрифт на сайте (видео):

Как создать набор иконок и использовать fontello-шрифт на сайте (инструкция):

1. На сайте http://fontello.com/ выбери иконки для своего проекта. Выбор производиться нажатием мышки на иконку. На сайте можно задать имена иконок и их коды, а также указать имя шрифта. После подбора иконок скачай файл со шрифтом к себе на компютер.
Сервис 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/
Рубрики: Создание сайта на WordPress, SEO и продвижение и Сервисы и Хостинг Метки: Иконочные шрифты

Об авторе:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend