アイコンの幅を揃える

FontAwesomeのアイコンはそれぞれで幅が異なります。そのためリストなどで縦に並べるような場合にキレイに並べられないことがあります。このような場合にアイコンの幅を揃える方法を解説します。FontAwesomのクラスを使う方法とCSSで設定する方法の２通りがあります。

アイコンの幅を揃えてない場合

テキスト
テキスト
テキスト
テキスト

アイコンの幅を揃えた場合

テキスト
テキスト
テキスト
テキスト

FontAwesomのクラスを使う

FontAwesomeにはアイコンの幅を揃えるためのクラスが用意されています。HTMLタグでクラスにfa-fwを追加することでアイコンの幅を揃えることができます。

HTML

<i class="fas fa-angle-right fa-fw"></i>テキスト<br>
<i class="fas fa-angle-double-right fa-fw"></i>テキスト<br>
<i class="fas fa-caret-right fa-fw"></i>テキスト<br>
<i class="fas fa-arrow-right fa-fw"></i>テキスト<br>

またリストで使うためのクラスも用意されています。ulタグにfa-ulクラスを追加し、リスト内のアイコンタグをspanタグのfa-liクラスで囲みます。このリスト用のクラスは文字の折り返しにも対応しています。

HTML

<ul class="fa-ul">
	<li><span class="fa-li"><i class="fas fa-angle-right"></i></span>テキスト</li>
	<li><span class="fa-li"><i class="fas fa-angle-double-right"></i></span>テキスト</li>
	<li><span class="fa-li"><i class="fas fa-caret-right"></i></span>テキスト</li>
	<li><span class="fa-li"><i class="fas fa-arrow-right"></i></span>テキスト</li>
</ul>

CSSでスタイルを指定する

CSSで幅を揃える場合、display:inline-block;・text-align:center;・width:1.25em;をスタイルに適用してください。widthの値に関しては各アイコンで一定であればいいので状況に応じて値を設定してください。

HTML

<span class="icon icon1">テキスト</span><br>
<span class="icon icon2">テキスト</span><br>
<span class="icon icon3">テキスト</span><br>
<span class="icon icon4">テキスト</span><br>

.icon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	display: inline-block;
	text-align: center;
	width: 1.25em;
}

.icon1:before{ content: '\f105'; }
.icon2:before{ content: '\f101'; }
.icon3:before{ content: '\f0da'; }
.icon4:before{ content: '\f061'; }