Font Awesome 5でよく使うアイコン＆ブランドロゴまとめ

きょーみ

こんにちは、きょーみです！

Font Awesomeのアイコンが大好きで、CDNを使ってブログでよく使っています。

2018年10月現在、Font Awesome 5で使えるアイコンの総数は、なんと1300種類以上！

無料版でも十分すぎるほど豊富な種類のアイコンが揃っています。

今回はわたしがFont Awesome 5でよく使うアイコンやブランドロゴ、活用できそうなアイコンをまとめてみました。

MEMO

サイズに関係するコードを赤字で示しています。コピペして使う場合は、この部分を改変してください。

ベーシックなアイコン

様々な場面で使えるベーシックなアイコンをまとめました。

ユーザー（一人）

ユーザーアイコンです。

ユーザー（一人）のコードを見る

HTML

<i class="fas fa-user fa-fw fa-lg "></i>

ユーザー（複数）

複数人のユーザーアイコンです。

ユーザー（複数）のコードを見る

HTML

<i class="fas fa-users fa-fw fa-lg "></i>

ユーザー（円形）

プロフィール風のユーザーアイコンです。

ユーザー（円形）のコードを見る

HTML

<i class="fas fa-user-circle fa-fw fa-lg "></i>

コメント（円形）

円形のコメントアイコンです。

コメント（円形）のコードを見る

HTML

<i class="fas fa-comment fa-fw fa-lg "></i>

コメント（四角）

四角いコメントアイコンです。

コメント（四角）のコードを見る

HTML

<i class="fas fa-comment-alt fa-fw fa-lg "></i>

会話

会話アイコンです。

会話のコードを見る

HTML

<i class="fas fa-comment-dots fa-fw fa-lg "></i>

チェックマーク

シンプルなチェックマークのアイコンです。

チェックマークのコードを見る

HTML

<i class="fas fa-check fa-fw fa-lg "></i>

チェックマーク（円形）

円形のチェックマークのアイコンです。

チェックマーク（円形）のコードを見る

HTML

<i class="fas fa-check-circle fa-fw fa-lg "></i>

チェックマーク（四角）

四角いチェックマークのアイコンです。

チェックマーク（四角）のコードを見る

HTML

<i class="fas fa-check-square fa-fw fa-lg "></i>

ホーム

ホームアイコンです。

ホームのコードを見る

HTML

<i class="fas fa-home fa-fw fa-lg "></i>

サーチ

検索窓に使えそうなサーチアイコンです。

サーチのコードを見る

HTML

<i class="fas fa-search fa-fw fa-lg "></i>

¥マーク

¥マークのアイコンです。

¥マークのコードを見る

HTML

<i class="fas fa-yen-sign fa-fw fa-lg "></i>

時計

時計のアイコンです。

時計のコードを見る

HTML

<i class="fas fa-clock fa-fw fa-lg "></i>

カレンダー

カレンダーのアイコンです。

カレンダーのコードを見る

HTML

<i class="far fa-calendar-alt fa-fw fa-lg "></i>

通知マーク

通知マークのアイコンです。

通知マークのコードを見る

HTML

<i class="fas fa-bell fa-fw fa-lg "></i>

アニメーション付きアイコン

アニメーションを効果的に使えば、アイコンに躍動感を持たせることができます。

アニメーションを使う場合は、それぞれ決まったクラス名をコードに追加します。

参考 Font Awesome AnimationFont Awesome Animation

動くやじるし（縦揺れ）

faa-vertical animatedのクラス名を追加して、やじるしを縦に動かしています。

動くやじるし（縦揺れ）のコードを見る

HTML


<i class="fas fa-arrow-alt-circle-down fa-lg fa-fw faa-vertical animated"></i>

<i class="fas fa-angle-down fa-lg fa-fw faa-vertical animated"></i>

<i class="fas fa-arrow-circle-down fa-lg fa-fw faa-vertical animated"></i>

<i class="fas fa-arrow-down fa-lg fa-fw faa-vertical animated"></i>

<i class="fas fa-chevron-circle-down fa-lg fa-fw faa-vertical animated"></i>

<i class="fas fa-hand-point-down fa-lg fa-fw faa-vertical animated"></i>

動くやじるし（横揺れ）

faa-horizontal animatedのクラス名を追加して、やじるしを横に動かしています。

動くやじるし（横揺れ）のコードを見る

HTML


<i class="fas fa-arrow-alt-circle-right fa-lg fa-fw faa-horizontal animated"></i>

<i class="fas fa-angle-right fa-lg fa-fw faa-horizontal animated"></i>

<i class="fas fa-arrow-circle-right fa-lg fa-fw faa-horizontal animated"></i>

<i class="fas fa-arrow-right fa-lg fa-fw faa-horizontal animated"></i>

<i class="fas fa-chevron-circle-right fa-lg fa-fw faa-horizontal animated"></i>

<i class="fas fa-hand-point-right fa-lg fa-fw faa-horizontal animated"></i>

音符でいい気分

陽気に揺れる音符です。faa-shake animatedのクラス名を使っています。

音符でいい気分のコードを見る

HTML

<i class="fas fa-music fa-fw fa-lg faa-shake animated"></i>

ジャーン！いいね

動きのあるいいねアイコンです。faa-tada animatedのクラス名を使っています。

ジャーン！いいねのコードを見る

HTML

<i class="far fa-thumbs-up fa-fw fa-lg faa-tada animated"></i>

ドキドキするハート

