Root-013

たくさんのWEBアイコンフォントが使えるFontAwesomeですが、種類が豊富故に『あのアイコン使いたいけど名前なんだっけ・・・』ということも増えてきました。

htmlコードと、擬似要素で使いたい場面もあると思うのでcontentで指定する文字コードもまとめていきます！

5.0とは合わないようですが、検索のコツは同様に学ぶことができます。

FontAwesomeの使い方

まとめようかと思いましたが、こちらのサイト様より丁寧にできる自信がありません！
使い方については↓を！
http://h2ham.net/font-awasome

おんなじWEBアイコンフォントはGenericonsを使っていたのですが、いまいち文字とのベースラインが合わないのが気になって、最近はAwesomeをよく使っています。
Genericonsについての記事はこちらをどうぞ！

Twenty Fourteenに標準装備されているWEBフォント（アイコン文字）のGenericonsをカテゴリのリンクに表示してみた！

FontAwesomeを日本語で検索しやすいようにまとめてみる

大体はカテゴリで分けられているのですが、中には似たような種類の物でも探し難いものもあり、コード検索にてこずったりしたので、今後のためにもまとめておきます。

現在公式サイトにアクセスすると5.0になっており、5.0では以下のコードをそのまま使う事ができません。以下のコードは4.7以前であればある程度対応できるかと思います。

4.7以前を公式サイトで検索するには、公式サイトフッターにある4.7バージョンへのリンクをクリックすると、見慣れたUIになると思います。

リンクはこちらです。
https://fontawesome.com/v4.7.0/

ホームアイコン

home の検索で出てくるので分かりやすいですね。
もう少しバリエーションも欲しいところですが、他のアイコンと違ってこのタイプしかありません。。

fa-home

<i class="fa fa-home"></i>

.fa-home:before {
  content: "\f015";
}

矢印系のアイコン

これらは

http://fortawesome.github.io/Font-Awesome/icons/#directional

http://fortawesome.github.io/Font-Awesome/icons/#video-player

にもまとめられているのでそちらから探しましょう。
だいたいのバリエーションはarrow up right down left の検索で出てきますが、それ以外でも矢印系はありますね。
リサイクルアイコンとか。
あと、外部リンク（external link）を表すアイコンもarrow検索では出てきません。

arrow以外にもchevron caret angleといったワードで探しても色々な矢印が出てきます。

よく使う矢印

あまりにバリエーションが多いので記述をまとめさせて頂きます！

オーソドックスな矢印 arrowタイプ

検索ワードarrow

fa-arrow-up
fa-arrow-right
fa-arrow-down
fa-arrow-left

<i class="fa fa-arrow-up"></i>
<i class="fa fa-arrow-right"></i>
<i class="fa fa-arrow-down"></i>
<i class="fa fa-arrow-left"></i>

.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-arrow-left:before {
  content: "\f060";
}

fa-arrow-circle-o-up
fa-arrow-circle-o-right
fa-arrow-circle-o-down
fa-arrow-circle-o-left

<i class="fa fa-arrow-circle-o-up"></i>
<i class="fa fa-arrow-circle-o-right"></i>
<i class="fa fa-arrow-circle-o-down"></i>
<i class="fa fa-arrow-circle-o-left"></i>

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}

fa-arrow-circle-up
fa-arrow-circle-right
fa-arrow-circle-down
fa-arrow-circle-left

<i class="fa fa-arrow-circle-up"></i>
<i class="fa fa-arrow-circle-right"></i>
<i class="fa fa-arrow-circle-down"></i>
<i class="fa fa-arrow-circle-left"></i>

.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}

棒無しの矢印 chevronタイプ

検索ワードはchevron
chevron というのは

シェブロン（英: 仏: Chevron、古仏: Cheveron[1]）は、紋章学において、紋章のシールドの中程を左右にわたる山形、または逆V字形の帯状のチャージである。シェブロンは、ペイル、ベンド、チーフ、フェス、クロスおよびサルタイアーに加えて、紋章学の基本的なオーディナリーのうちの1つである。

シェブロン (紋章学) wikipedia
だそうです。なるほど。

個人的にはスッキリしていて好きなので一番使うかも！

fa-chevron-up
fa-chevron-right
fa-chevron-down
fa-chevron-left

<i class="fa fa-chevron-up"></i>
<i class="fa fa-chevron-right"></i>
<i class="fa fa-chevron-down"></i>
<i class="fa fa-chevron-left"></i>

.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-chevron-left:before {
  content: "\f053";
}

fa-chevron-circle-up
fa-chevron-circle-right
fa-chevron-circle-down
fa-chevron-circle-left

<i class="fa fa-chevron-circle-up"></i>
<i class="fa fa-chevron-circle-right"></i>
<i class="fa fa-chevron-circle-down"></i>
<i class="fa fa-chevron-circle-left"></i>

