ブロガー・Web制作者必見。ブログデザインに使えるFont Awesomeアイコン 利用シーン別まとめ

WordPress

こんにちは、さいとう(@S41T0H)です。

Font Awesome(フォントオーサム)、使ってますか? めちゃくちゃ便利ですよね。僕は大好きです。

Cocoonを始めWordPressのテーマには標準で読み込まれているものも多く、それらでは簡単に使用することができます。

関連記事 CocoonでサイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ

関連記事 WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法

しかしたくさんの種類がありすぎて、どういうシチュエーションでどのアイコンを使えばいいのかがわからなくなるということも。

そこで今回はブログデザインの利用シーン別に使いやすいFont Awesomeのアイコンを紹介していきたいと思います(随時更新)。

Font Awesomeの詳しい使い方はサルワカさんの下記記事をご参照ください。

関連記事 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

※当記事で紹介するアイコンは、Cocoonにデフォルトで読み込まれている旧Font Awesomeで利用できるアイコンのみの紹介になっています(font-family: FontAwsome;で利用できるもの)。

その他のアイコンの検索「Search for Font Awesome | 日本語でアイコンフォントを簡単検索」の利用が便利です。

スポンサーリンク

ブログデザインに使えるFont Awesomeアイコン

Font Awesomeアイコンを実際にWordPressで利用する際は以下のHTMLタグを利用します。

<i class="fa <ここに名前を入力>" aria-hidden="true"></i>

<ここに名前を入力>の部分に当記事で紹介している「fa-○○」を入力してください。

WordPressのエディタでは空要素は勝手に削除されてしまうので、投稿中で使うのであればWP Visual Icon Fontsなどのプラグインの利用をオススメします。

関連記事 WordPressの投稿にFont Awesomeのアイコンフォントを使いたかったら「WP Visual Icon Fonts」が最も手軽

またCSSで利用する際は下記のように指定してください。

font-family: FontAwesome;
content: '<ここに(\○○)を入力>';

ホームアイコン

  •  icon-home fa-home (\f015)

目次・リスト向けアイコン

  •  icon-file-text-o fa-file-text-o (\f0f6)
  •  icon-list fa-list (\f03a)
  •  icon-list-alt fa-list-alt (\f022)
  •  icon-list-ol fa-list-ol (\f0cb)
  •  icon-list-ul fa-list-ul (\f0ca)

カテゴリー向けアイコン

カテゴリーアイコンに使いやすいのはやはり「フォルダ」アイコンでしょう。

名前の「folder」を「folder-open」にすることで開きます。

  •  icon-folder-o fa-folder-o (\f114)
  •  icon-folder fa-folder (\f07b)

タグ向けアイコン

タグといえば商品タグのようなアイコンが主流でしたが、最近ではSNSの影響でハッシュタグのほうが親しみやすいかもしれません。お好みで使い分けてみましょう。

  •  icon-tag fa-tag (\f02b)
  •  icon-tags fa-tags (\f02c)
  •  icon-hashtag fa-hashtag (\f292)

コメント向けアイコン

Font Awesomeにはさまざまなコメントアイコンが用意されていてどれを利用すべきか迷います。

が、基本的にはシンプルなものを利用するのがよいと思います(好みです)。

  •  icon-comment fa-comment (\f075)
  •  icon-comments fa-comments (\f086)
  •  icon-comment-o fa-comment-o (\f0e5)
  •  icon-comments-o fa-comments-o (\f0e6)
  •  icon-commenting fa-commenting (\f27a)
  •  icon-commenting-o fa-commenting-o (\f27b)

新着記事向けアイコン

新着記事用のアイコンは「コレ!」といったものがないのですが、RSSアイコンがわかりやすいのではないでしょうか。

  •  icon-rss fa-feed (\f09e)
  •  icon-rss-square fa-rss-square (\f143)

ただ、RSSってなかなかライトユーザーには馴染みの薄いものなので、そういった場合には「新しい」感のあるアイコンを利用するのがいいかもしれません。

  •  icon-check  fa-check (\f00c)
  •  icon-send fa-send (\f1d8)

