アイコンの色を変える

HTMLタグにスタイルを追加する

HTMLタグでアイコンの色を変えたい場合は、colorのスタイルを追加します。

<i class="fas fa-star" style="color:red;"></i>

CSSでスタイルを指定する

CSSで色を変えたい場合にもHTMLタグと同様にcolorのスタイルを追加します。ただし、擬似要素のcolorは親要素のスタイルが引き継がれているため、アイコンを親要素と違う色にしたい場合に指定をおこないます。

.icon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f005';
	color: red;
}

リンクなどでアイコンを使う場合に、マウスオーバーでアイコンの色を変えたい場合は以下のようにします。

.icon:hover:before{
	color: red;
}