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

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

Но в этом наборе векторных иконок есть еще много интересных и полезных иконок кроме тех которые используются в админ-меню, к примеру иконки социальных сетей. А раз эти иконки уже есть в ядре 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'/>

				
			
  1. Вариант: добавить в файл 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 в появившемся окне будет отображен тег с нужным вам классом для копирования.

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

				
					div {
content: "\f497";
}
				
			
На этом все, всем удачи.
Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Интернет
help2site
Как рассчитать скорость Интернета

Принципы расчёта скорости интернет-соединения Главное, что необходимо знать, это минимальную единицу измерения данных, которая составляет бит. Собственно, скорость может изменяться в битах за секунду, но

Диагностика
help2site
Защита смартфона

Уже давно принято считать, влияние вирусов или вредоносных программ, неизбежной частью жизни при использовании персональных компьютеров. Как насчет мобильного телефона? Хотя, не все вирусы или

Настройка
help2site
Все CMD команды

В этом разделе собран полный список CMD команд Windows от А до Я. Также будут добавлены команды Linux. Оглавление A append — позволяет программам открывать

Оборудование
help2site
Факты про планшеты

Планшеты на мировом рынке стали популярными буквально несколько лет назад, и первое время их уверенно называли «убийцами ПК». Однако уже сейчас эксперты склоняются к тому,

Windows
help2site
Установка Windows 8 с флешки

Операционная система Windows 8 вышла около месяца назад и за свое недолгое существование получила множество негативных отзывов. Многим пользователям довольно таки сильно не понравился новый

Программы
help2site
10 программ-приколов

Этот пост публикуется в связи с приближающимся 1 апреля. Как известно, это день розыгрышей и различных приколов. Так почему бы не разыграть друга, коллегу или