厳選コピペ用｜Font Awesomeのアイコン

Font Awesomeの最新ver.が5.12.0っぽい。head内に放置されていたのは5.9だった。

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

Font Awesomeのアイコンシートを見て毎回どれを使おうか悩むのですが、実際はいつも同じものを使っている。ここらで頻繁に使うFont Awesomeのアイコンを自分用のコピペとして記事の中で整頓したいと思う。

Font Awesome | Free Icon

2020/01/31 All 1,553 Awesome Icon

全てUnicodeではなく、HTML。貼れば即アイコン化。

チェック

1	2	3	4

<i class="fas fa-check"></i>
<i class="far fa-check-square"></i>
<i class="fas fa-check-square"></i>
<i class="fas fa-check-double"></i>

リスト

1	2	3	4	5	6

<i class="fas fa-th-list"></i>
<i class="fas fa-list-ul"></i>
<i class="fas fa-list"></i>
<i class="fas fa-list-ol"></i>
<i class="far fa-list-alt"></i>
<i class="fas fa-bars"></i>

カーソル1

1	2	3	4	5	6	7	8

<i class="fas fa-caret-up"></i>
<i class="fas fa-caret-right"></i>
<i class="fas fa-caret-down"></i>
<i class="fas fa-caret-left"></i>
<i class="fas fa-angle-up"></i>
<i class="fas fa-angle-right"></i>
<i class="fas fa-angle-down"></i>
<i class="fas fa-angle-left"></i>

カーソル2

1	2	3	4	5	6	7	8

<i class="far fa-caret-square-up"></i>
<i class="far fa-caret-square-right"></i>
<i class="far fa-caret-square-down"></i>
<i class="far fa-caret-square-left"></i>
<i class="fas fa-caret-square-up"></i>
<i class="fas fa-caret-square-right"></i>
<i class="fas fa-caret-square-down"></i>
<i class="fas fa-caret-square-left"></i>

矢印1

1	2	3	4	5	6	7	8

<i class="fas fa-arrow-up"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-arrow-down"></i>
<i class="fas fa-arrow-right"></i>
<i class="fas fa-arrow-circle-up"></i>
<i class="fas fa-arrow-circle-right"></i>
<i class="fas fa-arrow-circle-down"></i>
<i class="fas fa-arrow-circle-left"></i>

矢印2

1	2	3	4	5	6	7	8

<i class="far fa-arrow-alt-circle-up"></i>
<i class="far fa-arrow-alt-circle-right"></i>
<i class="far fa-arrow-alt-circle-down"></i>
<i class="far fa-arrow-alt-circle-left"></i>
<i class="fas fa-arrow-alt-circle-up"></i>
<i class="fas fa-arrow-alt-circle-right"></i>
<i class="fas fa-arrow-alt-circle-down"></i>
<i class="fas fa-arrow-alt-circle-left"></i>

指さし

1	2	3	4	5	6	7	8

<i class="far fa-hand-point-up"></i>
<i class="far fa-hand-point-right"></i>
<i class="far fa-hand-point-down"></i>
<i class="far fa-hand-point-left"></i>
<i class="fas fa-hand-point-up"></i>
<i class="fas fa-hand-point-right"></i>
<i class="fas fa-hand-point-down"></i>
<i class="fas fa-hand-point-left"></i>

表情+その他

1	2	3	4	5	6	7	8

<i class="far fa-dizzy"></i>
<i class="far fa-meh"></i>
<i class="far fa-grin"></i>
<i class="far fa-smile"></i>
<i class="far fa-grin-wink"></i>
<i class="far fa-hand-paper"></i>
<i class="far fa-hand-peace"></i>
<i class="far fa-thumbs-up"></i>

その他1

1	2	3	4	5	6	7	8

<i class="fas fa-bomb"></i>
<i class="fas fa-book"></i>
<i class="far fa-bookmark"></i>
<i class="fas fa-bullseye"></i>
<i class="fas fa-chalkboard-teacher"></i>
<i class="far fa-clipboard"></i>
<i class="far fa-comment"></i>
<i class="far fa-envelope"></i>

その他2

1	2	3	4	5	6	7	8

<i class="far fa-bell"></i>
<i class="fas fa-info"></i>
<i class="fas fa-info-circle"></i>
<i class="fas fa-pen"></i>
<i class="fas fa-pen-square"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>

サイズ変更

等倍	1.3倍	2倍	3倍	4倍	5倍
	fa-lg	fa-2x	fa-3x	fa-4x	fa-5x

※1.3倍は1gではなく、lg（えるじー）

<i class="fas fa-pen"></i>
<i class="fas fa-pen fa-lg"></i>
<i class="fas fa-pen fa-2x"></i>
<i class="fas fa-pen fa-3x"></i>
<i class="fas fa-pen fa-4x"></i>
<i class="fas fa-pen fa-5x"></i>

見出し

見出しにするにはCSSの疑似要素を使う。
Font Awesome Free's Cheatsheet

たとえばこの見出しの場合

<h4>見出しの先頭にアイコン</h4>
.entry-content h4 {
 font-size: 17px;
 color: #494949;
 }
.entry-content h4:before {
 font-family: "Font Awesome 5 Free";
 content: "\f304";
 font-weight: 900;
 padding-right : 3px;
 color: #000;
 }

まとめ

だいたいいつも「アレ、どうやるんだっけ…」ってなるので、自分用のまとめ。

ブログのフォローやシェア用のボタンでフェイスブックのアイコンがブランクになってるモノをよく見かける。コード内容が更新されていたりするので、コピペしたけどアイコンが表示されない場合はコード内容をチェック。