Базовые иконки WordPress


Очень часто случается, что нам нужно добавить на сайт простую иконку, например стрелочку, крестик или значок facebook. Да, в интернете полно такого рода иконок, но мы также можем использовать те, которые есть в WordPress по умолчанию.

Для вывода иконок нам нужно будет подключить шрифт dashicon, который уже есть в файлах WordPress и дальше только использовать CSS. Для начала нам нужно подключить нужный шрифт.

function rb_add_dashicons() {
    wp_enqueue_style( 'dashicons' ); //всё просто - шрифт уже зарегистрирован и нам нужно его только подключить
}
add_action( 'wp_enqueue_scripts', 'rb_add_dashicons' );

Теперь мы можем свободно использовать этот шрифт в CSS:

.rb-arrow{
  border: 1px solid #FF9432;
  padding: 12px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-block;
  position: fixed;
  right: -120px;
  bottom: 40px;
  cursor: pointer;
}

.rb-arrow:before{
  content: "\f342"; /* тут мы указываем номер иконки */
  font-family: "dashicons"; /* важно подключить шрифт */
  width: 20px;
  height: 20px;
  color: #FF9432;
}

Результатом этого кода будет:

Более точно понять какую именно иконку вы сможете подключить сможете подглядеть на этой странице – https://developer.wordpress.org/resource/dashicons/#networking