たくさんの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"; }
まとめ
よく使う、使ったことのあるアイコンを中心に、検索し難かったものとかをまとめてみました!
コーポレートサイトなら、ここに挙げてるので大体まかなえそうな気がします。
意外と長くなった。。。
随時追加して行きたいと思います!
キレイにまとめられているので参考になりました。ありがとうございます。
>Mutakko様
参考にして頂けて幸いです!
ツボを押さえれば検索も楽になりますよね^^
コメントありがとうございました!