Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 72 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #5

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 33 Вне конкурса за определение пользователя месяца

  • Фотография Developer
    #7

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #8

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография TimurR
    #9

    TimurR
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


Dashicons - используем крутые векторные иконки от WordPress

#1 TimurR

TimurR
  • Пользователь PRO
  • 965 сообщений
  • Репутация: 232
0

Отправлено 23 December 2014 - 18:30

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

 

Что такое Dashicons и как с ними работать? 

Как я уже сказал это веб-шрифт. Весь список иконок можно найти тут https://developer.wo...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 и далее класс-название иконки. Для примера, возьмем значок замка:

57c389c9c88b.jpg

Таким образом вставив в нужном месте темы <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 к конкретным элементам в меню. Если есть вопросы или в статье какие-то ошибки пишите исправим и разберемся :).


 

 

  • 0

Разработка сайтов.




Оформление форума – IPBSkins.ru