Главная » Wordpress » Как вывести стандартные Dashicons-иконки на WordPress?

Как вывести стандартные Dashicons-иконки на WordPress?

2015-07-13 / Вр:09:12 / просмотров: 13486

Так как я разрабатываю под заказ шаблоны (темы) на WordPress, я открыл для себя новую возможность – набор иконок «Dashicons», которые стоят по умолчанию на wordpress, начиная с версии 3.8. Эти иконки можно увидеть в админ-панеле WordPress.

Как вывести стандартные Dashicons-иконки на WordPress?

Примерное число иконок около 200 шт.
Преимущество иконок «Dashicons» в том, что они остаются в хорошем качестве, независимо от размера, который вы укажите в CSS-стилях.
Для админ-панели иконки «Dashicons» можно использовать сразу без подключения, а вот если вы хотите использовать иконки в шаблоне (теме), то нужно их подключить.

Как подключить иконки «Dashicons» к шаблону (темы)

Для того, чтобы использовать иконок «Dashicons» не только в админ-панеле, но и на блоге или сайте, вам нужно подключить css-файл «/wp-includes/css/dashicons.min.css»:

Как вывести стандартные Dashicons-иконки на WordPress?

Делается это двумя способами.
1 способ.
Подключение иконок «Dashicons» можно осуществить через файл шаблона «header.php». Добавьте между тегами <head></head> вот этот код:

<link rel="stylesheet" href="/wp-includes/css/dashicons.min.css" ENGINE="text/css">

2 способ.
Подключение иконок «Dashicons» можно осуществить через файл «functions.php». Вставьте вот этот код перед знаком «?>»:

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

После подключения иконок можно приступить к их выводу на блог.

Как вывести иконки «Dashicons»

○ Для HTM:

Вставляете специальный класс «dashicons» и «dashicons-*», где «*» - название иконки (название иконки см. в таблице ниже):

<span class="dashicons dashicons-calendar"></span>

Или так:

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

Можно и так:

<div class="dashicons dashicons-calendar"></div>

Результат:

Если нужно увеличить иконку и поменять цвет, сделайте вот так:

<i class="dashicons dashicons-calendar" style="font-size:80px;color:#ffa500;display:inline;">
</i>

Или так:

<span class="dashicons dashicons-calendar" style="font-size:80px;color:#ffa500;display:inline;"></span>

Или так:

<div class="dashicons dashicons-calendar" style="font-size:80px;color:#ffa500;display:inline;">
</div>

font-size – размер иконки
color – цвет

○ Для CSS:

Добавьте:

.bloggood-ru-myicon1:before { 
 content: "\f303";
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 22px/1 'dashicons';
 vertical-align: top;
 }

bloggood-ru-myicon1 – это класс. Замените на свой
:before – иконка будет добавляться перед элементом (:after – иконка будет добавляться после элемента)
\f303 – код иконки (смотрите таблицу ниже)
font – размер и название шрифта. Обязательно укажите «dashicons»

Давайте посмотрим таблицу иконок. Вы можете посмотреть на официальном сайте WordPress либо у меня на блоге:

Таблица иконок «Dashicons»

Вид иконки	НТМL код	CSS код
	dashicons-menu	\f333
	dashicons-admin-site	\f319
	dashicons-dashboard	\f226
	dashicons-admin-post	\f109
	dashicons-admin-media	\f104
	dashicons-admin-links	\f103
	dashicons-admin-page	\f105
	dashicons-admin-comments	\f101
	dashicons-admin-appearance	\f100
	dashicons-admin-plugins	\f106
	dashicons-admin-users	\f110
	dashicons-admin-tools	\f107
	dashicons-admin-settings	\f108
	dashicons-admin-network	\f112
	dashicons-admin-home	\f102
	dashicons-admin-generic	\f111
	dashicons-admin-collapse	\f148
	dashicons-welcome-write-blog	\f119
	dashicons-welcome-add-page	\f133
	dashicons-format-aside	\f123
	dashicons-format-image	\f128
	dashicons-format-gallery	\f161
	dashicons-format-video	\f126
	dashicons-format-status	\f130
	dashicons-format-quote	\f122
	dashicons-format-chat	\f125
	dashicons-format-audio	\f127
	dashicons-camera	\f306
	dashicons-images-alt2	\f233
	dashicons-video-alt	\f234
	dashicons-video-alt2	\f235
	dashicons-video-alt3	\f236
	dashicons-media-archive	\f501
	dashicons-media-audio	\f500
	dashicons-media-code	\f499
	dashicons-media-default	\f498
	dashicons-media-document	\f497
	dashicons-media-text	\f491
	dashicons-media-video	\f490
	dashicons-playlist-audio	\f492
	dashicons-playlist-video	\f493
	dashicons-controls-volumeon	\f521
	dashicons-controls-volumeoff	\f520
	dashicons-editor-video	\f219
	dashicons-lock	\f160
	dashicons-calendar	\f145
	dashicons-calendar-alt	\f508
	dashicons-visibility	\f177
	dashicons-post-status	\f173
	dashicons-edit	\f464
	dashicons-trash	\f182
	dashicons-list-view	\f163
	dashicons-twitter	\f301
	dashicons-rss	\f303
	dashicons-email	\f465
	dashicons-email-alt	\f466
	dashicons-facebook	\f304
	dashicons-googleplus	\f462
	dashicons-networking	\f325
	dashicons-hammer	\f308
	dashicons-universal-access	\f483
	dashicons-universal-access-alt	\f507
	dashicons-tickets	\f486
	dashicons-nametag	\f484
	dashicons-clipboard	\f481
	dashicons-heart	\f487
	dashicons-megaphone	\f488
	dashicons-wordpress	\f120
	dashicons-wordpress-alt	\f324
	dashicons-update	\f463
	dashicons-info	\f348
	dashicons-cart	\f174
	dashicons-cloud	\f176
	dashicons-translation	\f326
	dashicons-tag	\f323
	dashicons-location	\f230
	dashicons-shield	\f332
	dashicons-search	\f179
	dashicons-chart-pie	\f184
	dashicons-chart-bar	\f185
	dashicons-groups	\f307
	dashicons-businessman	\f338
	dashicons-testimonial	\f473
	dashicons-portfolio	\f322
	dashicons-book	\f330
	dashicons-book-alt	\f331
	dashicons-download	\f316
	dashicons-upload	\f317
	dashicons-clock	\f469
	dashicons-lightbulb	\f339
	dashicons-microphone	\f482
	dashicons-desktop	\f472
	dashicons-smartphone	\f470
	dashicons-phone	\f525
	dashicons-carrot	\f511
	dashicons-store	\f513
	dashicons-palmtree	\f527
	dashicons-album	\f514
	dashicons-smiley	\f328