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

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

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

Примеры

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

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

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

<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";
}
class code
  wci-format_quote \201c
  wci-activity \221a
  wci-airplay \e901
  wci-alert-circle \2757
  wci-alert-octagon \21
  wci-alert-triangle \26a0
  wci-align-center \e907
  wci-align-justify \e908
  wci-align-left \e909
  wci-align-right \e90a
  wci-anchor \2693
  wci-archive \1f5c3
  wci-arrow-down \2193
  wci-arrow-down-circle \21d3
  wci-arrow-down-left \2199
  wci-arrow-down-right \2198
  wci-arrow-left \2190
  wci-arrow-left-circle \21d0
  wci-arrow-right \2192
  wci-arrow-right-circle \21d2
  wci-arrow-up \2191
  wci-arrow-up-circle \21d1
  wci-arrow-up-left \2196
  wci-arrow-up-right \2197
  wci-at-sign \40
  wci-award \1f396
  wci-bar-chart \1f4c8
  wci-bar-chart-2 \1f4c9
  wci-battery-charging \1f50b
  wci-bell \1f514
  wci-bell-off \1f515
  wci-bluetooth \e920
  wci-bold \42
  wci-book \1f4d7
  wci-book-open \1f4d6
  wci-bookmark \1f516
  wci-box \1f4e6
  wci-briefcase \1f4bc
  wci-calendar \1f4c5
  wci-camera \1f4f7
  wci-camera-off \1f4f8
  wci-cast \e92a
  wci-check \2714
  wci-check-circle \2705
  wci-check-square \2611
  wci-chevron-down \fe40
  wci-chevron-left \21a4
  wci-chevron-right \21a6
  wci-chevron-up \fe3f
  wci-chevrons-down \fe3e
  wci-chevrons-left \2b05
  wci-chevrons-right \27a1
  wci-chevrons-up \fe3d
  wci-chrome \e935
  wci-circle \26aa
  wci-clipboard \1f4cb
  wci-clock \1f552
  wci-code \226a
  wci-codepen \e938
  wci-command \2318
  wci-compass \1f9ed
  wci-copy \1f4d1
  wci-corner-down-left \2936
  wci-corner-down-right \2937
  wci-corner-left-down \2939
  wci-corner-left-up \e93f
  wci-corner-right-down \2935
  wci-corner-right-up \2934
  wci-corner-up-left \293a
  wci-corner-up-right \e943
  wci-cpu \e944
  wci-credit-card \1f4b3
  wci-crop \e946
  wci-crosshair \263c
  wci-database \e948
  wci-delete \274c
  wci-disc \1f4bf
  wci-dollar-sign \24
  wci-download \2913
  wci-download-cloud \2601
  wci-droplet \1f4a7
  wci-edit \270f
  wci-edit-2 \e950
  wci-edit-3 \270d
  wci-external-link \2b00
  wci-eye \1f440
  wci-eye-off \1f441
  wci-fast-forward \279f
  wci-feather \e956
  wci-file \1f4c4
  wci-file-minus \e958
  wci-file-plus \1f5d2
  wci-file-text \1f4c3
  wci-film \1f3ac
  wci-filter \e95c
  wci-flag \1f6a9
  wci-folder \1f4c1
  wci-folder-minus \e95f
  wci-folder-plus \1f4c2
  wci-gift \1f381
  wci-git-branch \2523
  wci-git-commit \2533
  wci-git-merge \251c
  wci-git-pull-request \2560
  wci-github \1f431
  wci-globe \1f310
  wci-grid \25a4
  wci-hard-drive \1f4be
  wci-hash \23
  wci-headphones \1f3a7
  wci-heart \2665
  wci-help-circle \2753
  wci-home \1f3e0
  wci-image \1f5bc
  wci-inbox \1f4e5
  wci-info \2139
  wci-instagram \e971
  wci-italic \49
  wci-layers \e973
  wci-layout \e974
  wci-life-buoy \e975
  wci-link \1f517
  wci-link-2 \e977
  wci-list \e978
  wci-loader \e979
  wci-lock \1f512
