В последнее время на форуме встречается куча тем рекламного характера. Какая-то доска объявлений прям. Поэтому я решил размять пальцы и рассказать о такой классной штуке как 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+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|