.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}

細めの矢印（棒なし） angleタイプ

細めのスッキリした矢印はangle検索で出てきます。
文字通り、角・隅・直角という意味ですね。
等サイトではchevronと組み合わせてh2 h3 h4 に利用させてもらっています。

fa-angle-up
fa-angle-right
fa-angle-down
fa-angle-left

<i class="fa fa-angle-up"></i>
<i class="fa fa-angle-right"></i>
<i class="fa fa-angle-down"></i>
<i class="fa fa-angle-left"></i>

.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-angle-left:before {
  content: "\f104";
}

fa-angle-double-up
fa-angle-double-right
fa-angle-double-down
fa-angle-double-left

<i class="fa fa-angle-double-up"></i>
<i class="fa fa-angle-double-right"></i>
<i class="fa fa-angle-double-down"></i>
<i class="fa fa-angle-double-left"></i>

.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-double-left:before {
  content: "\f100";
}

小さめ三角の矢印 caretタイプ

こちらも使えそうな三角形の矢印 caret検索で出てきます。
校正記号・脱字符号のカレット記号のことですかね。

fa-caret-up
fa-caret-right
fa-caret-down
fa-caret-left

<i class="fa fa-caret-up"></i>
<i class="fa fa-caret-right"></i>
<i class="fa fa-caret-down"></i>
<i class="fa fa-caret-left"></i>

.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-left:before {
  content: "\f0d9";
}

fa-caret-square-o-up
fa-caret-square-o-right
fa-caret-square-o-down
fa-caret-square-o-left

<i class="fa fa-caret-square-o-up"></i>
<i class="fa fa-caret-square-o-right"></i>
<i class="fa fa-caret-square-o-down"></i>
<i class="fa fa-caret-square-o-left"></i>

.fa-toggle-up:before, .fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before, .fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-toggle-down:before, .fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-left:before, .fa-caret-square-o-left:before {
  content: "\f191";
}

大きめ三角矢印なら右向き限定だけど playタイプも使えます

play検索で出てきます。
文字通り、再生ボタンのことでしょうね。そのため、右向きしかありません。

fa-play
fa-play-circle
fa-play-circle-o

<i class="fa fa-play"></i>
<i class="fa fa-play-circle"></i>
<i class="fa fa-play-circle-o"></i>

