MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


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

アメリヴィンテージ バンダナ柄 パンツ

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

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

目次

ファッションの BALENCIAGA バレンシアガ ロゴ ベースボールキャップ 人気 キャップ 色・サイズを選択:グレー

まとめようかと思いましたが、こちらのサイト様より丁寧にできる自信がありません!
使い方については↓を!
コラボ★New Era ニューエラ キャップ Disney Mickey Mouse

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

Parker グローバルコアホース (F487TCGUGU080808-620CM) パーカー・ハネフィン日本(株)

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

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

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

4.7以前を公式サイトで検索するには、公式サイトフッターにある4.7バージョンへのリンクをクリックすると、見慣れたUIになると思います。
1/24 攻殻機動隊 S.A.C タチコマ [メタルフィニッシュVer.]【並行輸入品】
リンクはこちらです。

メキシコ限定 サッカークラブ New Era キャップ 39Thirty Santos

ファッションの BALENCIAGA バレンシアガ ロゴ ベースボールキャップ 人気 キャップ 色・サイズを選択:グレー

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

fa-home

<i class="fa fa-home"></i>
.fa-home:before {
  content: "\f015";
}

矢印系のアイコン

これらは

[ニーマンバイ] 刺繍 リバーシブル スカジャン 長袖 両面 デザイン サテン 生地 素材 メンズ めんず アメリカン ストリート ストリート系 カジ

にもまとめられているのでそちらから探しましょう。
だいたいのバリエーションは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つである。


だそうです。なるほど。

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

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
専用regina romantico ベロア ジャケット&パンツ
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";
}

ファッションの BALENCIAGA バレンシアガ ロゴ ベースボールキャップ 人気 キャップ 色・サイズを選択:グレー

どんなジャンルのサイトだろうと必ず使うであろう、メールアイコン。
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";
}

ファッションの BALENCIAGA バレンシアガ ロゴ ベースボールキャップ 人気 キャップ 色・サイズを選択:グレー

ビルのアイコン

fa-building-o

used vintage♡様 御成約
.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

ヤーマン 美顔器 レイボーテヴィーナス STA-209L
.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-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";
}

タグのアイコン

こちらはまんま、RudegalleryBlackRebelベスト検索で出てきます。

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>
ECLINセットアップ

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

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

カレンダーのアイコン

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

まとめ

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

意外と長くなった。。。

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

おすすめコンテンツ

2 Replies to “よく使うFontAwesomeの日本語まとめ作ってみたよ。コード検索とかに手こずったりするので参考にしてみてね!(4.7以前)”

  1. Mutakko says:

    キレイにまとめられているので参考になりました。ありがとうございます。

コメントを残す New Era キャップ 59FIFTY FITTED フィアオブゴッド FEAR OF GOD

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