Что нового WordPress 3.8? Dashicons иконки заменяют привычные картинки

Сегодня речь пойдёт о довольно устаревшем обновлении WordPress 3.8. Что сподвигло меня на написании статьи о версии далекого 2013, спросите вы?

Очень многие пользователи WordPress и знать не знали о том, что же нового сделали для нас разработчики! Да да, даже будучи обновленными до версии 4.4.2. Не мне судить о причинах этого — но я попытаюсь это исправить и наверстать упущенное

И так, ближе к делу. Разберемся по порядку:

Нововведения в WordPress 3.8

Внешний вид. Да, разработчики позаботились непосредственно об администраторах блогов. В этом обновлении внешний вид улучшился:
- Новый крупный шрифт Open Sans;
- векторные иконки
- 8 различных цветовых схем;
- адаптивность панели администрирования

Подключение Dashicons

Подключить необходимый CSS файл необходимо таким образом:

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

function my_dashicons() {

wp_enqueue_style( 'dashicons' );

}

add_action( 'wp_enqueue_scripts', 'my_dashicons' );

Этот способ, как вы уже догадались, с помощью функции. Для тех, кто не знает это нужно вставить в ваш файл functions.php

Как же их использовать? Выбрав симпатичную иконку здесь, можно пойти по двум пути:

Получив CSS нашей иконки. Полученный параметр необходимо вставить в нужный нам блок. К примеру вот так:

.widget_meta h1<strong>:before</strong>{
    <strong>content: "\f310";     //сам адрес иконки</strong>
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 30px;
    line-height: 1;
<strong>    font-family: dashicons;     //веб-шрифт наших иконок</strong>
<strong>    -webkit-font-smoothing: antialiased;     //"делает текст более утонченным (префикс для Opera, Chrome, Safari)"</strong>
<strong>    -moz-osx-font-smoothing: grayscale;      //"делает текст более утонченным (префикс для Mozilla)"</strong> 
}

.widget_meta h1:before{

content: "\f310"; //сам адрес иконки

display: inline-block;

width: 20px;

height: 20px;

font-size: 30px;

line-height: 1;

font-family: dashicons; //веб-шрифт наших иконок

-webkit-font-smoothing: antialiased; //"делает текст более утонченным (префикс для Opera, Chrome, Safari)"

-moz-osx-font-smoothing: grayscale; //"делает текст более утонченным (префикс для Mozilla)"

}

Про префиксы webkit и ~moz и других расскажу немного позже подробно — это очень важно и требует отдельного урока.

Получив HTML-фрагмент кода. Это может выглядеть примерно так:

...
<div class="my_block">
<strong><span class="dashicons dashicons-universal-access"></span>     //вот он</strong>
</div>
...

...

//вот он

</div>

...

Вот и всё! Изменять размер, цвет иконок, и другие свойства — также легко можно, обратившись как к самому CSS иконки, так и в своём CSS!

Надеюсь я помог вам разобраться с этим и сделать свой проект удобнее и лучше.

Подписывайтесь, скоро будет много интересного!

Подписаться на новости

Что нового WordPress 3.8? Dashicons иконки заменяют привычные картинки

Нововведения в WordPress 3.8

Подключение Dashicons

Это интересно

Отправить ответ