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

更新

アイコンサイズの小さい画像使うなら、アイコンフォント1が何かと便利です。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' );
}

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

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

下スクロールして、使いたいアイコンを選んでください。今回は、開閉するメニューなどによく使われるものを選んでみました。
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」は、ダウンロード・有効化するだけで、アイコンフォントを使い始めることが出来ます。

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

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


  1. アイコンフォントとは…普通のWebフォントでは「A」キーには「A」という文字が対応しています。もちろんフォントごとに字体は異なります。中には相当にデフォルメした「A」を表示するWebフォントもあります。
      このデフォルメの究極の姿として、「A」キーにアイコン画像を対応させたWebフォントがあるのです。こういうのをアイコンフォントと言います。
      アイコンフォントを使うと、自前でアイコン画像を用意するのに比べてとても簡単にアイコンを表示することが出来ます。
      また、アイコンフォントはあくまでフォントなので、アイコンサイズの画像の代わりに使うことで、サイトの高速化にも役立ちます。 

WordPressでアイコンフォントを導入する方法」への3件のフィードバック

  1. ピンバック: 【ウェブ制作】SEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ - ゆめぴょんの知恵

  2. ピンバック: スマホサイトのメニューをフッター固定のスライド式に変更しました!

  3. ピンバック: WordPressでアイコンフォントを導入する方法 | ミリオンハイスクール | ネットビジネス | WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です