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

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

FontAwesomeの使い方

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

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

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

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

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

ホームアイコン

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検索では出てきません。

リサイクルアイコン

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・コメントのメニューアイコン

メールアイコン

どんなジャンルのサイトだろうと必ず使うであろう、メールアイコン。
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で検索しましょう。
また、受話器じゃなく電話機全体のアイコンが欲しいのに・・・なんてときはfaxのアイコンがオススメです。

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-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";
}

まとめ

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

意外と長くなった。。。

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