Wordpress

2020.08.17

WordPress のアイコンフォント「Dashicons」を使う

この記事は1319日前に投稿されたものです。

Dashiconsはwordpressの公式のアイコンフォントでテーマや記事内でも使用できます。

Dashiconsを使用するための準備

DashiconsのCSSをテーマに読み込むためのコードをfunction.phpに追加します。実際のサイトで<head>内にdashicons.min.cssのリンクの記述があれば、準備はOK!

function.php

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

使い方は2種類

CSSの擬似要素「::before」「::affter」で表示

aに追加する場合

a::before{
    font-family: "dashicons";
    content: "\f469";
}

このブログでも公開日の前に:beforeで時計のアイコンを付けています。

タグにクラスを追加:「dashicons」か「dashicons-before」

dashiconsは単体で表示。dashicons-before::beforeで表示。

dashboardアイコンの場合

<p class="dashicons-before dashicons-dashboard"></p>

 ← こんな感じで表示されます。位置はちょっとcssで整えないといけないかも・・・。

アイコンフォント一覧

アイコン一覧は公式サイトにあります。「Copy CSS」「Copy HTML」のボタンからコピーして、CSSやHTMLにペーストすれば使用できます。