【Wordpress Tips】WordPress公式アイコンフォント [Dashicons]

[公開] 2024-07-10 / [更新] 2024-08-16

サイト作成時に何かと必要になるアイコン。でも、都度画像にすると管理も手間も大変 ><
そんな時便利なのがアイコンフォント。

でも、どれを利用していいかわからない、都度探すのが大変、読み込みスピードが、、、なんて時、WordPress公式アイコンフォントの [ Dashicons ] がお勧めです。

WordPress [ Dashicons ] とは

WordPressには管理画面用のアイコンフォント [Dashicons]が規定で入っています。
これ、ちょこっと設定するだけでフロントでも利用可能。読み込みスピードや管理の手間も軽減できる ? かも^^;

Dashicons

サイズや色などは、通常のテキスト同様にcssで設定するだけ。
メチャ楽ちんです^^v

最初にフロントで使えるよう functions.php に記載します。

PHP

function mytheme_enqueue_dashicons() {
  wp_enqueue_style('dashicons');
}

選択すると拡大が出ますので、その横の「Copy HTML」をクリック。
コードをコピペすればOKです。

HTML code

<span class="dashicons dashicons-アイコン名"></span>

選択すると拡大が出ますので、その横の「Copy CSS」をクリック。
コードをコピペして font-family: "dashicons"; を記載します。

CSS code

.class-name {
  content: "\f504";
  font-family: "dashicons";
}