コンテンツのちょっとしたアクセントになるフォントアイコンを採用するサイトが増えています。フォントアイコンは、画像に比べてデータサイズが小さいためサイトの表示スピードに影響を与えないなどの利点を持っています。フォントアイコンで高い人気を持つのが、Font Awesomeです。

本サイトのメニュー項目には、Font Awesomeのアイコンを加えています。

本記事では、Font Awesomeのアイコンを記事内で使用する方法を紹介します。

Font Awesome アイコンの使用例

Font Awesomeのアイコンは、現時点で675用意されています。新しいアイコンも続々追加されています。現在、利用可能なアイコンのリストはこちら をご覧下さい。（こちらの右に付いているアイコンもそうです。）

利用例1：

本サイトは、以下の分野のコンテンツ作成にに力を入れています。

• WordPress [fa class=”fa-wordpress”] 初心者向け
• ブログ・サイトのアクセスアップ [fa class=”fa-line-chart”]
• サイトの運営ツール [fa class=”fa-wrench”]

利用例2：

[fa class=”fa-exclamation-triangle”] 注意事項

利用例3：

SNSでサイトの更新情報、役立ちそうなニュースなどを発信しています。是非、フォローお願い致します。

[fa class=”fa-facebook-official fa-fw fa-2x”] Chico M@ブロギングライフ [fa class=”fa-twitter”] Twitter

[fa class=”fa-info-circle”] 上のFacebookのアイコンは、2倍の大きさに設定しています。
これらは、利用方法の一例です。アイコンの種類もたくさんあるので、様々な使い方、活用ができると思います。

Font Awesome アイコンを記事中に追加する方法

本サイトは、WordPress プラグインのFont Awesome 4 Menusを使用して、メインメニューにFont Awesomeのアイコンを追加しています。

https://www.blogging-life.com/add-fa-icon-in-menu/

Font Awesome 4 Menusは、メニューだけでなくショートコードを使って、記事中にアイコンを表示させる機能も備えています。上で紹介したアイコンの利用例もショートコードを使っています。

ショートコードは、[fa class=”fa-アイコン名”]です。文字のフォントと同様に装飾することができます。例えば、上記ショートコード例のアイコン名に封筒のアイコン”envelope-o”を入れます。続いて、以下の文の「お問い合わせ」の後にショートコードを加えた文章（テキスト）にして、お問い合わせページへのリンクを加えると以下のように表示されます。

「本サイトへのご質問、ご要望がございましたら、お気軽にお問い合わせ [fa class=”fa-envelope-o”] 下さい。」

アイコンはあくまでもコンテンツのアクセントで、脇役的な存在です。派手なアイコン表示機能をたくさん備えるものより、シンプルな構成で基本的な使い方で十分とお考えの方には、Font Awesome 4 Menusはお勧めできます。