Feedlyでいつも楽しみに購読させて頂いている「WordPressなら最高！」さんのこちらの記事を見てやってみました！！

１番目に紹介されている「WordPress Visual Icon Fonts」というプラグインを使えば、編集画面でアイコンフォントを挿入できるのだそうです。

Sponsored Link

「WordPress Visual Icon Fonts」の特長

プラグインの特長

• 編集画面から簡単にアイコンを検索、挿入できる
• アイコンフォントの種類が豊富！！
• 大きさや色も簡単に変えることができる

プラグインのインストールと設定方法

設定についてはこちらのページを参考にさせていただきました。

参考記事

「ダッシュボード」→「プラグイン」→「新規追加」→「検索」→「インストール」→「有効化」します。

プラグインを使う準備が整いました。

設定は「設定」プラグイン名をクリック

選べるウェブフォントは2種類

オプション設定画面はいたってシンプルです。

２種類のウェブフォントから使いたい方を選びます。

• Font Awesome
• Genericons

とりあえず、左のFontAwesomeを選択し、変更を保存。Genericonsも丸みがあってかわいいウェブフォントがたくさんありました。

余談ですが、FontAwesomeのページにとんだ時、Google翻訳で勝手に翻訳され、こんな画面が…（笑）

恐ろしいフォントなら遠慮したいです…

ちなみに「Awesome」とは、「畏怖の念を起こさせる、とか、荘厳な、すばらしい」と言う意味だそうです。

WordPress Visual Icon Fontsの使い方

インストールすると投稿の編集画面に「icons」ボタンが表示されます。

iconsボタンをクリックすると、様々なiconが下にドロップダウンして出てきます。

使いたいアイコンフォントを選びます。

本のアイコンをクリックすると、本文に挿入され、ビジュアルエディタでアイコンを確認できます。

この時、テキストエディタで見てみると、このようなコードが書かれていました。

（再びビジュアルエディタに戻り）色を変えたいときは、フォントカラーのボタンから

アイコンの大きさは文字サイズで変更できます。

実際のサイトで表示を見てみると…アイコンが挿入され、選んだ色と大きさで表示されています。

まとめ〜まるで絵文字感覚でアイコンを使うことができる

アイコンが入るだけでなんだか楽しいし、ちょっとひと休みできますね。 icon-coffee 

私が使っているWordPressテーマ「el plano」でもアイコンフォントを簡単に使える仕様になっています。(外部スタイルシートを読み込んで表示）テキスト編集画面でHTMLコードを記載する、アイコン名を一つ一つ入力することが必要です。せっかくのテーマの機能ですが、まだ使えていないので、今度試してみようと思います。

このプラグインでは、絵文字感覚でアイコンフォントを使えてきて便利。

もう少し使い道を研究してみたいと思います。