fontawesome を css で扱う

Font Awesome は画像を用意する必要がない便利なテキストアイコンを提供しているサービス。

• Font Awesome - icons

こういうの↓

<i class="fas fa-star"></i>
<i class="fas fa-users"></i>
<i class="fas fa-home"></i>
<i class="fas fa-search"></i>

css で表示させる

• やり方は Font Awesome - CSS Pseudo-elements (英語) に書いてある。
• 今回使用するアイコン Font Awesome - star
  • 「 f005 (Click to Copy Unicode) 」と書いてあるのでこれをコピーする。

.icon::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/*
font-family を 「Font Awesome 5 Free」 「Font Awesome 5 Pro (有料)」 にする。
font-weight は 900 (Solid), 400 (Regular or Brands), 300 (Light) になる。
*/
.star::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f005";
}

<div class="icon star"></div>