.fa-play:before {
  content: "\f04b";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-play-circle-o:before {
  content: "\f01d";
}

リサイクルアイコン

fa-recycle

<i class="fa fa-recycle"></i>

.fa-recycle:before {
  content: "\f1b8";
}

再読み込み（reload refresh）アイコン

fa-refresh

<i class="fa fa-refresh"></i>

.fa-refresh:before {
  content: "\f021";
}

リツイートアイコン

twitter検索で出てきてくれればいいんですが、retweetで検索しないとリツイートアイコンは出てきません。

fa-retweet

<i class="fa fa-retweet"></i>

.fa-retweet:before {
  content: "\f079";
}

外部リンクや、サインイン・サインアウトアイコン

fa-external-link

<i class="fa fa-external-link"></i>

.fa-external-link:before {
  content: "\f08e";
}

fa-external-link-square

<i class="fa fa-external-link-square"></i>

.fa-external-link-square:before {
  content: "\f14c";
}

fa-sign-in

<i class="fa fa-sign-in"></i>

.fa-sign-in:before {
  content: "\f090";
}

fa-sign-out

<i class="fa fa-sign-out"></i>

.fa-sign-out:before {
  content: "\f08b";
}

リプライ・シェア等の曲がった矢印

reply shareの検索で出てきます。検索するとけっこうバリエーションも豊富！

fa-reply

<i class="fa fa-reply"></i>

.fa-mail-reply:before, .fa-reply:before {
  content: "\f112";
}

fa-share

<i class="fa fa-share"></i>

.fa-mail-forward:before, .fa-share:before {
  content: "\f064";
}

お問合せやFAQ・コメント・検索・新着情報のメニューアイコン

新着情報のRSSアイコン

rssの検索で出てきます。

fa-rss
fa-rss-square

<i class="fa fa-rss"></i>
<i class="fa fa-rss-square"></i>

.fa-envelope-o:before {
  content: "\f09e";
}
.fa-rss-square:before {
  content: "\f143";
}

検索（虫眼鏡）アイコン

searchの検索で出てきます。

fa-search
fa-search-plus
fa-search-minus

<i class="fa fa-search"></i>
<i class="fa fa-search-plus"></i>
<i class="fa fa-search-minus"></i>

.fa-envelope-o:before {
  content: "\f002";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}

メールアイコン

どんなジャンルのサイトだろうと必ず使うであろう、メールアイコン。
mail でも inquiry でも出てきません。envelopeの検索で出てきます。

envelope-o

<i class="fa fa-envelope-o"></i>

.fa-envelope-o:before {
  content: "\f003";
}

envelope

<i class="fa fa-envelope"></i>

.fa-envelope:before {
  content: "\f0e0";
}

envelope-square

<i class="fa fa-envelope-square"></i>

.fa-envelope-square:before {
  content: "\f199";
}

噴出しアイコン

comment で検索すると出てきます。

fa-comment

<i class="fa fa-comment"></i>

.fa-comment:before {
  content: "\f075";
}

<i class="fa fa-comment-o"></i>

.fa-comment-o:before {
  content: "\f0e5";
}

fa-comments

<i class="fa fa-comments"></i>

.fa-comments:before {
  content: "\f086";
}

fa-comments-o

<i class="fa fa-comments-o"></i>

.fa-comments-o:before {
  content: "\f0e6";
}

電話・モバイル・タブレット等の端末アイコン

電話・FAX

電話といえば日本では「tel」という表記が一般的ですが、Awesomeで探すときはphoneで検索しましょう。

fa-phone

<i class="fa fa-phone"></i>

.fa-phone:before {
  content: "\f095";
}

fa-fax

<i class="fa fa-fax"></i>

.fa-fax:before {
  content: "\f1ac";
}

fa-phone-square

<i class="fa fa-phone-square"></i>

.fa-phone-square:before {
  content: "\f098";
}

パソコン・デスクトップアイコン

fa-desktop

<i class="fa fa-desktop"></i>

.fa-desktop:before {
  content: "\f108";
}

モバイル・タブレットアイコン

fa-mobile

<i class="fa fa-mobile"></i>

.fa-mobile-phone:before, .fa-mobile:before {
  content: "\f10b";
}

fa-tablet

<i class="fa fa-tablet"></i>

.fa-tablet:before {
  content: "\f10a";
}

会社・組織概要とかに使えそうなアイコン

ビルのアイコン

fa-building-o

<i class="fa fa-building-o"></i>

.fa-building-o:before {
  content: "\f0f7";
}

fa-building

<i class="fa fa-building"></i>

.fa-building:before {
  content: "\f1ad";
}

大学のアイコン

名前はuniversityなんですが、bankでも出て来たりします。
そこはかとなく、官公庁のイメージ。

fa-university

<i class="fa fa-university"></i>

.fa-institution:before, .fa-bank:before, .fa-university:before {
  content: "\f19c";
}

マップ系のアイコン

accessページとかに使えそうなアイコンです。
map検索でだいたい出ますね。google mapのあのアイコンとか、ストリートビューのアイコンも出来たようです。

地球・地図アイコン

「WEB・インターネット」とかを表すアイコンとして使ったりもします。earth検索でも出てきますが、名称はglobe

fa-globe

<i class="fa fa-globe"></i>

.fa-globe:before {
  content: "\f0ac";
}

fa-map-marker

<i class="fa fa-map-marker"></i>

.fa-map-marker:before {
  content: "\f041";
}

fa-street-view

<i class="fa fa-street-view"></i>

.fa-street-view:before {
  content: "\f21d";
}

サイトマップアイコン

fa-sitemap

<i class="fa fa-sitemap"></i>

.fa-sitemap:before {
  content: "\f0e8";
}

人物・人型のシルエットアイコン

use user person man woman 等の検索で出てきます。
about us とか、スタッフ紹介とか、そういったメニューアイコンに使えそうですね。
バリエーションもかなり豊富。

上半身のアイコン

fa-user

<i class="fa fa-user"></i>

.fa-user:before {
  content: "\f007";
}

fa-users

<i class="fa fa-users"></i>

.fa-group:before, .fa-users:before {
  content: "\f0c0";
}

男女・子供の全身アイコン

fa-male

<i class="fa fa-male"></i>

.fa-male:before {
  content: "\f183";
}

fa-female

<i class="fa fa-female"></i>

.fa-female:before {
  content: "\f182";
}

fa-child

<i class="fa fa-child"></i>

.fa-child:before {
  content: "\f1ae";
}

顔のアイコン

face とかで出てきてくれればいいのになぜか出てこない！

fa-smile-o

<i class="fa fa-smile-o"></i>

.fa-smile-o:before {
  content: "\f118";
}

fa-meh-o

<i class="fa fa-meh-o"></i>

.fa-meh-o:before {
  content: "\f11a";
}

fa-frown-o

<i class="fa fa-frown-o"></i>

.fa-frown-o:before {
  content: "\f119";
}

セキュリティ・プライバシーポリシーアイコン

プライバシーポリシーやセキュリティ関連のメニューで使えそうなアイコンもありますね。

盾のアイコン

fa-shield

<i class="fa fa-shield"></i>

.fa-shield:before {
  content: "\f132";
}

カギ・ロックのアイコン

fa-key

<i class="fa fa-key"></i>

.fa-key:before {
  content: "\f084";
}

fa-lock

<i class="fa fa-lock"></i>

.fa-lock:before {
  content: "\f023";
}

チェック！注意！疑問？等のアイキャッチに使えそうなアイコン

チェックマーク

fa-check

<i class="fa fa-check"></i>

.fa-check:before {
  content: "\f00c";
}

fa-check-circle

<i class="fa fa-check-circle"></i>

.fa-check-circle:before {
  content: "\f058";
}

fa-check-circle-o

<i class="fa fa-check-circle-o"></i>

.fa-check-circle-o:before {
  content: "\f05d";
}

fa-check-square

<i class="fa fa-check-square"></i>

.fa-check-square:before {
  content: "\f14a";
}

<i class="fa fa-check-square-o"></i>

.fa-check-square-o:before {
  content: "\f046";
}

はてな？マーク

fa-question

<i class="fa fa-question"></i>

.fa-question:before {
  content: "\f128";
}

fa-question-circle

<i class="fa fa-question-circle"></i>

.fa-question-circle:before {
  content: "\f059";
}

ビックリ！マーク

fa-exclamation

<i class="fa fa-exclamation"></i>

.fa-exclamation:before {
  content: "\f12a";
}

fa-exclamation-circle

<i class="fa fa-exclamation-circle"></i>

.fa-exclamation-circle:before {
  content: "\f06a";
}

fa-exclamation-triangle

<i class="fa fa-exclamation-triangle"></i>

.fa-warning:before, .fa-exclamation-triangle:before {
  content: "\f071";
}

カテゴリーやタグの表示に使えそうなアイコン

フォルダーのアイコン

folder検索で出てきます。

fa-folder

<i class="fa fa-folder"></i>

.fa-folder:before {
  content: "\f07b";
}

fa-folder-open

<i class="fa fa-folder-open"></i>

.fa-folder-open:before {
  content: "\f07c";
}

fa-folder-o

<i class="fa fa-folder-o"></i>

.fa-folder-o:before {
  content: "\f114";
}

fa-folder-open-o

<i class="fa fa-folder-open-o"></i>

.fa-folder-open-o:before {
  content: "\f115";
}

タグのアイコン

こちらはまんま、tag検索で出てきます。

fa-tag

<i class="fa fa-tag"></i>

.fa-tag:before {
  content: "\f02b";
}

fa-tags

<i class="fa fa-tags"></i>

.fa-tags:before {
  content: "\f02c";
}

設定・メニュー・サービス紹介とかに使えそうなアイコン

メニューアイコン

誰が考えたのか、あの3本ラインのアイコンですね。ハンバーガーメニューとも呼ばれます。
分かり難いんじゃない？と思ってましたけど、流石に最近浸透してきましたかね。
ターゲット層によっては素直に「MENU」と表記した方が良いような気も。
ちなみにハンバーガーメニューでgoogle検索すると2位にモスバーガー。

そりゃそうだよね！

fa-bars

<i class="fa fa-bars"></i>

.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
  content: "\f0c9";
}

