フォントアイコンのタグ一覧｜Font Awesome

2017年10月2日2018年7月22日

Font Awesomeバージョン4.7のものです。2017年末に新しくバージョン5が公開しています。
バージョン4.7と5は内容が異なるため、バージョン5は追々解説します。

[kaiwa1]フォントアイコンで人気の高いFont Awesomeについて、用途別にタグ一覧を作ってみました。ご参考にどうぞ。[/kaiwa1]
[kaiwa2]はーい[/kaiwa2]

大きさを変える

[kaiwa1]クラス名に「fa-lg」「fa-2x」などを追加します。[/kaiwa1]

	基本	–	<i class="fa fa-check-circle-o"></i>
	fa-lg	基本の1.333倍	<i class="fa fa-check-circle-o fa-lg"></i>
	fa-2x	基本の2倍	<i class="fa fa-check-circle-o fa-2x"></i>
	fa-3x	基本の3倍	<i class="fa fa-check-circle-o fa-3x"></i>
	fa-4x	基本の4倍	<i class="fa fa-check-circle-o fa-4x"></i>
	fa-5x	基本の5倍	<i class="fa fa-check-circle-o fa-5x"></i>

色を変える

[kaiwa1]直接CSSを追加します。(例）style="color:red"[/kaiwa1]

	color:red	色の名前	<i class="fa fa-check-circle-o fa-3x" style="color:red"></i>
	color:#00BFFF	色コード	<i class="fa fa-check-circle-o fa-3x" style="color:#00BFFF"></i>

[kaiwa1]CSSファイルに追加する方法もあります。一斉に反映させる場合はこちらがオススメです。[/kaiwa1]

i {
color:red;
}

固定幅で揃える

[kaiwa1]「fa-fw」追加で、フォントアイコンの部分を固定幅＆真ん中寄りにして、タテやヨコに並べても一定の間隔で表示させます。[/kaiwa1]
横並び

<i class="fa fa-address-card fa-3x fa-fw" aria-hidden="true"></i><i class="fa fa-mobile fa-3x fa-fw" aria-hidden="true"></i><i class="fa fa-arrows-v fa-3x fa-fw" aria-hidden="true"></i>

---

縦並び

<i class="fa fa-address-card fa-3x fa-fw" aria-hidden="true"></i>
<i class="fa fa-mobile fa-3x fa-fw" aria-hidden="true"></i>
<i class="fa fa-arrows-v fa-3x fa-fw" aria-hidden="true"></i>

リスト表示で揃える

[kaiwa1]「fa-ul」「fa-li」で、フォントアイコンと文字間が一定間隔で空くなど、リスト表示に最適な形になります。[/kaiwa1]

• シャワー
• コーヒー
• ブリーフケース
• タクシー

<ul class="fa-ul">
  <li><i class="fa-li fa fa-shower"></i>シャワー</li>
  <li><i class="fa-li fa fa-coffee"></i>コーヒー</li>
  <li><i class="fa-li fa fa-briefcase"></i>ブリーフケース</li>
  <li><i class="fa-li fa fa-taxi"></i>タクシー</li>
</ul>