2020.08.17

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

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

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' );
}

aに追加する場合

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

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

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

dashboardアイコンの場合

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

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

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