歯車のアイコン

gear検索で出てきますが、名称はcog。

fa-cog

<i class="fa fa-cog"></i>

.fa-gear:before, .fa-cog:before {
  content: "\f013";
}

fa-cogs

<i class="fa fa-cogs"></i>

.fa-gears:before, .fa-cogs:before {
  content: "\f085";
}

時間・予定を表すアイコン

イベントやセミナーを行うコーポレートサイトの場合、カレンダー等のアイコンはよく使いますね。

カレンダーのアイコン

calendar検索で出てきます。

fa-calendar
fa-calendar-o

<i class="fa fa-calendar"></i>
<i class="fa fa-calendar-o"></i>

.fa-calendar:before {
  content: "\f073";
}
.fa-calendar-o:before {
  content: "\f133";
}

時計のアイコン

clock検索で出てきます。

fa-clock-o

<i class="fa fa-clock-o"></i>

.fa-clock-o:before {
  content: "\f017";
}

見積り・金額・料金表に使えそうなアイコン

料金表示等のメニューアイコンに使えそうです。

電卓のアイコン

calculator検索で出てきます。

fa-calculator

<i class="fa fa-calculator"></i>

.fa-calculator:before {
  content: "\f1ec";
}

まとめ

よく使う、使ったことのあるアイコンを中心に、検索し難かったものとかをまとめてみました！
コーポレートサイトなら、ここに挙げてるので大体まかなえそうな気がします。

意外と長くなった。。。

随時追加して行きたいと思います！