BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Так как я разрабатываю под заказ шаблоны (темы) на 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" type="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

Выбрал самые ходовые иконки, а остальные вы можете посмотреть на официальном сайте.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 747
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4092