WordPressの記事内でFont Awesome Iconsを使用する方法


スポンサーリンク


 当サイトのテーマはsimplicity2を使用しています。

Font Awesome Iconsとは、アイコンを画像ではなく文字認識として表示可能なフォントを一覧にしたものです。約数百種類以上のアイコンが用意されています。

例えば

 フォルダ  icon-folder-open  ペン icon-pencil-square-o   矢印 icon-arrow-circle-o-right   旗 icon-flag-checkered  等々・・・

 記事作成中にテキストエディタから直接Font Awesome Iconsが選択する方法を下記に記します。

TinyMCE Advancedプラグインを導入する

 TinyMCE Advancedプラグインとは、Wordpressの記事投稿画面で、フォントサイズや背景色等の編集ボタンの種類を増やし、HTMLの知識がない方でも簡単に挿入できるようになります。プラグインの新規追加より、下記のプラグインをインストールします。

tiny

導入が完了したら、エディタにFontAwesomeを使用するためのプラグインを導入します。

WP Visual Icon Fontsプラグインを導入する

  次にプラグイン新規追加よりWP Visual Icon Fontsをインストールします。

kizi2

プラグインをインストールすると、記事投稿画面のエディタに下記のように、「メディアを追加」ボタンの隣に「Icons」が選択できるようになります。

kizi3

スポンサーリンク

実際にFont Awesome Iconsを使ってみた

 エディタに追加されたので、Iconsをクリックしてプルダウンで選びます。

使用頻度の高い矢印のアイコンは「arrow」と入力するといくつか候補がでます。

 「icon-arrow-left  icon-arrow-down  icon-arrow-up  icon-arrow-right 」

kizi5

 棒無しの矢印の場合は「chevron」と検索します。

  「icon-chevron-down  icon-chevron-left  icon-chevron-right  icon-chevron-up 」

kizi6

以上となります。ぜひ自分のお気に入りのFontAwesomeを見つけてみて下さい♪

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

    スポンサーリンク
    スポンサーリンク