フォントアイコン「Font Awesome」を使ってみた
今更やってみるシリーズ！「Font Awesome」を使ってみました。
素敵サイトさんでわかりやすく紹介されてるので、ここ見れば理解できると思います。 一行追加するだけ！CSSのみで使えるフォントアイコン【Font Awesome】の使い方とサンプル | はぴすぷ
使い方
仕事で使うならサーバに置きたいところだけど、 今回は読み込む方法でさくっと行きます。
１．下記を読み込む。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
２．iタグにclass指定。
classは公式サイトの一覧から選んで記入。
<i class="fa fa-link"></i>
でた！
３．class指定でいろいろ動かせる
<i class="fa fa-link fa-spin"></i> <i class="fa fa-bold fa-rotate-90"></i>
まわる〜まわるよ〜
90度回転〜
４．自由自在なサイズ
<i class="fa fa-link fa-2x"></i> <i class="fa fa-link" style="font-size: 200px;"></i>
倍サイズ > pxでも指定可能
５．色も変更可能
<span style="background: #000;"><i class="fa fa-link fa-inverse"></i></span> <i class="fa fa-link" style="color: red;"></i>
白抜き
好きな色を指定可能
あと重ねたりできるらしいです。すごいなぁ。
公式サイト（英語）
