今更ながら Web 用のアイコンを表示する為に Font Awesome を使ってみた

シェアする

今作成している Web サイトでアイコンを表示するのに Font Awesome を使ってみた。シンプルで見やすいしフリーで使えて CSS を読み込むだけで便利なのでメモしておこう。

Sponsored Links

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 の表示をカスタマイズする

ただ表示するだけでなく、アイコンに対して様々な操作を行う事ができる。

アイコンを大きくする

アイコン表示の際、クラスに 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>&nbsp; Car</li>
	<li class="list-group-item" href="#"><i class="fa fa-bus fa-fw"></i>&nbsp; Bus</li>
	<li class="list-group-item" href="#"><i class="fa fa-bicycle fa-fw"></i>&nbsp; Bicycle</li>
	<li class="list-group-item" href="#"><i class="fa fa-motorcycle	fa-fw"></i>&nbsp; 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 でどのような事ができるのかを覚えておけば後々役に立つだろう。

Sponsored Link

シェアする

フォローする