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

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

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

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

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

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

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

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

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

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

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

Отметили все иконки, в правом верхнем углу жмите 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
}

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