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

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

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

はーい

大きさを変える

クラス名に「fa-lg」「fa-2x」などを追加します。
基本 <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>

色を変える

直接CSSを追加します。(例)style=”color:red”
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>

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

固定幅で揃える

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

横並び




縦並び

リスト表示で揃える

「fa-ul」「fa-li」で、フォントアイコンと文字間が一定間隔で空くなど、リスト表示に最適な形になります。
  • シャワー
  • コーヒー
  • ブリーフケース
  • タクシー