よく使うFont Awesome
WEB随時更新
CSSFont AwesomeHTML
使い始めてみれば、やっぱり便利なものがデフォルトになってゆくものですね。
もう自分でアイコン作る生活には戻りたくないdeath☆
というわけで、よく使うアイコンをまとめておこうと思います。
たまに 公式 見て追加しよう。
| ユニコード | HTMLクラス | アイコン |
|---|---|---|
| f015 | fas fa-home | |
| f0e0 | fas fa-envelope | |
| f0e0 | far fa-envelope | |
| f095 | fas fa-phone | |
| f098 | fas fa-phone-square | |
| f1ac | fas fa-fax | |
| f56d | fas fa-file-download | |
| f3cd | fas fa-mobile-alt | |
| f0c9 | fas fa-bars | |
| f077 | fas fa-chevron-up | |
| f106 | fas fa-angle-up | |
| f102 | fas fa-angle-double-up | |
| f062 | fas fa-arrow-up | |
| f0d8 | fas fa-caret-up | |
| f0da | fas fa-caret-right | |
| f04b | fas fa-play | |
| f144 | fas fa-play-circle | |
| f105 | fas fa-angle-right | |
| f054 | fas fa-chevron-right | |
| f138 | fas fa-chevron-circle-right | |
| f35a | fas fa-arrow-alt-circle-right | |
| f0a9 | fas fa-arrow-circle-right | |
| f002 | fas fa-search | |
| f07c | fas fa-folder-open | |
| f02b | fas fa-tag | |
| f303 | fas fa-pencil-alt | |
| f073 | fas fa-calendar-alt | |
| f073 | far fa-calendar-alt | |
| f007 | fas fa-user | |
| f059 | fas fa-question-circle | |
| f06a | fas fa-exclamation-circle | |
| f07a | fas fa-shopping-cart | |
| f004 | fas fa-heart | |
| f005 | fas fa-star | |
| f4d8 | fas fa-seedling | |
| f1b0 | fas fa-paw | |
| f0c6 | fas fa-paperclip | |
| f5ad | fas fa-pen-nib | |
| f086 | fas fa-comments | |
| f06b | fas fa-gift | |
| f030 | fas fa-camera | |
| f2e7 | fas fa-utensils | |
| f0f4 | fas fa-coffee | |
| f54c | fas fa-skull | |
| f2fe | fas fa-poo | |
| f15b | fas fa-file | |
| f15c | fas fa-file-alt | |
| f1c5 | fas fa-file-image | |
| f570 | fas fa-file-invoice | |
| f09a | fab fa-facebook | |
| f082 | fab fa-facebook-square | |
| f099 | fab fa-twitter | |
| f081 | fab fa-twitter-square | |
| f09e | fas fa-rss | |
| f143 | fas fa-rss-square | |
| f3c0 | fab fa-line | |
| f16d | fab fa-instagram |
使い方としては
headにCDNコードを記述して
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
表示したいところにHTMLで記述するか
<i class="fas fa-home"></i>
ウィジェットで使うものなんかはCSSに記述するか
.tagcloud:before {
font-family: "Font Awesome 5 Free";
content: '\f1e2';
font-weight: 900;
}
なんですけど。
2017年末に新Verがリリースされて、CSSの書き方とか、headに記述するCDNコードが変わっています。
【参考】【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
ちなみに、こんなふうにHTMLに「aria-hidden=”true”」がついている場合があります。
<i class="fas fa-home" aria-hidden="true"></i>
「aria-hidden=”true”」は、「WAI-AREA で定められている仕様の1つであり、trueが指定してある場合、ブラウザにその要素が非表示であるという事を明示的に伝えるもの」だそうで、アクセシビリティ向上のためにはつけておいた方が良さそうとのことです。
【参考】Font Awesomeでも使われている「area-hidden=”true”」とはなんだろう