読者です 読者をやめる 読者になる 読者になる

はるらぼ

jQuery、Perl、Linux、デザイン、UI関連の備忘録です。※引用する場合は自己責任で。

フォントアイコン「Font Awesome」を使ってみた

web

今更やってみるシリーズ!「Font Awesome」を使ってみました。

素敵サイトさんでわかりやすく紹介されてるので、ここ見れば理解できると思います。 一行追加するだけ!CSSのみで使えるフォントアイコン【Font Awesome】の使い方とサンプル | はぴすぷ

使い方

仕事で使うならサーバに置きたいところだけど、 今回は読み込む方法でさくっと行きます。

1.下記を読み込む。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

2.iタグにclass指定。

classは公式サイトの一覧から選んで記入。

<i class="fa fa-link"></i>

でた!

3.class指定でいろいろ動かせる

<i class="fa fa-link fa-spin"></i>
<i class="fa fa-bold fa-rotate-90"></i>

まわる〜まわるよ〜
90度回転〜

4.自由自在なサイズ

<i class="fa fa-link fa-2x"></i>
<i class="fa fa-link" style="font-size: 200px;"></i>

倍サイズ > pxでも指定可能

5.色も変更可能

<span style="background: #000;"><i class="fa fa-link fa-inverse"></i></span>
<i class="fa fa-link" style="color: red;"></i>

白抜き
好きな色を指定可能

あと重ねたりできるらしいです。すごいなぁ。

公式サイト(英語)

fontawesome.io