よく使うFontAwesomeのアイコン
FontAwesomeを使うことでデザイン性も上がり効率もよくなります。500種類のアイコンがあるのでFontAwesomeでアイコンをそろえるとデザインも統一感が出て見やすくなります。よく使うアイコンをクラス名とタグと一緒に一覧にしました。
FontAwesomeの使い方は Webフォントとして「FontAwsome」を使う方法
ナビゲーションで使えそうなアイコンフォント
ホーム fa-home
<i class="fa fa-home" aria-hidden="true"></i>
ショッピングサイト用のカート fa-cart-arrow-down
<i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
メール・お問い合わせ fa-envelope-o
<i class="fa fa-envelope" aria-hidden="true"></i>
サーチ・検索 fa-search
<i class="fa fa-search" aria-hidden="true"></i>
サイトマップ fa-sitemap
<i class="fa fa-sitemap" aria-hidden="true"></i>
企業情報 fa-building
<i class="fa fa-building" aria-hidden="true"></i>
カレンダー・スケジュール fa-calendar
<i class="fa fa-calendar" aria-hidden="true"></i>
ナビゲーションやメニューなどで使用することがあるようなアイコンフォントです。
ブランドアイコンフォント
フェイスブック fa-facebook-square
<i class="fa fa-facebook-square" aria-hidden="true"></i>
ツイッター fa-twitter-square
<i class="fa fa-twitter-square" aria-hidden="true"></i>
グーグルプラス fa-google-plus
<i class="fa fa-google-plus" aria-hidden="true"></i>
ワードプレス fa-wordpress
<i class="fa fa-wordpress" aria-hidden="true"></i>
メジャーなブランドだとアイコンの方が認識しやすいです。
文字代わりに使うアイコンフォント
アットマーク fa-at
<i class="fa fa-at" aria-hidden="true"></i>
コピーライト fa-copyright
<i class="fa fa-copyright" aria-hidden="true"></i>
レジスターマーク fa-registered
<i class="fa fa-registered" aria-hidden="true"></i>
円マーク fa-jpy
<i class="fa fa-jpy" aria-hidden="true"></i>
迷惑メール防止用に使用したりフッターの社名に入れたりして使います。円マークはプライス表示に使用します。
アイコンフォントのチェックマーク
バリエーション1 fa-check
<i class="fa fa-check" aria-hidden="true"></i>
バリエーション2 fa-check-circle
<i class="fa fa-check-circle" aria-hidden="true"></i>
バリエーション3 fa-check-circle-o
<i class="fa fa-check-circle-o" aria-hidden="true"></i>
バリエーション4 fa-check-square
<i class="fa fa-check-square" aria-hidden="true"></i>
バリエーション5 fa-check-square-o
<i class="fa fa-check-square-o" aria-hidden="true"></i>
チェックマークはよく使うアイコンフォントです。バリエーションが豊富なのでリスト関係やまとめなどで使う頻度が高まります。
アイコンフォントのビックリマーク・クエスチョンマーク
ビックリマーク ノーマル fa-exclamation
<i class="fa fa-exclamation" aria-hidden="true"></i>
ビックリマーク 丸抜き fa-exclamation-circle
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
ビックリマーク 三角抜き fa-exclamation-triangle
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
クエスチョンマーク ノーマル fa-question
<i class="fa fa-question" aria-hidden="true"></i>
クエスチョンマーク 丸抜き fa-question-circle
<i class="fa fa-question-circle" aria-hidden="true"></i>
クエスチョンマーク 丸囲み fa-question-circle-o
<i class="fa fa-question-circle-o" aria-hidden="true"></i>
感嘆符(ビックリマーク)や疑問符(クエスチョンマーク)はまとめなどで使用します。
その他よく使うアイコンフォント
ポイント・要点 fa-hand-pointer-o
<i class="fa fa-hand-pointer-o" aria-hidden="true"></i>
リストマーク用 fa-chevron-circle-right
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
インフォメーション fa-info-circle
<i class="fa fa-info-circle" aria-hidden="true"></i>
引用 fa-quote-left
<i class="fa fa-quote-left" aria-hidden="true"></i>
外部リンク用 fa-external-link
<i class="fa fa-external-link" aria-hidden="true"></i>
まとめ
ここに上げたもの以外でもたくさん使えるアイコンフォントがあります。
