画像を用意しなくともCSSでアイコンが作れる「Font Awesome」が超便利!!!

medium_4314365065
photo credit: kdonovangaddy via photopin cc

画像(アイコン)用意するのって面倒くさいですよね・・・。
わたしなんかは作成する技術もないし、ノウハウも持ってないし、
めっちゃ時間かかります。

修正するってなったら、また作らないといけないし、
画像の作成はかなり嫌いです。

そんなわたしのようなタイプの人にぴったりな、
アイコンを用意するのに、めちゃくちゃ便利なサイトがあるので紹介します!!!

「Font Awesome」の使い方

やることは2つ。

  • 「Font Awesome」のCSSを指定する。
  • 好きなアイコンのクラスを追加する。

です。

では早速やってみましょう。
まずは、「Font Awesome」へアクセス!
Font Awesome, the iconic font and CSS toolkit
fortawesome_01

スタイルシートを指定

<head>要素内に、以下のスタイルシートを追加します。 (中身を見たいことないけど、いろんなクラスが指定されていると思われ。)

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

Stinger(stinger3forFANS1)では、バージョン4.0.3が使われてました。

好きなアイコンを選んでクラス追加

ヘッダーから「Icons」を選択します。
fortawesome_02

アイコンの一覧が表示されます。
(テーマ別にかなりの量がありますね。)
fortawesome_03

好きなアイコンを選びクリックします。
ここでは例としてTwitterのアイコンを選びました。
fortawesome_04

なんのCSSクラスを指定すれば良いか、教えてくれます。
fortawesome_05

Twitterだと、以下のとおりに指定すればアイコンが表示されるようになります。

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

試しにやってみましょう!

Twitterのアイコンが表示されているのが分かります。

超手軽にアイコンを用意できる

とっても簡単でしょ!!!
画像作成とか面倒くさいし、苦手だって方にはおすすめです。

かなり多くのバリエーションがあるので、いろんな場面で重宝するサイトであることは間違いありません!

まとめ

「Font Awesome」の紹介と、簡単な使い方でした!
便利な機能なのでぜひ使ってみてください。