WordPressに入っているアイコンフォントdashiconsを使う方法

この記事は約5分で読めます。
この記事は最終更新日から7年経過しています。内容が古い可能性があります。

「使わないテーマを削除して更新作業を少なくしよう!」という記事を書いたときに、アドミンバーに表示されているアイコンフォントをなんとかしてblogで書けないかな~といろいろ苦労しました。WordPressにはdashiconsというアイコンフォントが入っていて、管理画面などではたくさん使われています。
そのアイコンを自分が好きなところで使えるようにするにはどうすればいいの?ということを試してみました。

スポンサーリンク

子テーマでdashiconsを使えるようにする方法

「使わないテーマを削除して更新作業を少なくしよう!」という記事を書いていて、ダッシュボードに表示される更新のマークblogの記事中に表示したいと思いました。

このマークです。

管理画面に表示されている更新マークのアイコン部分のソースを見てみました

<li><a href='update-core.php'>更新 <span class='update-plugins count-4' title='3件のプラグイン更新, 翻訳の更新'><span class='update-count'>4</span></span></a></li>

こんな感じのソースでした。この部分をコピーしてペーストしてみましたが、表示されませんでした。classでこのマークがでるようにしているのでそりゃそうかな(^_^;、と思いました。ちゃんと調べると、

#wpadminbar #wp-admin-bar-updates .ab-icon:before {
   content: "\f463";
   top: 2px;
}

こんな感じにアイコンフォントが表示されるようにclassで指定しているみたいです。

同じようにclassで表示してみようと思いました。子テーマのstyle.css

.ryus_dashicons_f463:before {
    font-size:1rem;
    font-family:"dashicons";
    content: "\f463";
}

このclassを追加しました。ググってしらべたところこのアイコンは dashicons というWordPressが管理画面で使っているアイコンフォントだということがわかったのでfont-familyで指定します。

また、dashiconsを読み込むためには、functions.php

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

を追加します。

これで

このように固定ページや投稿ページテキストタブで記述すると、

こんな感じにアイコンフォントの更新マークが頭に付いて表示されました。

dashiconsのアイコンフォントの一覧

blogを書いたときはこれしかしていなかったのですが、WordPressのアイコンフォントが使えるなら一覧をみつけていろいろ使ってみたいなと思いました。

検索してこちらのページを見つけました

https://developer.wordpress.org/resource/dashicons/

ここにdashiconsのすべてのアイコンフォントが表示されています。

使いたいアイコンフォントを見つけたら



クリック
すると

大きく表示されます。

Copy HTML をクリックすると

こんな感じにコピーすると使えそうなコードが表示されます。

<span class="dashicons dashicons-facebook"></span>

このコードをコピーして投稿のテキストタブに貼り付けてみると

Facebookのアイコンフォントが表示されました。

cssを作らなくてもずっと簡単にアイコンフォントを表示することができます(^^)/

落とし穴。ログイン中は表示されるけれど…

この表示はテーマを変更した場合はどうなるんだろう?とテーマを変更して表示してみました

ちゃんと表示されます。あれれ?テーマを変えても表示されるならば、子テーマのfunctions.php

    wp_enqueue_style('dashicons');

このへんをやらなくても大丈夫なんじゃないかな?でもおかしいな?と思って別のブラウザ(ログインしていない状態)で見たところ、

表示されていませんでした(^_^;。同じブラウザのchromeシークレットモードで見ても

と、表示されていません。つまり、ログイン中

ツールバーを表示する時にダッシュアイコンが使われているので、ダッシュアイコンが読み込まれている、しかしログインしていなければ読み込まれていないので表示されない、ということみたいです。

ログインして記事を書いて表示確認をしていたので、最初この落とし穴にはまって数日アイコンを表示したつもりで表示されていない状態でした!

まとめ:ダッシュアイコンを使う方法をまとめると

ということでダッシュアイコンを使う方法をまとめます。

ログインしていなくても見ることのできる投稿や固定ページでダッシュアイコンを使いたいときは、利用中の子テーマでダッシュアイコンを読み込みます。

dashiconsを読み込むために、子テーマのfunctions.php
 

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

これを追加します。

あとは「dashiconsのアイコンフォントの一覧」で書いたページで使いたいアイコンのHTMLをコピーして投稿や固定ページのテキストタブにペーストするだけでダッシュアイコンが表示されます。

もしも管理画面やログインした人だけが見るコンテンツならばdashiconsを読み込まなくてもHTMLをコピーしたものを貼り付けるだけで、どのテーマでも表示させることができます。ログイン中はdashiconsが自動的に読み込まれているからです。

[amazon_searchlink search=”WordPress”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPressテーマ全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。