Векторные иконки -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
Как сделать рерайт текста и не облажаться

Рерайт текста не только поможет начинающим блоггерам обрести опыт в написании статей для собственного блога, но это и способ заработка в интернете. Меня иногда спрашивают начинающие

Web-Дизайн
help2site
Слайдер на чистом CSS 3, без JS и JQuery.

Сегодня мы рассмотри ещё один слайдер на чистом CSS3, но на этот раз мы готовы сломать все стереотипы о том, что каждый раз когда мы

Web-Дизайн
help2site
Фильтр «Яндекса» АГС и способы вывода из него сайта

АГС является фильтром, который используется в поисковой системе «Яндекс». Этот фильтр предназначен для того, чтобы снизить фактор стороннего влияния на выдаваемые поисковиком результаты. Благодаря АГС

iOS
help2site
Полный обзор Ipad 3

Сегодня я хочу поговорить о долгожданном Ipad 3. В настоящее время насчитывается около 60 миллионов владельцев по всему миру. Айпад 3-го поколения стал популярным в начале 2011

Оборудование
help2site
Как узнать какая у меня видеокарта

Оглавление Каждый второй пользователь рано или поздно задается этим вопросом. Как узнать какая у меня видеокарта? Вот верные способы, которые помогут Вам понять какая видеокарта

Оборудование
help2site
Разгон встроенных видеокарт от Intel

В основном практически все новые ноутбуки, относящиеся к бизнес классу имеют встроенную то есть интегрированную видеокарту на которой даже игры 2007 года не поиграешь. Но