HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

WordPressでアイコンフォントを導入する方法

アイコンサイズの小さい画像使うなら、アイコンフォントが何かと便利です。WordPressにアイコンフォントを導入する方法をまとめてみました。

管理画面に導入されているDashiconsを使う方法

アイコンフォントをWordPressで使うなら、既にWordPressに同梱されているものを使うのがオーソドックスです。

実は、WordPressにはDashicons というアイコンフォントが導入されています。

管理画面で使われています。
2015-09-19_1441

Dashiconsは、テーマの中に埋め込んだり、投稿の中で絵文字のように使うことも出来るのです。

functinon.phpに少し書き込めば準備完了

Dashiconsを利用する準備は簡単。fnctinon.phpに以下の書き込みをすればOKです。

//Dashiconsを使用できる状態にする
add_action( 'wp_enqueue_scripts', 'load_dashicons' );
function load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

あとは、使いたいアイコンを選んでコピペするだけ

準備が出来たら、アイコンを表示するためのソースを取りに、下記サイトに行きましょう。

[img-link url=”https://developer.wordpress.org/resource/dashicons/#admin-appearance” title=”WordPress › Dashicons | WordPress Developer Resources”]

下スクロールして、使いたいアイコンを選んでください。今回は、開閉するメニューなどによく使われるものを選んでみました。
2015-09-19_1452

アイコンを選んだ瞬間、ページトップまで上スクロールします。「Copy HTML」をクリックしてください。
2015-09-19_1454

すると、次のようなアラートが出て、アイコンフォント表示用HTMLソースが表示されます。ソースをコピーしましょう。
2015-09-19_1456

あとは、テーマや投稿の中の、アイコンフォントを表示したい場所に、ソースを貼り付けるだけです。

簡単ですね。

プラグイン「WP Visual Icon Fonts」で導入する方法

functinon.phpを弄るのに不安がある方は、プラグインでアイコンフォントを導入するのがいいかもしれません。それなら「WP Visual Icon Fonts」がおすすめです。

WP Visual Icon Fontsのインストール・有効化・フォント選択

皆さんおなじみWordPress左サイドバー「プラグイン」⇒「新規追加」からインストール・有効化。

プラグインを有効化したら「設定」⇒「Icon Font」と進み、使用するアイコンフォントを選択します。種類が豊富なFont Awesomeを選ぶのが無難。選択したら「変更を保存」ボタンを押します。
2014-03-30_1053

アイコンフォントの入力

投稿編集画面に行くとテキストエディタでもビジュアルエディタでも「メディアを追加」ボタンの右に「icons」ボタンが現れます。(当記事では以下テキストエディタのキャプチャを載せています。)
2014-03-28_2218
「icons」ボタンを2回クリックするとドロップダウンリストが現れます。入力したいアイコンを選択します。私はambulanceを選択しました。
2014-03-28_2220
すると、テキストエディタの場合はアイコンフォントを表示するのに必要なHTMLが自動入力されます。

&nbsp;<i class="fa fa-ambulance"><span style="color:transparent;display:none;">icon-ambulance</span></i>&nbsp;

出力結果のキャプチャは以下の通りです。きちんとambulance=救急車のアイコンが表示されました。
2014-03-28_2223

赤くしてみる

CSSの知識があれば、アイコンフォントの見た目を色々弄れます。例えばstyle=”color:red;”という記述を加えてみると

&nbsp;<i class="fa fa-ambulance" style="color:red;"><span style="color:transparent;display:none;">icon-ambulance</span></i>&nbsp;

救急車が赤く染まりました。
2014-03-28_2251

大きくしてみる

また、font-size:50px;を書き加えると

&nbsp;<i class="fa fa-ambulance" style="color:red;font-size:50px;"><span style="color:transparent;display:none;">icon-ambulance</span></i>&nbsp;

救急車が大きくなりました。
2014-03-28_2253

テーマファイルでアイコンフォントを使うのも簡単

WP Visual Icon Fontsを利用すれば、テーマファイルでアイコンフォントを使うのも簡単です。

テキストエディタで自動入力されるアイコンフォント表示用のhtmlをコピーしてテーマファイルに貼り付けると、テーマファイルでもアイコンフォントが表示されます。

アイコンを使うなら画像ではなくWEBフォントで

「WP Visual Icon Fonts」は、ダウンロード・有効化するだけで、アイコンフォントを使い始めることが出来ます。

アイコン画像をフォントに置き換えれば多少の高速化も期待できます。

未だ使っていない方は是非お試しを。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: