よもやまチョモランマ

よく使うFont Awesome

使い始めてみれば、やっぱり便利なものがデフォルトになってゆくものですね。
もう自分でアイコン作る生活には戻りたくない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”」とはなんだろう