WEB

【FontAwesome5】よく使うアイコンフォントをまとめてみた。

今回は、2017年末に新しくなったFontAwesome5でよく使うアイコンをまとめてみました。 FontAwesom5の使い方と変更点については、こちらの記事で紹介しています。 https://creative-ip.com/archives/1437

フォントアイコンの使い方

Font Awesomeの詳しい使い方はこちらの記事をご覧ください。

HTMLにタグを張り付けて使う方法

<i class=””></i>のクラス内に使いたいアイコンのクラス名を張り付けます。

【HTMLコード】
<i class=”fab fa-apple ○○”>

CSS 疑似要素で使う方法

font-familyで”Font Awesome 5 Free”を読み込み、content: “\ “;の\の後にユニコードを張り付けます。 font-weightで文字のスタイル(無料版は”font-weight: 900;”)を選びます。

【HTMLコード】
これは<span class=”youtube”>YouTube</span>のアイコンです。
【CSSコード】
.youtube::before {
font-family: “Font Awesome 5 brands”;
font-weight: 900;
content: “\f007”;
}

矢印

アイコン クラス名 ユニコード
fas fa-angle-double-left f100
fas fa-angle-double-right f101
fas fa-angle-double-up f102
fas fa-angle-double-down f103
fas fa-angle-left f104
fas fa-angle-right f105
fas fa-angle-up f106
fas fa-angle-down f107
fas fa-arrow-alt-circle-down f358
fas fa-arrow-alt-circle-left f359
fas fa-arrow-alt-circle-right f35a
fas fa-arrow-alt-circle-up f35b
far fa-hand-point-right f0a4
far fa-hand-point-left f0a5
far fa-hand-point-up f0a6
far fa-hand-point-down f0a7
fas fa-long-arrow-alt-down f309
fas fa-long-arrow-alt-left f30a
fas fa-long-arrow-alt-right f30b
fas fa-long-arrow-alt-up f30c
fas fa-redo f01e

ソーシャルアイコン

アイコン クラス名 ユニコード
fab fa-twitter f099
fab fa-twitter-square f081
fab fa-facebook f09a
fab fa-facebook-square f082
fab fa-facebook-f f39e
fab fa-google-plus f2b3
fab fa-google-plus-g f0d5
fab fa-instagram f16d
fas fa-rss-square f143
fab fa-get-pocket f265
fab fa-youtube f167
fab fa-youtube-square f431
fab fa-pinterest f0d2
fab fa-pinterest-square f0d3
fab fa-pinterest-p f231
fab fa-linkedin f08c
fab fa-linkedin-in f0e1
fab fa-dribbble f17d
fab fa-dribbble-square f397
fab fa-behance f1b4
fab fa-behance-square f1b5
fab fa-skype f17e

 

生活アイコン

アイコン クラス名 ユニコード
far fa-address-book f2b9
far fa-address-card f2bb
far fa-calendar f133
far fa-calendar-check f274
fas fa-briefcase f0b1
far fa-bell f0f3
fas fa-book f02d
fas fa-calculator f1ec
fas fa-chart-area f1fe
fas fa-chart-bar f080
fas fa-chart-line f201
fas fa-chart-pie f200
fas fa-clipboard f328
fas fa-envelope-open f2b6
fas fa-eraser f12d
fas fa-pencil-alt f303

企業ロゴアイコン

アイコン クラス名 ユニコード
fab fa-amazon f270
fab fa-amazon-pay f42c
fab fa-aws f375
fab fa-apple f179
fab fa-apple-pay f415
fab fa-android f17b
fab fa-google f1a0
fab fa-google-play f3ab
fab fa-google-drive f3aa
fab fa-chrome f268
fab fa-microsoft f3ca
fab fa-windows f17a
fab fa-edge f282
fab fa-internet-explorer f26b
fab fa-linux f17c
fab fa-github f09b
fab fa-github-square f092
fab fa-github-alt f113
fab fa-bitcoin f379
fab fa-firefox f269
fab fa-dropbox f16b

クレジットカード

アイコン クラス名 ユニコード
fab fa-cc-visa f1f0
fab fa-cc-stripe f1f5
fab fa-cc-paypal f1f4
fab fa-cc-discover f1f2
fab fa-cc-mastercard f1f1
fab fa-cc-jcb f24b
fab fa-cc-diners-club f24c
fab fa-cc-amex f1f3
fab fa-cc-amazon-pay f42d
fab fa-cc-apple-pay f416

WEB関連

アイコン クラス名 ユニコード
fab fa-html5 f13b
fab fa-css3 f13c
fab fa-css3-alt f38b
fab fa-php f457
fab fa-wordpress f19a
fab fa-wordpress-simple f411

ゲーム

アイコン クラス名 ユニコード
fab fa-nintendo-switch f418
fab fa-playstation f3df
fab fa-xbox f412
fab fa-steam f1b6
fab fa-steam-square f1b7
fab fa-steam-symbol f3f6

Nintendo SwicthやPlayStationのロゴも追加されています。

スポーツ

アイコン クラス名 ユニコード
fas fa-baseball-ball f433
fas fa-basketball-ball f434
fas fa-bowling-ball f436
fas fa-football-ball f44e
fas fa-futbol f1e3
fas fa-golf-ball f450
fas fa-hockey-puck f453
fas fa-table-tennis f45d
fas fa-volleyball-ball f45f

まとめ

SNSやブログで使えるアイコンをジャンル別でまとめてみました。 他にもたくさのアイコンがあるので、公式サイトのアイコン一覧で調べてみてください。

FontAwesome5 アイコン一覧