収縮＆膨張を繰り返すハートのアイコンです。faa-pulse animatedのクラス名を使っています。

色はCSSで好みの色に指定してください。

ドキドキするハートのコードを見る

HTML

<i class="fas fa-heart fa-fw fa-lg my-red faa-pulse animated"></i>

CSS

.my-red{color: #ce5242}

禁止マーク

2つのアイコンを重ねて、禁止マークを表現しています。

2つのアイコンの重ね方

背面に表示するアイコンのクラス名にfa-stack-2xを追加する
前面に表示するアイコンのクラス名にfa-stack-1xを追加する
2つのコードを<span class="fa-stack"></span>で囲む

2つのアイコンを重ねたコードの例

HTML

<span class="fa-stack">
  <i class="fas fa-camera fa-stack-2x"></i>
  <i class="fab fa-ban fa-stack-1x"></i>
</span>

撮影禁止

撮影禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fa fa-camera fa-stack-1x small-09"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

CSS

.small-09 {
  font-size: 0.9em 
  /*0.9倍の大きさに*/}

駐車禁止

駐車禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-car fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

駐輪禁止

駐輪禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-bicycle fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

禁煙

禁煙のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-smoking fa-stack-1x small-07"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

CSS

.small-07 {
  font-size: 0.7em 
  /*0.7倍の大きさに*/}

ペット禁止

ペット禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-dog fa-stack-1x"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

接触禁止

接触禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-hand-paper fa-stack-1x small-09"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

CSS

.small-09 {
  font-size: 0.9em 
  /*0.9倍の大きさに*/}

飲食禁止

飲食禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-utensils fa-stack-1x small-09"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

CSS

.small-09 {
  font-size: 0.9em 
  /*0.9倍の大きさに*/}

通話禁止

通話禁止のコードを見る

HTML

<span class="fa-stack fa-2x"><i class="fas fa-phone fa-stack-1x small-09"></i><i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span>

CSS

.small-09 {
  font-size: 0.9em 
  /*0.9倍の大きさに*/}

MEMO

禁止マークの方にはfa-rotate-90のクラス名を追加して90°回転させています。

中のアイコンが大きいものは、CSSでサイズを調整しています。

ブランドロゴ

Font Awesome 5で使用できる主要なブランドのアイコンをまとめました。

各ブランドのカラーはSCHEMECOLORを参考にしています。

fa-3x、fa-4xの部分を変えて、アイコンの大きさを調整してください。

Google

Googleのコードを見る

HTML

<i class="fab fa-google fa-3x fa-fw google-blue"></i>

CSS

.google-blue{color: #4285f4}

Apple

Appleのコードを見る

HTML

<i class="fab fa-apple fa-3x fa-fw apple-gray"></i>

CSS

.apple-gray{color: #7d7d7d}

Facebook

Facebookのコードを見る

HTML

<i class="fab fa-facebook-square fa-4x fb-blue"></i>

CSS

.fb-blue{color: #4267b2}

Amazon

Amazonのコードを見る

HTML

<i class="fab fa-amazon fa-4x amazon-black"></i>

CSS

.amazon-black{color: #1c1919}

LINE

LINEのコードを見る

HTML

<i class="fab fa-line fa-4x line-green"></i>

CSS

.line-green{color: #00B900}

Twitter

Twitterのコードを見る

HTML

<i class="fab fa-twitter-square fa-4x tw-blue"></i>

CSS

.tw-blue{color: #1da1f2}

Instagram

Instagramのコードを見る

HTML

<span class="insta">
<i class="fab fa-instagram"></i>
</span>

CSS

.insta {/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 55px;/*幅*/
  height: 55px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 8px;/*角丸に*/
}

.insta:before {/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 24px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 70px;/*グラデーションカバーの幅*/
  height: 70px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 45px;/*アイコンサイズ*/
  top: 6px;/*上下にずらす*/
  left: 0.5px;/*左右にずらす*/
}

MEMO

上記のコードは、サルワカさんの記事を参考にカスタマイズしてみました。

背景①、背景②、インスタアイコンの3つパーツを組み合わせています。

コピペして使う場合は、表示させる場所やアイコンの大きさに合わせて、赤字部分に修正を加えてみてください。

参考美しいInstagramフォローボタンのCSSデザイン例と設置方法サルワカ

Android

Androidのコードを見る

HTML

<i class="fab fa-android fa-4x fa-fw android-green"></i>

CSS

.android-green{color: #a4c639}

YouTube

YouTubeのコードを見る

HTML

<i class="fab fa-youtube fa-3x youtube-red"></i>

CSS

.youtube-red{color: #Ff0000}

Windows

Windowsのコードを見る

HTML

<i class="fab fa-windows fa-3x fa-fw windows-blue"></i>

CSS

.windows-blue{color: #0078d7}

Font Awesomeでよくあるミス

最後にわたし自身がよく陥る、Font Awesomeでよくあるミスをまとめました。

アイコンが表示されなかったり、ズレている時はチェックしてみてください。

header内コードのバージョンが古い

新しいアイコンが表示されない場合、header内のコードが古いことが原因として考えられます。

header内のコード赤字部分を最新バージョンに変更してみてください。

HTML

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet">

余計な改行が入っている

HTML上で余計な改行が入ってしまっているため、上記のようにデザインが崩れてしまっている場合があります。

HTML

<center><span class="fa-stack fa-2x"><i class="fas fa-car fa-stack-1x"></i>>ここ！
<i class="fa fa-ban fa-stack-2x fa-rotate-90" style="color:red;"></i></span></center>