Font Awesomeの使い方。一行追加するだけでアイコンを画像を使わずに表示!
2016.09.15
カテゴリ：WEB制作
タグ：
1.たった1行追加するだけ。
使い方は至って簡単でCDNサーバーにアクセスしてCSSを読み込ませるだけです。|
1 |
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
2.表示する方法。
まずは、Font一覧にアクセスして使いたいアイコンを探します。 例としてよく使うHOMEボタンを選んでみます。
|
1 |
<i class="fa fa-home"></i>Home |
Home
【fa】のクラス名は必須ですので必ず、自分の使いたいクラス名と併せて書いてください。
3.アイコンを回転させる方法。
矢印等はよく回転させて使ったりしますがその際はrotateを使います。下記がコードです。
|
1 2 3 |
<i class="fa fa-arrow-circle-left fa-rotate-90"></i>90度回転 <i class="fa fa-arrow-circle-left fa-rotate-180"></i>180度回転 <i class="fa fa-arrow-circle-left fa-rotate-270"></i>270度回転 |
回転無し
90度回転
180度回転
270度回転
4.大きさの指定について
Font Awesomeはあくまでフォントなので大きさはcssでfont-sizeを指定する事ができます。ただ、クラスを付与する事でもサイズ指定が出来ます。
下記、コードです。
|
1 2 3 4 5 |
<i class="fa fa-home fa-lg"></i>1.33倍 <i class="fa fa-home fa-2x"></i>2倍 <i class="fa fa-home fa-3x"></i>3倍 <i class="fa fa-home fa-4x"></i>4倍 <i class="fa fa-home fa-5x"></i>5倍 |
1.33倍
2倍
3倍
4倍
5倍
5.アイコンを複数重ねる
複数のアイコンを重ねる事で新たにアイコンを作る事が出来ます。 ツイッターのアイコンを作ってみましょう。コードから見ていきます。
|
1 2 3 4 |
<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-white"></i> </span> |
= fa-square + fa-twitter
ツイッターアイコンと角丸を重ねて見ました。 解説します。まず、親要素にfa-stackというクラス名を付けます。
角丸に【fa-stack-2x】というクラス名を付けてフォントサイズを2倍にします。
次に ツイッターマークに【fa-stack-1x】のクラス名を付けてフォントサイズを標準に指定します。
別途、ツイッターアイコンはcssで色指定をしますので【fa-white】と適当な名前を付けて下記のようにcssを適用させます。
|
1 2 3 4 |
.fa-white:before { color: #fff; } |
