【Better Font Awesome】の使い方を図解解説！Webアイコンをサクッと設置できるWordPressプラグイン

この２つのテキストリンク、どちらが見た目きれいですか？

はい。下のテキストリンク前に矢印のアイコンがあったほうが、リンクだということを強調していてデザイン的にもスッキリしてきれいに見えますよね。

実はこのアイコン、画像ではなく「Font Awesome」というアイコンを文字として扱うことを可能にしたサービスを利用して設置しています。

この記事では「Font Awesome」のWebアイコンを投稿エディターで簡単に設置できるWordPressプラグイン『Better Font Awesome』のインストール手順、使い方（基礎編・応用編）について解説しています。

テキストリンクの前に矢印Webアイコンを使うことをおすすめします！

『Font Awesome』とは？

Font Awesomeとは、サイトやブログでよく使われているアイコンをアイコンフォントという文字として使うことができる画期的で超便利なツールです。

画像ではなく文字なので、大きさや色などを変更することが可能なので、SNSへの誘導や、見出しの前のアクセントなど、いろんな場面で使うことが出来ます。

FontAwesome5.9が今の最新バージョン

FontAwesome5.9は、2019年6月4日ににリリースされたFontAwesomeの最新バージョンで、421個の新しく改良されたアイコンが含まれています。

FontAwesome5.9には、無料プランと有料のPROプラン（年間99ドル）があります。

無料プランでも、1,534個のアイコンが使えるので十分ですね。

『Better Font Awesome』で出来ること

Font Awesomeは、定期的にアイコンが更新がされており、その都度新しいアイコンフォントが追加されていますが、『Better Font Awesome』は、最新のアイコンフォントを自動的に取得してくれる優れものです。

『Better Font Awesome』をインストールすると、投稿エディターのメニューに「insrt Icon」ボタンが追加され、ワンクリックでアイコンフォントを設置することができるようになります。

では、『Better Font Awesome』のインストール手順と使い方について説明しましょう。

『Better Font Awesome』のインストール手順

1. プラグイン＞新規追加をクリックします。
2. 『Better Font Awesome』を検索します。いちばん上に『Better Font Awesome』が表示されます。「今すぐインストール」をクリックしましょう。
3. 有効化をクリックしましょう。これで『Better Font Awesome』のインストールは完了です。

『Better Font Awesome』の使い方（基礎編）

1. 
   『Better Font Awesome』が有効化されると、記事投稿エリアのメニューに「Insert Icon」のボタンが追加されます。WEBアイコンを設置する場所を指定後、クリックしましょう。
2. WEBアイコンの一覧が表示されます。「Type to filter」にキーワードを入れてアイコンを検索することもできます。設置するWEBアイコンをクリックしましょう。
3. WEBアイコンのショートコードが表示されます。プレビューで確認してみましょう。
4. はい。指定したWEBアイコンがきれいに表示されました。
5. 今度はWEBアイコンに色を付けてみましょう。ショートコードを選択した状態で、テキスト色から変えたい色を指定します。
6. ショートコードの色が変わりました。プレビューで確認してみましょう。
7. 
   はい。指定した「赤」にWEBアイコンがかわりました。

好きなWEBアイコンを選択して、色も変えれる！使えますね。

『Better Font Awesome』の使い方（応用編）

ここからは、ちょっと上級者向けの応用編を解説していきましょう。

1. 設定に『Better Font Awesome』が追加されています。クリックしましょう。
2. Better Font Awesomeの設定画面が開きます。英語でわかりずらいですね。解説しましょう。

   Version
   『Font Awesome』のバージョンを指定できます。デフォルトの「Always Latest」ままでＯＫです。

   Use minified CSS
   縮小版のCSSを使うか、使わないかを選択できます。デフォルトのチェックが入った状態でＯｋです。

   Remove existing Font Awesome
   前にインストールされている『Font Awesome』を削除するかを選択できます。チェックなしでＯＫです。

   Hide admin notices
   エラーメッセージを表示するか、しないかを設定することが出来ます。デフォルトのチェックが入ってない状態でＯｋです。

3. Font Awesome　version 4.xでショートコード・HTMLコードを解説しています。

   classに「fa-2x」を追記することでWebアイコンサイズが倍になります。数値を変えることでサイズを大きくすることが出来ます。

   またclassに「fa-rotate-90」を追記することでアイコンを右に90度回転させることが出来ます。「fa-rotate-180」では上下逆になりますね。

WEBアイコンのサイズアップはいろんな場面で使えますよ。[

まとめ

ザックリ『Better Font Awesome』説明してきましたが、あなたのWordPrsessサイトに取り入れて損はないと思います。

WEBアイコンはホントにちょっとしたデザインの気遣いですが、その小さい積み上げがサイトのクウォリティを上げて、ユーザビリティーに貢献することにつながると思います。

『Better Font Awesome』は「 jsDelivr CDN」を使っているので容量的にとても軽いです。また他のFont Awesome系のプラグインとバッティングすることはありません。

あなたも是非『Better Font Awesome』を取り入れて、サイトデザインのクウォリティをＵＰさせましょう。

よく読まれている関連記事

【Mikomi】スクイーズページ作成用WordPressプラグインの使い方徹底レビューと特典のご紹介

メルマガや見込み客のリスト取りをしているけど、なかなか集めることができないと悩んでいる方は多いと思います。 そんな悩みを抱えている方に朗報です。 メールアドレスを登録し

2019-07-13 20:35

『Remove Image Background』の使い方！たった5秒で画像の背景を白抜き切り取りできるWEBサービス

通常、画像の人物や商品を切り抜く場合、イラストレーターやPhotoShopを使う方が多いと思いますが、使い慣れている人でも結構時間がかかってしまいます。 「Remove Im

2019-06-27 21:51

アフィリエイトで稼ぎたいならメンタルブロックをブチ壊せ！

ここ最近こんな内容の質問を多く受けます。 「アフィリエイトを1年やっていますが 収益が ほとんどありませんが、どうすればいいですか？」 答えは明白です。

2015-07-02 21:46