無料WEBアイコンフォント「Font Awesome」の使い方

SNSなどのソーシャルアイコンやwebアプリケーション、ホームページ制作関連のアイコンが何でも揃っているFont Awesomeの使い方の紹介です。 Font Awesomeで使えるアイコンは画像ではなく、Webフォントなので色やデザインなどもCSSで自由に設定できます。 例えばのような感じのアイコンが全部webフォントで実現できます。

そしてFont Awesomeでは、装飾用のクラスが用意されているので難しいCSSは一切必要ありません。(もちろんcssで装飾する事もできます)

なので初心者にも優しい仕様になってます。 ということで、Font Awesomeの使い方などを紹介していきますね。

目次
まとめ

Font Awesomeの使い方

Font Awesomeの導入方法・基本的な使い方についてはスマホやタブレットなどのアイコンフォント【Font Awesome】のページで詳しく紹介しています。 このページではFont Awesomeで用意してあるクラス(class属性)を使ったアイコンの装飾関連全般について紹介していきます。

また詳しい使い方についてはFont Awesome Examplesでもご覧になれます。

アイコンフォントの基本

アイコンフォント(アイコン)の基本的な使い方は、Font Awesome Iconsのアイコン一覧に記載されている各アイコンのclass名(class属性の値)をアイコンを表示させたい要素(h1やpなど)に指定することで、そのアイコンフォントを表示させることができます。

例えばfontawesomeのアイコン説明ページでは、iタグに対してclass属性を指定していますが、これはdivタグでもspanタグでも使う事ができます。

表示例

fa-google-plus-square
<i class="fa fa-google-plus-square"></i>fa-google-plus-square

アイコンフォントのサイズを変える

Font Awesomeを導入した時にアップロードしたCSSファイル「font-awesome.min.css」には、予め5段階でサイズが変更できるclassが含まれています。 これを利用する事で、CSSをいじらずにアイコンフォントの大きさを変更できます。

利用できるclassは「fa-lg」(約1.33倍)、「fa-2x」(2倍)、「fa-3x」(3倍)、「fa-4x」(4倍)、「fa-5x」(5倍)となっています。

表示例

default fa-lg fa-2x fa-3x fa-4x fa-5x
<i class="fa fa-google-plus-square"></i> default
<i class="fa fa-google-plus-square fa-lg"></i> fa-lg
<i class="fa fa-google-plus-square fa-2x"></i> fa-2x
<i class="fa fa-google-plus-square fa-3x"></i> fa-3x
<i class="fa fa-google-plus-square fa-4x"></i> fa-4x
<i class="fa fa-google-plus-square fa-5x"></i> fa-5x

アイコンフォントの色を変える

アイコンフォントの色を設定できるclassは、「font-awesome.min.css」には含まれていません。 なので、独自にスタイルを指定してあげる必要があります。

方法はCSSファイルに記述するか、HTMLタグに直接スタイルを記述するかの2パターンありますが、アイコンフォントはフォント(文字)なので、通常のテキストの色を変える時と同じ感覚で変更することができます。

表示例

color:blue color:red
<i class="fa fa-google-plus-square sample1"></i>
<i class="fa fa-google-plus-square" style="color: red;"></i>
i.sample1 {color: blue;}

アイコンフォントの横幅を統一

アイコンフォントは、各アイコンごとに横幅が違うため、後ろに続くテキストの開始位置がずれてしまう事があります。 例えば何も指定していない場合は下記のようになります。

fa-google-plus-square
fa-cc-paypal
a-cc-mastercard
fa-apple
fa-digg

これを解決するためにはclass属性に「fa-fw」を追加してあげます。

表示例

fa-google-plus-square
fa-cc-paypal
a-cc-mastercard
fa-apple
fa-digg
<i class="fa fa-google-plus-square fa-fw"></i> fa-google-plus-square<br />
<i class="fa fa-cc-paypal fa-fw"></i> fa-cc-paypal<br />
<i class="fa fa-cc-mastercard fa-fw"></i>  a-cc-mastercard<br />
<i class="fa fa-apple fa-fw"></i> fa-apple<br />
<i class="fa fa-digg fa-fw"></i> fa-digg

リストマークをアイコンフォントにする

リストマークをアイコンフォントにするには、ulまたはolのclass属性に「fa-ul」を指定し、アイコンフォントのclassを指定している属性に「fa-li」を追加してあげます。 そうする事で、ulなら黒丸(・)、olなら番号の部分にアイコンフォントが表示されるようになります。

表示例

  • fa-caret-square-o-right
  • fa-chevron-circle-right
  • fa-arrow-circle-right
  • fa-hand-o-right
