Какие иконки есть в шаблонах?

Во всех шаблонах, кроме Root, используется иконочный шрифт wpshop-core. Сам шрифт весит около ~ 60Кб, загружается быстро, плюс к нему добавлен preload. Это не Font Awesome, мы от него отказались из-за очень большого веса и собрали свои иконки.

В таблице ниже есть список иконок, какой класс у иконки и код для псевдоэлемента :before.

Примеры

1. Самый простой способ вставить иконку, разместить тег <span> с классом иконки. Так можно добавлять иконку в меню, в файлы шаблона, в HTML-код. Подходит для Gutenberg в блок Произвольный HTML.

<span class="wci-heart"></span>

2. WordPress в визуальном редакторе любит вырезать пустые теги, поэтому, если иконка пропадает после публикации или нужно вставить иконку в визуальный редактор, добавьте в тег символ неразрывного пробела  

<span class="wci-heart">&nbsp;</span>

3. Чтобы поменять цвет и размер, добавьте свойства color и font-size.

<span class="wci-heart" style="color: #f00; font-size: 2em;"></span>

4. Иконки можно добавлять с помощью псевдоэлементов :before и :after, таким образом они реализованы почти везде, где используются в шаблоне. Например, для виджета Вывод статей добавим к заголовку иконку.

В первой строке у нас находится селектор, то есть к какому элементу мы будем применять стили, в конце селектора обратите внимание на :before, это псевдоэлемент, который будет вставлен перед заголовком.

Во второй строчке мы видим свойство content, у которого в кавычках указан код иконки из таблицы ниже.

Дальше идет код, который приводит иконки к одному виду, выставляет правильное сглаживание и размеры.

Если нужно изменить размер иконки или цвет, используйте по аналогии свойства color и font-size, как в третьем примере.

.widget_wpshop_widget_articles .widget-header:before {
  content: "\2665";

  /* код ниже нужен, чтобы иконка хорошо
     и одинаково отображалась на всех устройствах */
  font-family: wpshop-core!important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

5. Аналогично можно поменять существующие иконки в шаблоне. Вам нужно найти какой селектор используется для иконки и заменить значение свойства content.

/* меняем иконку в записи Время на чтение */
.entry-time:before {
content: '\2139';
}

/* меняем иконку у блока внимания warning */
.entry-content blockquote.is-style-warning:before,
.entry-content blockquote.warning:before {
    content: "\2605";
}