よく使うFontAwesomeの日本語まとめ作ってみたよ。コード検索とかに手こずったりするので参考にしてみてね!

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

icons-flag

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

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

まとめ

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

意外と長くなった。。。

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

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • 具体的なエラー画面などがある場合は画像を添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)