無料で使えるアイコンフォントFont Awesomeの使い方

初めて使うアイコンフォントの導入から設置完了までを備忘録として記事にしてみたいと思います。

使い方を知らないだけで便利なものが沢山あります。

他にも色々とあるのですが、今回試してみたのが、「Font Awesome」というものです。

FontAwesome002

アイコンフォントって響きが、

かっこいいーっ!

知っただけで満足しそうです。

スポンサーリンク

導入のきっかけ

使えるなら使ってみたい!

これに尽きます!

アイコンフォントと言っても色々ある様なんですが、今回利用させて戴いたのが、

Font Awesome, the iconic font and CSS toolkit

フォントをアップロードをせずに使える様なので、使ってみたいと思います。

読み込みがうまくいかなかった時は、正常に表示されない!という気になる点はありますが、使えてしまえば基本は簡単なので、私の様な初心者の方もここをクリアする事でどんどん応用が出来るのではないでしょうか。

使い方

下のコードを挿入してアイコンフォント読み込みます。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Versionを確認して記述しましょう。この記事では、4.0.3となっています。

どこに?

私の場合、この時点ではぁ?です。^^

初心者って「こうかな?」って思っても心配なもんですよ^^その通りに書いてないと分からないんですよね。こんな事ではここで終わりそうですが、色んな記事を見ながら踏ん張ります。

コードの挿入

サーバーにアップロードせずに一番簡単に使える方法として、header.php内の<head>~</head>に下の様に挿入してみました。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>

準備はこれだけ!

かっかっかんたんっ!

続けてコードの取得です。

アイコンのコードを取得

facebookのアイコンで試してみます。

4ステップでコピペまで出来ます。

出来るまでは当然のごとく色々と調べる事になりましたが、出来てしまえば私にも非常に簡単だったのでちょー簡単だと思います。

①「icons」をクリック。

FontAwesome003

②「fa-facebook-square」をクリック。

FontAwesome004

③アイコンコードをコピー。

FontAwesome005

④コードをコピペします。

<i class="fa fa-facebook-square"></i>←こんな感じ!

出来上がりがこんな感じです。

←こんな感じ!

すっすっすごいやんっ!

CSSで装飾

アイコンフォントは、アイコンに見えながらフォントであるので装飾が出来ます。下の様に3種類のアイコンフォント(それぞれ2タイプ)用にCSSに記述しています。

.fa-twitter-square { 
  color: #00ACEE;
}
.fa-twitter { 
  color: #00ACEE;
}
.fa-facebook-square { 
  color: #3B5998;
}
.fa-facebook { 
  color: #3B5998;
}
.fa-google-plus-square { 
  color: #DB4A39;
}
.fa-google-plus { 
  color: #DB4A39;
}

サイズを変更

コードを追加するだけで簡単にサイズ変更出来ます。

<i class="fa fa-facebook-square fa-2x">←サイズを2倍に!</i>

←サイズを2倍に!

←サイズを3倍に!

←サイズを4倍に!

←サイズを5倍に!

と、5段階までサイズを調整出来ます。たまに読み込みに失敗するみたいですが、

ちょー簡単!

o(´∇`*o)(o*´∇`)o

アップロードして利用する方法は、また試してみたいと思います。