встроенные в wordpress иконки

Иконки встроенные в wordpress

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


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

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

встроенные в wordpress иконки

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

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

класс иконки как узнать

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

ikonki5

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

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

редактор записи wordpress

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

<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» нам потребуется знать код иконки, которой мы изменяем и на которую хотим поменять.

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

изменить иконки в админке wordpress

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

изменяем иконки админки wordpress без плагинов вручную

Код иконки «Записи» — «f109».

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

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

меняем иконки в админке wordpress без плагинов

Код данной иконки «f328».

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

меняем иконку в админке

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

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

как поменять иконку в админке без плагина

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

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc