今作成している Web サイトでアイコンを表示するのに Font Awesome を使ってみた。シンプルで見やすいしフリーで使えて CSS を読み込むだけで便利なのでメモしておこう。
Font Awesome, the iconic font and CSS toolkit
Font Awesome のインストール
Font Awesome を Web サイトで使う方法はいくつかあります。
BootstrapCDN を利用する
以下の link タグを HTML の <head> 内に記述する事で Font Awesome を CDN から読み込み利用する事が可能です。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
ダウンロードして利用する
もちろん Font Awesome よりファイル一式をダウンロードしても利用できます。font-awesome ディレクトリを自分のプロジェクト内にコピーして以下のように font-awesome.min.css を読み込みます。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
LESS や SASS を Ruby Gem から使用する
Ruby を用いたシステムであれば Gem 経由で LESS や SASS 形式のファイルをインストールして利用すると便利かもしれない。
Gemfile に以下のように記述し、
gem 'font-awesome-less' # less の場合
gem 'font-awesome-sass' # sass の場合
bundle コマンドを実行しよう。
もしくは以下のように gem install コマンドを直接実行しても良い。
$ gem install font-awesome-less # less の場合
$ gem install font-awesome-sass # sass の場合
もし Rails であれば application.scss に以下のように記述して読み込ませよう。
@import "font-awesome-sprockets";
@import "font-awesome";
Font Awesome を使用する
上記の CSS さえ読み込ませればアイコンを表示したい場所に以下のように html を記述するだけで Font Awesome のアイコンを表示できる。
fa-paw
<i class="fa fa-paw"></i> fa-paw
基本的には i タグのクラスに fa 及び fa-アイコン名 を指定する事で表示する。css 自体は i タグを指定しているわけではないのでなんでも表示はできる。
どのようなアイコンがあるのかは Font Awesome の Web サイトを参照してもらいたい。大量にある。
Font Awesome IconsFont Awesome の表示をカスタマイズする
ただ表示するだけでなく、アイコンに対して様々な操作を行う事ができる。
アイコンを大きくする
アイコン表示の際、クラスに fa-lg や fa-2x などとつけるとアイコンが大きくなります。
fa-lg fa-2x fa-3x fa-4x fa-5x
<i class="fa fa-paw fa-lg"></i> fa-lg
<i class="fa fa-paw fa-2x"></i> fa-2x
<i class="fa fa-paw fa-3x"></i> fa-3x
<i class="fa fa-paw fa-4x"></i> fa-4x
<i class="fa fa-paw fa-5x"></i> fa-5x
アイコンを固定幅にする
ナビゲーションの頭に表示する時など、アイコンの幅が可変だと困る場所では fa-fw クラスをつけて幅を固定にする事ができます。
- Car
- Bus
- Bicycle
- Motorcycle
<ul class="list-group">
<li class="list-group-item" href="#"><i class="fa fa-car fa-fw"></i> Car</li>
<li class="list-group-item" href="#"><i class="fa fa-bus fa-fw"></i> Bus</li>
<li class="list-group-item" href="#"><i class="fa fa-bicycle fa-fw"></i> Bicycle</li>
<li class="list-group-item" href="#"><i class="fa fa-motorcycle fa-fw"></i> Motorcycle</li>
</ul>
リストアイコンに使用する
li タグのアイコンとしても使用できます。
- mobile
- laptop
- desktop
<ul class="fa-ul">
<li><i class="fa-li fa fa-mobile"></i>mobile</li>
<li><i class="fa-li fa fa-laptop"></i>laptop</li>
<li><i class="fa-li fa fa-desktop"></i>desktop</li>
</ul>
枠線をつける
fa-border クラスを追加すると枠線がつきます。
<i class="fa fa-3x fa-paw fa-border"></i>
左寄せ、右寄せする
fa-pull-right か fa-pull-left を使う事で他のコンテンツを回りこませる事ができます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie eget felis sit amet condimentum. Donec ante lorem, fermentum id ullamcorper nec, porta a enim. Mauris sed efficitur turpis. Suspendisse elit tellus, viverra sit amet fringilla eu, mattis ut tortor.
<i class="fa fa-quote-left fa-2x fa-pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie eget felis sit amet condimentum. Donec ante lorem, fermentum id ullamcorper nec, porta a enim. Mauris sed efficitur turpis. Suspendisse elit tellus, viverra sit amet fringilla eu, mattis ut tortor.
アイコンをアニメーションさせる
fa-spin もしくは fa-puls クラスをつけると回転させる事ができる。fa-spin が通常の回転で fa-puls が 45 度ずつの回転となる。
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-circle-o-notch fa-pulse"></i>
アイコンを回転もしくは左右反転させる
fa-rotate-90 や fa-flip-horizontal などとつけると回転させたり左右反転させたりできる。
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical
<i class="fa fa-coffee"></i> normal<br>
<i class="fa fa-coffee fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-coffee fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-coffee fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-coffee fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-coffee fa-flip-vertical"></i> icon-flip-vertical
アイコンを複数重ねる
あるアイコンを丸で囲んだり、他のアイコンで重ねたりする事もできる。
重ねたいアイコン複数を fa-stack クラスをつけたタグの中に入れ、fa-stack-2x などで大きさを指定する。アイコンが重なる場合は fa-inverse で反転させる。
fa-history on fa-square-o
fa-level-up on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-history fa-stack-1x"></i>
</span>
fa-history on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-level-up fa-stack-1x fa-inverse"></i>
</span>
fa-level-up on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
まとめ
このブログのテーマでも使っているが、手軽にアイコンをつけれてとても便利だ。 クラスの指定の仕方などはなかなか覚えれないが Font Awesome でどのような事ができるのかを覚えておけば後々役に立つだろう。