wci-log-in \e97a
  wci-log-out \e97b
  wci-mail \1f4e7
  wci-map \1f5fa
  wci-map-pin \1f4cd
  wci-maximize \e97f
  wci-maximize-2 \2922
  wci-menu \2630
  wci-message-circle \1f5e8
  wci-message-square \1f4ac
  wci-mic \1f399
  wci-mic-off \1f3a4
  wci-minimize \e985
  wci-minimize-2 \e986
  wci-minus \2d
  wci-minus-circle \2296
  wci-minus-square \2796
  wci-monitor \1f5a5
  wci-moon \1f319
  wci-more-horizontal \22ef
  wci-more-vertical \22ee
  wci-move \2927
  wci-music \1f3b5
  wci-navigation \27b6
  wci-navigation-2 \2949
  wci-octagon \2616
  wci-package \1f5f3
  wci-paperclip \1f4ce
  wci-pause \25eb
  wci-pause-circle \23f8
  wci-percent \25
  wci-phone \260e
  wci-phone-call \1f4de
  wci-pie-chart \1f4ca
  wci-play \25ba
  wci-play-circle \25b6
  wci-plus \2b
  wci-plus-circle \2295
  wci-plus-square \2795
  wci-power \1f50c
  wci-printer \1f5a8
  wci-radio \1f4fb
  wci-refresh-ccw \21ba
  wci-refresh-cw \21bb
  wci-repeat \293e
  wci-rewind \21e6
  wci-rotate-ccw \27f2
  wci-rotate-cw \27f3
  wci-rss \e9a2
  wci-save \1f4bd
  wci-scissors \2702
  wci-search \1f50d
  wci-send \1f4e9
  wci-server \25ad
  wci-settings \2699
  wci-share \21ea
  wci-share-2 \e9a9
  wci-shield \1f6e1
  wci-shield-off \e9ab
  wci-shopping-bag \1f6cd
  wci-shopping-cart \1f6d2
  wci-shuffle \292e
  wci-sidebar \258e
  wci-skip-back \2347
  wci-skip-forward \2348
  wci-slash \1f6d1
  wci-sliders \234c
  wci-smartphone \1f4f1
  wci-speaker \1f508
  wci-square \1f7e9
  wci-star \2605
  wci-stop-circle \e9b7
  wci-sun \2600
  wci-tablet \e9b9
  wci-tag \1f3f7
  wci-target \1f3af
  wci-terminal \2537
  wci-thermometer \1f321
  wci-thumbs-down \1f44e
  wci-thumbs-up \1f44d
  wci-toggle-left \25a2
  wci-toggle-right \25a3
  wci-trash \1f6ae
  wci-trash-2 \1f5d1
  wci-trending-down \2925
  wci-trending-up \2924
  wci-triangle \25b3
  wci-truck \1f69a
  wci-tv \1f4fa
  wci-type \54
  wci-umbrella \2602
  wci-underline \55
  wci-unlock \1f513
  wci-upload \2b06
  wci-upload-cloud \2353
  wci-user \1f464
  wci-user-check \e9cd
  wci-user-minus \e9ce
  wci-user-plus \e9cf
  wci-user-x \1f5e3
  wci-users \1f465
  wci-video \1f4f9
  wci-video-off \1f4fc
  wci-volume \1f50a
  wci-volume-1 \1f5f9
  wci-volume-2 \1f509
  wci-volume-x \1f507
  wci-watch \231a
  wci-wifi \e9da
  wci-x \2573
  wci-x-circle \d7
  wci-x-square \2716
  wci-youtube \e9dd
  wci-zap \21af
  wci-zoom-in \e9df
  wci-zoom-out \e9e0
Вам помог ответ?
Похожие вопросы
Как вывести встроенную форму подписки?
+9
Как вывести рекламу на страницах?
+9
Как вывести виджеты в подвале сайта?
+9
Как изменить поля формы обратной связи?
+8
Что означает ошибка publisher в микроразметке?
+8
Как изменить количество записей на главной и в рубриках
+7
Почему не показывается количество просмотров?
+7
Что значит код ответа 202 в IndexNow
+7
Как добавить кликабельный номер телефона в шапку сайта?
+7
Как изменить цвет активного пункта меню?
+6
Как во встроенном слайдере вместо записей выводить страницы?
+6
Как добавить поиск в шапку сайта?
+6
Как выровнять логотип и название сайта по центру?
+6
Как отключить защиту от перебора паролей?
+6
Забыл адрес админки, как временно отключить функцию?
+6
Как на главной странице и в архивах рандомно вывести карточки постов разных размеров?
+6
Не работает встроенный лайтбокс
+5
Как изменить почту, на которую приходят сообщения с формы обратной связи?
+4
Как добавить или изменить шрифт в теме
+4
Можно ли взять лицензию на один домен, а потом докупить неограниченную?
+4