[X] Помощник

[TimurR Topic Starter]

В последнее время на форуме встречается куча тем рекламного характера. Какая-то доска объявлений прям. Поэтому я решил размять пальцы и рассказать о такой классной штуке как Dashicons. Это набор векторных иконок, которые переставляют собой веб-шрифты описанные в CSS файле. Примерно тоже самое, что и Fontawesome, но только вам ненужно ничего дополнительно качать и подключать к вашей WordPress теме. Dashicons поставляется вместе с WordPress. Кстати, это векторные "изображения", поэтому можно их увеличивать и уменьшать сколько душе угодно. Все делается очень просто. 

Что такое Dashicons и как с ними работать? 
Как я уже сказал это веб-шрифт. Весь список иконок можно найти тут https://developer.wordpress.org/resource/da...cons/#list-view и там же их коды в юникоде. В принципе где их использовать всем понятно. Можно вставлять к элементам рубрики или в заголовок виджетов в сайдбаре, отмечать метки и рубрики. Есть два способа добавить значки в тему.

Но перед этим их нужно подключить. В файле functions.php вашей темы найдите строку где подключаются файлы стиле и скриптов и добавьте туда строчку:

wp_enqueue_style( 'dashicons' );

Примерно все выглядит так:

function load_dashicons () {
	wp_enqueue_style( 'dashicons' );
}

add_action ('wp_enqueue_scripts', 'load_dashicons');

Функцию можно назвать как угодно, если ее у вас еще нет (что маловероятно, если вы не верстаете тему с нуля). 

Чтобы значки отображались в теме, можно создать тег <span> c классом dashicons и далее класс-название иконки. Для примера, возьмем значок замка:

Таким образом вставив в нужном месте темы <span class="dashicons dashicons-lock"></span> вы получите эту иконку. А в CSS можно описать для нее правила. Например, цвет и размер. В CSS в ними можно работать также, как и с простым шрифтом. Такой способ использования удобен для циклов в WordPress. Т.е. когда есть статичные блоки, в которых просто выводятся разные ссылки. (Например, метки, рубрика, комментарии). Что делать, если вы хотите присвоить значок элементу меню, которое генерируется самим WordPress и у каждого элемента меню свой уникальный идентификатор (id)?

В принципе все очень просто. Можно использовать псевдоэлемент before или after CSS. (Советую ознакомится сначала с этими псевдоэлементами  http://htmlbook.ru/css/before). В CSS это будет выглядеть примерно так:

.header-menu ul li:before {
    content: "\f160";
	font: normal 18px/1 'dashicons';
	vertical-align: middle;
}

Свойство content содержит код шрифта в юникоде. На скрине во втором блоке выделенным зеленым, нажмите на "Copy CSS" и получите эту строку к выбранному элементу. 

Можно так обращаться по id к конкретным элементам в меню. Если есть вопросы или в статье какие-то ошибки пишите исправим и разберемся :).

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.