Начиная с версии 3.8 в wordpress включен набор векторных иконок, которые можно использовать в записях, страницах, админке и т.д.
Вам не нужно устанавливать дополнительные плагины или подключать шрифты с иконками – вставить иконки очень просто, более подробно читайте ниже.
Также разберем как поменять иконки в админке wordpress.


Скачать исходники для статьи можно ниже

Полный список иконок можно посмотреть здесь:
“developer.wordpress.org/resource/dashicons”

Под каждой иконкой расположен её цифровой код:

Но в большинстве случаев нам нужен не цифровой код иконки, а её название “класса” иконки, чтобы его узнать нужно кликнуть по понравившейся вам иконке и в открывшемся окошке будет указан название её класса:

Здесь же вы можете нажать на ссылку “Copy HTML” и получить код для вставки данной иконки в записях и страницах сайта:

Как же разместить иконку в записи, странице?

Для этого достаточно войти в пункт “Добавить запись/страницу” (админка – в левом меню выбираем пункт “Записи” – подпункт “Добавить новую”), здесь переходим во вкладку “Текст”:

И разместить в нем код иконки, указав необходимый “класс”:

<span class="dashicons dashicons-smiley"></span>

Как изменить размер и цвет иконки?
Так как иконки – векторные – то увеличение ее размера – не повлияет на качестве иконки.

Для этого достаточно указать для иконки дополнительные стили, например вот так:

<span class="dashicons dashicons-smiley" style="font-size:120px;color:#0074a2;display:inline;"></span>

Как изменить иконки в панели управления (админке) wordpress?

Для этого вам нужно будет зайти в папку вашего сайта “\wp-includes\css\” – для этого можно воспользоваться “Файловым менеджером”, который есть на большинстве хостингах или же воспользоваться бесплатной программой — FileZilla (Total Commander или др.) – и отредактировать файл “dashicons.min” (бесплатный редактор кода NotePad++ или его аналоги).

При редактировании файла “dashicons.min” нам потребуется знать код иконки, которой мы изменяем и на которую хотим поменять.

Для примера, давайте изменим иконку пункта “Записи”:

Переходим на сайт “developer.wordpress.org/resource/dashicons” и ищем иконку “Записи”:

Код иконки “Записи” – “f109”.

Для поиска кода иконки также можно было бы воспользоваться “Инструментами разработчика”, встроенными в любой браузер – для их вызова нужно кликнуть правой клавишей мыши и выбрать пункт “Просмотр кода элемента” или нажать сочетание клавиш CTRL+SHIFT+I, а далее выбрать инструмент лупа и навести на иконку пункта “Записи”.

Далее вам нужно выбрать иконку, которую вы хотите поставить вместо иконки записи, давайте выберем вот такую:

Код данной иконки “f328”.

Все что нам осталось сделать – это заменить в файле “dashicons.min” код f109 на код f328, поэтому скачиваем файл “dashicons.min” к себе на компьютер, открываем его редактором кода NotePad++ (или его аналог), в нем можно воспользоваться функцией поиска – пункт “Поиск”, подпункт “Найти…”, в строку поиска вводим f109, находим код и меняем его на f328, сохраняем:

а далее закачиваем файл “dashicons.min” обратно на сервер сайта.

Теперь заходим в админку и любуемся результатом:

PS: Вышеуказанным способом можно менять иконки по всей админке – достаточно поменять их код в файлах, расположенных в папке “\wp-includes\css\”, например за иконки “Редактора” при Добавлении записей/страниц отвечает файл – editor.min.

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