Замена стандартных иконок в теме Flatsome

Замена стандартных иконок в теме Flatsome

Стандартный набор иконок Flatsome выглядит немного печально. Иконки отличаются по стилистике, что в целом даёт не очень эстетичную картинку. Поэтому я решил их полностью заменить.

Стандартный набор иконок в теме Flatsome:

flatsome default icons

Для замены нам понадобится новый набор иконок. Для своего сайта я использовал иконки из наборов Fluency systems regular и Fluency systems filled на icons8.com. И две-три иконки позаимствовал у Font Awesome.

Вот, что у меня получилось:

flatsome custom icons

Обратите внимание. При подборе иконок (особенно из разных наборов) желательно, чтобы они были одного размера. При необходимости измените размеры холста и самих иконок в Иллюстраторе или Фигме. Для конечных файлов используйте формат svg. Мы соберём новый иконочный шрифт, чтобы заменить стандартный набор наиболее удобно.

1. Собираем иконки

Итак, иконки вы собрали. Теперь задайте им нужные имена, чтобы не мучаться с этим потом.

Вот список классов стандартных иконок Flatsome. В именах файлов убирайте «icon-», т. к. этот префикс добавит сервис генерации иконочного шрифта.

      icon-lock

      icon-user-o

      icon-line

      icon-chat

      icon-user

      icon-shopping-cart

      icon-tumblr

      icon-gift

      icon-phone

      icon-play

      icon-menu

      icon-equalizer

      icon-shopping-basket

      icon-shopping-bag

      icon-google-plus

      icon-heart-o

      icon-heart

      icon-user-o

      icon-500px

      icon-vk

      icon-angle-left

      icon-angle-right

      icon-angle-up

      icon-angle-down

      icon-twitter

      icon-envelop

      icon-tag

      icon-star

      icon-star-o

      icon-facebook

      icon-feed

      icon-checkmark

      icon-plus

      icon-instagram

      icon-tiktok

      icon-pinterest

      icon-search

      icon-skype

      icon-dribbble

      icon-certificate

      icon-expand

      icon-linkedin

      icon-map-pin-fill

      icon-pen-alt-fill

      icon-youtube

      icon-flickr

      icon-clock

      icon-snapchat

      icon-whatsapp

      icon-telegram

      icon-twitch

      icon-discord

Как только вы подготовили файлы иконок, переходите на fontello.com и перетаскивайте иконки в раздел Custom icons.

Затем отметьте все иконки, чтобы собрать их в набор. При необходимости вы можете нажать на иконку карандаша, чтобы исправить класс, ключевое слово или код иконки.

custom icon font fontello

Отметили все иконки, в правом верхнем углу жмите Download webfont. Иконочный шрифт готов.

2. Загрузка на хостинг и подключение новых иконок

Распакуйте архив с иконочным шрифтом. На хостинг вам нужно загрузить пять файлов из папки font. Я просто создал в корне сайта папку /fonts и загрузил в неё.

Подключаем файлы шрифта. Можно добавить CSS в настройки темы (Custom CSS), либо в файл style.css дочерней темы:

@font-face {
	font-family: 'fontello';
	src: url('/fonts/fontello.eot');
	src: url('/fonts/fontello.eot#iefix') format('embedded-opentype'),
		url('/fonts/fontello.woff2') format('woff2'),
		url('/fonts/fontello.woff') format('woff'),
		url('/fonts/fontello.ttf') format('truetype'),
		url('/fonts/fontello.svg#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}

Можете переименовать свой шрифт во что-то другое. Я, например, переименовал в tiil-icon-font.

Дальше переопределяем иконочный шрифт для всех элементов, в которых применялся стандартный fl-icons:

ul.links li:before,
ul li.bullet-checkmark:before, ul li.bullet-arrow:before, ul li.bullet-star:before,
ul.menu > li:before, .widget > ul > li:before,
.star-rating,
.star-rating span,
.stars a,
.links>li>a:before, i[class^=icon-], i[class*=" icon-"] {
    font-family: "fontello" !important;
}

Дальше для всех классов с иконками прописаем новые коды. Их вы найдёте в архиве со шрифтом css/fontello.css:

.icon-angle-down:before { content: '\e802'; }
.icon-angle-left:before { content: '\e803'; }
.icon-angle-right:before { content: '\e804'; }
.icon-angle-up:before { content: '\e805'; }
.icon-certificate:before { content: '\e806'; }
.icon-chat:before { content: '\e807'; }
.icon-checkmark:before { content: '\e808'; }
.icon-clock:before { content: '\e809'; }
.icon-discord:before { content: '\e80a'; }
.icon-dribbble:before { content: '\e80b'; }
.icon-envelop:before { content: '\e80c'; }
.icon-equalizer:before { content: '\e80d'; }
.icon-expand:before { content: '\e80e'; }
.icon-facebook:before { content: '\e80f'; }
.icon-feed:before { content: '\e810'; }
.icon-flickr:before { content: '\e811'; }
.icon-gift:before { content: '\e812'; }
.icon-heart-o:before { content: '\e813'; }
.icon-heart:before { content: '\e814'; }
.icon-instagram:before { content: '\e815'; }
.icon-line:before { content: '\e816'; }
.icon-linkedin:before { content: '\e817'; }
.icon-lock:before { content: '\e818'; }
.icon-map-pin-fill:before { content: '\e819'; }
.icon-menu:before { content: '\e81a'; }
.icon-pen-alt-fill:before { content: '\e81b'; }
.icon-phone:before { content: '\e81c'; }
.icon-pinterest:before { content: '\e81d'; }
.icon-play:before { content: '\e81e'; }
.icon-plus:before { content: '\e81f'; }
.icon-search:before { content: '\e820'; }
.icon-shopping-bag:before { content: '\e821'; }
.icon-shopping-basket:before { content: '\e822'; }
.icon-shopping-cart:before { content: '\e823'; }
.icon-skype:before { content: '\e824'; }
.icon-snapchat:before { content: '\e825'; }
.icon-star-o:before { content: '\e826'; }
.icon-star:before { content: '\e827'; }
.icon-tag:before { content: '\e828'; }
.icon-tiktok:before { content: '\e82a'; }
.icon-tumblr:before { content: '\e82b'; }
.icon-twitch:before { content: '\e82c'; }
.icon-twitter:before { content: '\e82d'; }
.icon-user-o:before { content: '\e82e'; }
.icon-user:before { content: '\e82f'; }
.icon-vk:before { content: '\e830'; }
.icon-youtube:before { content: '\e832'; }
.icon-500px:before { content: '\e833'; }
.icon-google-plus:before { content: '\e834'; }
.icon-telegram:before { content: '\e835'; }
.icon-whatsapp:before { content: '\e836'; }

Ну и в завершение, зададим коды новых иконок для списков Flatsome и звёздочек рейтинга в отзывах Woocommerce:

.stars a:after {
    content: "\e827"
}
.stars a.star-2:after {
    content: "\e827\e827"
}
.stars a.star-3:after {
    content: "\e827\e827\e827"
}
.stars a.star-4:after {
    content: "\e827\e827\e827\e827"
}
.stars a.star-5:after {
    content: "\e827\e827\e827\e827\e827"
}

ul li.bullet-checkmark:before {
    content: "\e808" !important
}
ul li.bullet-arrow:before {
    content: "\e804" !important
}
ul li.bullet-star:before {
    content: "\e827" !important
}

Сохраняем, при необходимости сбрасываем кеш, наслаждаемся.

Эта запись была размещена в Flatsome с меткой .

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *