Векторные иконки -Dashicons. Подключение и использование в Wordpress

Векторные иконки -Dashicons. Подключение и использование в Wordpress

wordpress-dashicons-2

Dashicons – это набор векторных иконок которые используются в ядре Wordpress начиная с версии 3.8, вы можете их видеть в меню админ-панели вашего сайта на Wordpress.

2015-07-10

Но в этом наборе векторных иконок есть еще много интересных и полезных иконок кроме тех которые используются в админ-меню, к примеру иконки социальных сетей. А раз эти иконки уже есть в ядре Wordpress почему бы их не использовать в темизации или проста для оформления статей?

Подключение Dashicons иконок совсем не сложная задача. Вам нужно будет подключить css-файл находящийся по следующему пути – “/wp-includes/css/dashicons.min.css” к вашей текущей теме.  Существует несколько способов подключения css файлов:

1. Вариант: Откройте файл шаблона header.php в вашей теме и добавьте туда следующий код

<link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css' type='text/css' media='all'/>

2. Вариант: добавить в файл functions.php вашей темы код

function my_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'my_dashicons' );

После подключения файла dashicons.min.css к Вашей теме вы можете использовать Dashicons иконки, для этого достаточно добавить нужный класс к любому тегу-контернеру например к диву, я для этой цели использую тег <i></i>

Примеры иконок dashicons:

Код:

<i class="dashicons dashicons-welcome-view-site"></i>

Результат:

Код:

<i class="dashicons dashicons-download"></i>

Результат:

Код:

<i class="dashicons dashicons-rss"></i>

Результат:

Код:

<i class="dashicons dashicons-twitter"></i>

Результат: 

Код:

<i class="dashicons dashicons-cart"></i>

Результат: 

Но это лишь малая часть вариантов, полный список иконок и их классов можно посмотреть на сайте WordPress для разработчиков Dashicons, чтобы узнать нужный класс для вывода выберете нужную иконку из множества представленных на сайте и нажмите в верху страницы на ссылку Copy HTML в появившемся окне будет отображен тег с нужным вам классом для копирования

2015-07-10_20_11_33

Тут же можно найти коды иконок для CSS, котрый нужно вставлять следующим образом:

div {
content: "\f497";
}

На этом все, всем удачи.

2 комментария
  1. Приветик всем обитателям afirewall.ru ну и конечно главе портала 🙂

    Мне у Вас нравится и я тоже начала делать сайты, но я девочка…. Кстати зовут меня Алиса (в стране чудес) есть в ВК http:/vk.com/id273409895 только не надо гадости писать, а так дружу общаюсь.

    Посмотрите и мой сайтик http:/like-magazik.ru/ начальный этап, кто хорошо знает все в этой сложно сфере напишите в ВК что поправить лучше.

    Глава сайт afirewall.ru с Новым 2016 годом, успехов в делах с сайтом 🙂

  2. wp_enqueue_style( ‘dashicons’ ); не работает…..

    заменил на
    wp_enqueue_style(‘mydashicons’,’/wp-includes/css/dashicons.min.css’);

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *