アイコンのサイズを変える

FontAwesomeのアイコンのサイズを変更します。FontAwesomeで用意されているクラスを使うかHTMLやCSSでスタイルを指定することでサイズを変えることができます。

FontAwesomのクラスを使う

FontAwesomeにはあらかじめアイコンのサイズを変えるクラスが用意されています。HTMLタグのアイコンクラスに追加して使うことができます。

HTML

<i class="fas fa-check-circle fa-xs"></i> <!-- 0.75em -->
<i class="fas fa-check-circle fa-sm"></i> <!-- 0.875em -->
<i class="fas fa-check-circle fa-lg"></i> <!-- 1.33em -->
<i class="fas fa-check-circle fa-2x"></i> <!-- 2em -->
<i class="fas fa-check-circle fa-3x"></i> <!-- 3em -->
<i class="fas fa-check-circle fa-4x"></i> <!-- 4em -->
<i class="fas fa-check-circle fa-5x"></i> <!-- 5em -->
<i class="fas fa-check-circle fa-6x"></i> <!-- 6em -->
<i class="fas fa-check-circle fa-7x"></i> <!-- 7em -->
<i class="fas fa-check-circle fa-8x"></i> <!-- 8em -->
<i class="fas fa-check-circle fa-9x"></i> <!-- 9em -->
<i class="fas fa-check-circle fa-10x"></i> <!-- 10em -->

HTMLタグにスタイルを指定する

HTMLタグに直接スタイル（font-size）を指定してもサイズを変えることができます。用意されているクラスを使うよりもより細かい設定が可能です。

HTML

<i class="fas fa-check-circle" style="font-size: 2em;"></i>
<i class="fas fa-check-circle" style="font-size: 20px;"></i>
<i class="fas fa-check-circle" style="font-size: 200%;"></i>
<i class="fas fa-check-circle" style="font-size: large;"></i>

CSSでスタイルを指定する

CSSでもHTMLタグと同様にfont-sizeを指定することでサイズを変えることができます。CSSであれば一括定義ができるので便利です。

.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: '\f058';
	font-size: 2em;
}