<ul class="fa-ul">
  <li><i class="fa fa-caret-square-o-right fa-li"></i> fa-caret-square-o-right</li>
  <li><i class="fa fa-chevron-circle-right fa-li"></i> fa-chevron-circle-right</li>
  <li><i class="fa fa-arrow-circle-right fa-li"></i> fa-arrow-circle-right</li>
  <li><i class="fa fa-hand-o-right fa-li"></i> fa-hand-o-right</li>
</ul>

アイコンフォントに枠線をつける

アイコンフォントに枠線(ボーダー)を付けるには、class属性に「fa-border」を追加します。 ボーダーの色を変えるには、border-colorプロパティなどで独自にスタイルを指定する必要があります。

表示例

default fa-border red blue
<i class="fa fa-facebook"> default</i>
<i class="fa fa-facebook fa-border"> fa-border</i>

<!-- 下記は色を変更の例 -->
<i class="fa fa-facebook fa-border" style="border-color: red;"></i> red
<i class="fa fa-facebook fa-border sample1"></i> blue
i.sample1 {border-color: blue;}

アイコンフォントの回り込み

アイコンフォントをテキストなどの横に回り込ませる事ができます。

「fa-pull-left」をclass属性に追加でアイコンフォントが左端に移動し、続く要素がその右に回り込みます。 「fa-pull-right」を追加するとアイコンフォントが右端に移動し、続く要素がその左に回り込みます。 これは実際にはアイコンフォントにfloatプロパティが設定されることになります。

表示例

左が「fa-quote-left」、右が「fa-quote-right」のアイコンフォントです
<i class="fa fa-quote-left fa-pull-left"></i>
左が「fa-quote-left」、右が「fa-quote-right」のアイコンフォントです
<i class="fa fa-quote-right fa-pull-right"></i>

アイコンフォントを重ねる

複数のアイコンフォントを重ねて表示するには、アイコンフォントのclassが指定されている要素の親要素に「fa-stack」を指定します。 そして重ねたいアイコンフォントの要素のclass属性に「fa-stack-1x」(標準サイズで重ねる)、「fa-stack-2x」(2倍サイズで重ねる)を追加します。 重なる順番は要素を記述した順番となります。

また「fa-stack-1x」「fa-stack-2x」では、アイコンのサイズが調整できます。 あと「fa-inverse」をclass属性に追加すると、色の反転をすることも可能です。

表示例

fa-mobile、fa-ban
fa-banの色は独自に指定しています。

<div class="fa-stack">
  <i class="fa fa-mobile fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x"></i>
</div>

アイコンフォントを回転させる

回転させるにはclass属性に「fa-spin」、または「fa-pulse」を指定します。 二つの違いは、滑らかに回転させるか、8フレームで回転させるかとなってます。

表示例

fa-spin
fa-spin
fa-spin
fa-pulse
fa-pulse
fa-pulse
<i class="fa fa-spinner fa-spin"></i> fa-spin
<i class="fa fa-circle-o-notch fa-spin"></i> fa-spin
<i class="fa fa-firefox fa-spin"></i> fa-spin
<i class="fa fa-spinner fa-pulse"></i> fa-pulse
<i class="fa fa-circle-o-notch fa-pulse"></i> fa-pulse
<i class="fa fa-firefox fa-pulse"></i> fa-pulse

アイコンフォントの角度

「fa-rotate-90」「fa-rotate-180」「fa-rotate-270」の各classを追加すると角度を変更することができます。 数字で90、180、270となっていますが、これは傾く角度の割合となっています。

表示例

default
fa-rotate-90
fa-rotate-180
fa-rotate-270
<i class="fa fa-bus"></i> default
<i class="fa fa-bus fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-bus fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-bus fa-rotate-270"></i> fa-rotate-270

アイコンフォントを反転

「fa-flip-horizontal」で左右反転、「fa-flip-vertical」で上下反転させることができます。 どちらもclass属性に追加して下さい。

表示例

default
fa-flip-horizontal
fa-flip-vertical
<i class="fa fa-shield"></i> default<br />
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br />
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

まとめ

こんな感じで自分でスタイルを適用しなくても、簡単にアイコンのデザインを変える事ができます。 ですが予め用意されているスタイルは、サイトによってはスタイルが被っていたりして上手く適用できない事もあるかもしれないので、 その時はcssを修正してみて下さい。

それと「Font Awesome Examples」のページに、ここでは紹介していないボタンなどについてのサンプルもあるので良ければ見てみて下さい! あと別ページで紹介したのですが、疑似要素とUnicodeを使用してアイコンフォントを表示させるすごい便利になるので是非そちらも試してみて下さいね(^^♪