きょーみ
Font Awesomeのアイコンが大好きで、CDNを使ってブログでよく使っています。
2018年10月現在、Font Awesome 5で使えるアイコンの総数は、なんと1300種類以上!
無料版でも十分すぎるほど豊富な種類のアイコンが揃っています。
今回はわたしがFont Awesome 5でよく使うアイコンやブランドロゴ、活用できそうなアイコンをまとめてみました。
もくじ
ベーシックなアイコン
様々な場面で使えるベーシックなアイコンをまとめました。
ユーザー(一人)
ユーザーアイコンです。
<i class="fas fa-user fa-fw fa-lg "></i>
ユーザー(複数)
複数人のユーザーアイコンです。
<i class="fas fa-users fa-fw fa-lg "></i>
ユーザー(円形)
プロフィール風のユーザーアイコンです。
<i class="fas fa-user-circle fa-fw fa-lg "></i>
コメント(円形)
円形のコメントアイコンです。
<i class="fas fa-comment fa-fw fa-lg "></i>
コメント(四角)
四角いコメントアイコンです。
<i class="fas fa-comment-alt fa-fw fa-lg "></i>
会話
会話アイコンです。
<i class="fas fa-comment-dots fa-fw fa-lg "></i>
チェックマーク
シンプルなチェックマークのアイコンです。
<i class="fas fa-check fa-fw fa-lg "></i>
チェックマーク(円形)
円形のチェックマークのアイコンです。
<i class="fas fa-check-circle fa-fw fa-lg "></i>
チェックマーク(四角)
四角いチェックマークのアイコンです。
<i class="fas fa-check-square fa-fw fa-lg "></i>
ホーム
ホームアイコンです。
<i class="fas fa-home fa-fw fa-lg "></i>
サーチ
検索窓に使えそうなサーチアイコンです。
<i class="fas fa-search fa-fw fa-lg "></i>
¥マーク
¥マークのアイコンです。
<i class="fas fa-yen-sign fa-fw fa-lg "></i>
時計
時計のアイコンです。
<i class="fas fa-clock fa-fw fa-lg "></i>
カレンダー
カレンダーのアイコンです。
<i class="far fa-calendar-alt fa-fw fa-lg "></i>
通知マーク
通知マークのアイコンです。
<i class="fas fa-bell fa-fw fa-lg "></i>
アニメーション付きアイコン
アニメーションを効果的に使えば、アイコンに躍動感を持たせることができます。
アニメーションを使う場合は、それぞれ決まったクラス名をコードに追加します。
参考 Font Awesome AnimationFont Awesome Animation動くやじるし(縦揺れ)
faa-vertical animated
のクラス名を追加して、やじるしを縦に動かしています。
<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
のクラス名を追加して、やじるしを横に動かしています。
<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
のクラス名を使っています。
<i class="fas fa-music fa-fw fa-lg faa-shake animated"></i>
ジャーン!いいね
動きのあるいいねアイコンです。faa-tada animated
のクラス名を使っています。
<i class="far fa-thumbs-up fa-fw fa-lg faa-tada animated"></i>
ドキドキするハート
収縮&膨張を繰り返すハートのアイコンです。faa-pulse animated
のクラス名を使っています。
色はCSSで好みの色に指定してください。
<i class="fas fa-heart fa-fw fa-lg my-red faa-pulse animated"></i>
.my-red{color: #ce5242}
禁止マーク
2つのアイコンを重ねて、禁止マークを表現しています。
- 背面に表示するアイコンのクラス名に
fa-stack-2x
を追加する - 前面に表示するアイコンのクラス名に
fa-stack-1x
を追加する - 2つのコードを
<span class="fa-stack"></span>
で囲む
<span class="fa-stack">
<i class="fas fa-camera fa-stack-2x"></i>
<i class="fab fa-ban fa-stack-1x"></i>
</span>
撮影禁止
<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>
.small-09 {
font-size: 0.9em
/*0.9倍の大きさに*/}
駐車禁止
<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>
駐輪禁止
<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>
禁煙
<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>
.small-07 {
font-size: 0.7em
/*0.7倍の大きさに*/}
ペット禁止
<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>
接触禁止
<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>
.small-09 {
font-size: 0.9em
/*0.9倍の大きさに*/}
飲食禁止
<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>
.small-09 {
font-size: 0.9em
/*0.9倍の大きさに*/}
通話禁止
<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>
.small-09 {
font-size: 0.9em
/*0.9倍の大きさに*/}
fa-rotate-90
のクラス名を追加して90°回転させています。中のアイコンが大きいものは、CSSでサイズを調整しています。
ブランドロゴ
Font Awesome 5で使用できる主要なブランドのアイコンをまとめました。
各ブランドのカラーはSCHEMECOLORを参考にしています。
fa-3x
、fa-4x
の部分を変えて、アイコンの大きさを調整してください。
<i class="fab fa-google fa-3x fa-fw google-blue"></i>
.google-blue{color: #4285f4}
Apple
<i class="fab fa-apple fa-3x fa-fw apple-gray"></i>
.apple-gray{color: #7d7d7d}
<i class="fab fa-facebook-square fa-4x fb-blue"></i>
.fb-blue{color: #4267b2}
Amazon
<i class="fab fa-amazon fa-4x amazon-black"></i>
.amazon-black{color: #1c1919}
LINE
<i class="fab fa-line fa-4x line-green"></i>
.line-green{color: #00B900}
<i class="fab fa-twitter-square fa-4x tw-blue"></i>
.tw-blue{color: #1da1f2}
<span class="insta">
<i class="fab fa-instagram"></i>
</span>
.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;/*左右にずらす*/
}
上記のコードは、サルワカさんの記事を参考にカスタマイズしてみました。
背景①、背景②、インスタアイコンの3つパーツを組み合わせています。
コピペして使う場合は、表示させる場所やアイコンの大きさに合わせて、赤字部分に修正を加えてみてください。
Android
<i class="fab fa-android fa-4x fa-fw android-green"></i>
.android-green{color: #a4c639}
YouTube
<i class="fab fa-youtube fa-3x youtube-red"></i>
.youtube-red{color: #Ff0000}
Windows
<i class="fab fa-windows fa-3x fa-fw windows-blue"></i>
.windows-blue{color: #0078d7}
Font Awesomeでよくあるミス
最後にわたし自身がよく陥る、Font Awesomeでよくあるミスをまとめました。
アイコンが表示されなかったり、ズレている時はチェックしてみてください。
header内コードのバージョンが古い
新しいアイコンが表示されない場合、header内のコードが古いことが原因として考えられます。
header内のコード赤字部分を最新バージョンに変更してみてください。
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet">
余計な改行が入っている
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デザインの参考になれば幸いです。
きょーみ