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

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

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

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

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

管理画面で使われています。

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

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

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

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

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

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

WordPress › Dashicons | WordPress Developer Resources

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

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

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

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

簡単ですね。

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

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

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

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

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

アイコンフォントの入力

投稿編集画面に行くとテキストエディタでもビジュアルエディタでも「メディアを追加」ボタンの右に「icons」ボタンが現れます。（当記事では以下テキストエディタのキャプチャを載せています。）

「icons」ボタンを２回クリックするとドロップダウンリストが現れます。入力したいアイコンを選択します。私はambulanceを選択しました。

すると、テキストエディタの場合はアイコンフォントを表示するのに必要なHTMLが自動入力されます。

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

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

赤くしてみる

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

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

救急車が赤く染まりました。

大きくしてみる

また、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;

救急車が大きくなりました。

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

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

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

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

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

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

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