スマホユーザーには「通知」として馴染み深い「ベル」もいいでしょう。

  •  icon-bell fa-bell (\f0f3)
  •  icon-bell-o fa-bell-o (\f0a2)

人気記事向けアイコン

人気記事も悩むところですが「ロケット」や「スター」、「ブックマーク」などが主流なようです。

  •  icon-rocket fa-rocket (\f135)
  •  icon-star fa-star (\f005)
  •  icon-star-o fa-star-o (\f006)
  •  icon-bookmark fa-bookmark (\f02e)
  •  icon-bookmark-o fa-bookmark-o (\f097)
  •  icon-bolt fa-bolt (\f0e7)

ランキング向けアイコン

こちらも悩むところですね。

  •  icon-flag fa-flag (\f024)
  •  icon-flag-o fa-flag-o (\f11d)
  •  icon-trophy fa-trophy (\f091)
  •  icon-bar-chart-o fa-bar-chart (\f080)
  •  icon-line-chart fa-line-chart (\f201)

メニュー向けアイコン

スマホユーザー向けのメニューにはこういったアイコンが使いやすいでしょう。

  •  icon-bars fa-bars (\f0c9)
  •  icon-ellipsis-vertical fa-ellipsis-v (\f142)

シェアアイコン

シェアアイコンは定番のものがいいでしょう。

  •  icon-share-alt fa-share-alt (\f1e0)
  •  icon-share-alt fa-share-alt-square (\f1e1)
  •  icon-share fa-share (\f064)

fa-shareは::after疑似要素に利用して「別タブで開く(target=”_blank”)」を示すことにも使用されますね。

また、Twitterでのシェアを強く訴求するにはリツイートアイコンの利用もよさそうです。

  •  icon-retweet fa-retweet (\f079)

サービス別のアイコンはこちら。

  •  icon-twitter fa-twitter (\f099)
  •  icon-twitter-square fa-twitter-square (\f081)
  •  icon-facebook fa-facebook (\f09a)
  •  icon-facebook-square fa-facebook-square (\f082)
  •  icon-facebook-official fa-facebook-official (\f230)
  •  icon-get-pocket fa-get-pocket (\f265)
  •  icon-google-plus fa-google-plus (\f0d5)
  • icon-google-plus-official fa-google-plus-official (\f2b3)
  •  icon-google-plus-square fa-google-plus-square (\f0d4)

サービスアイコン

日本でよく使われるメジャーなものをいくつか紹介します。

  •  icon-amazon fa-amazon (\f270)
  •  icon-google fa-google (\f1a0)
  •  icon-instagram fa-instagram (\f16d)
  •  icon-soundcloud  fa-soundcloud (\f1be)
  •  icon-youtube fa-youtube (\f167)
  •  icon-youtube-play fa-youtube-play (\f16a)

上記以外のサービスアイコンはこちらよりお探しください。

連絡先・コンタクト向けアイコン

  •  icon-envelope fa-envelope (\f0e0)
  •  icon-envelope-o fa-envelope-o (\f003)
  •  icon-send fa-send (\f1d8)
  •  icon-send-o fa-send-o (\f1d9)
  •  icon-phone fa-phone (\f095)

プロフィール向けアイコン

  • icon-address-card  fa-address-card (\f2bb)
  • icon-address-card-o  fa-address-card-o (\f2bc)

いかがだっただろうか

この記事で紹介したのはどれも定番のもの。

あえて王道から外れたアイコンでオリジナリティを出していくのもいいかもしれませんね。

[PR]最新SEO対策済み!WordPressテーマ「Diver」
収益化を加速する!Diverは、初心者でも簡単に利用することが可能な高品質高機能なハイスペックワードプレステーマです。 一回テーマを購入すれば、複数のサイトでの利用が可能なのも魅力的。 ブロガー・アフィリエイターの次のステップに最適です。 【WordPressテーマ「Diver」公式サイト】
WordPress
スポンサーリンク
この記事をシェアしよう
リスブロ

コメント