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

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つのアイコンの重ね方
  1. 背面に表示するアイコンのクラス名にfa-stack-2xを追加する
  2. 前面に表示するアイコンのクラス名にfa-stack-1xを追加する
  3. 2つのコードを<span class="fa-stack"></span>で囲む

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


HTML

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

.google-blue{color: #4285f4}

Apple


HTML

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

.apple-gray{color: #7d7d7d}

Facebook


HTML

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

.fb-blue{color: #4267b2}

Amazon


HTML

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

.amazon-black{color: #1c1919}

LINE


HTML

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

.line-green{color: #00B900}

Twitter


HTML

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

.tw-blue{color: #1da1f2}

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


HTML

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

.android-green{color: #a4c639}

YouTube


HTML

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

.youtube-red{color: #Ff0000}

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>

おわりに

Font Awesome 5でよく使うアイコンやブランドロゴ、活用できそうなアイコンをご紹介しました。

Webデザインの参考になれば幸いです。

きょーみ

他にも世界のボードゲームやトランプゲーム、遊び方についての記事も書いています。是非見ていってください！

おすすめゲーム紹介 トランプゲーム一覧