ダッシュアイコンの使い方【WordPress】

ダッシュアイコン(Dashicon)とは、WordPressに標準で備わっているアイコンセットです。ショートコードを埋め込めば、簡単にアイコンを表示させることができます。
Welcome
  • WordPressなら標準で利用可能
  • Font Awesomeを入れるほどでないときにいい。
  • FacebookやGoogleのアイコンもあり

ダッシュアイコン(Dashicon)のサンプル

以下は、ダッシュアイコンのサンプルです。



このようなアイコンを簡単に設置することができます。

ダッシュアイコンの使い方(手順)

1.function.phpへコードを追記

WordPressテーマの中に入っている「function.php」に以下のコードを加えます。

function.php
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

2.公式サイトへアクセスする

以下のWordPressの公式サイトのダッシュアイコンのページにアクセスします。

参考 DashiconsWordPress.org

3.アイコンを選ぶ

ページ下段に表示されるアイコンの中から、利用したいアイコンを選びます。
ダッシュアイコン

4.埋め込みスクリプトを表示させる

利用したいアイコンの隣に表示されるリンクをクリックすると、ショートコードが表示されます。ホームページに貼り付けて活用する場合は、以下のように「Copy Html」を選択してください。
ダッシュアイコン

5.コピペする

リンクをクリックすると、以下のようなポップアップが表示されますので、このコードを該当ページにコピー&ペーストすればOKです。
ダッシュアイコン

ダッシュアイコンの使いどころ

ダッシュアイコンは、WordPressの管理画面で利用されていますので、割とよく見かけると思います。これらをユーザーさんが閲覧できるホームページにも同様に表示できるところがいいところです。

Font Awesomeのような便利なアイコンセットもありますが、ダッシュアイコンは事前設定不要ですのでより便利です。

Font Awesomeの使い方【CSS/Html・サンプル付き】

まとめ

ダッシュアイコンはWordPressに標準で搭載されているアイコンセットです。Font Awesomeを利用するほどではないけれど、少し装飾したいときに便利です。

参考 How To Use Dashicons In WordPress: A Step-By-Step GuideWP Superstars