Webデザイン

[:a]アイコンが超絶可愛い!WEBフォント「Font Awesome」の使い方

WEBフォントAWESEOME

このブログにも使われている、アイコンが超絶可愛いWEBフォント「Font Awesome」の使い方をご紹介します。

すでにもう使っている方が多くて、本当にどこをみても可愛い!
いちいち画像を作ったりアップしたりする事なく簡単に使えるのでおすすめです♪

可愛いアイコンがいっぱい!WEBフォント「Font Awesome」

WEBフォントを文字ではなく、アイコンを作って提供してくれているのが「Font Awesome」。
アイコンの種類が豊富でしかも簡単に使えるので、日本でも利用者が多く人気の高いWEBフォントです。

例えば、
 ←車とか
 ←チェックとか
 ←カメラ
 ←わんこの足あと
 ←ちょっと注意とか
 ←可愛い紙飛行機とか
 ←SNSアイコンも!

こんな感じのアイコンが揃っています。
フォントなのでもちろん、色を変えたりサイズもCSSで一緒に変わります。
ほんとに便利ですね。
いろいろ試してみたくなっちゃいます!

Font Awesomeの使い方

使うまでの流れ1

以下のコードを<head></head>内にコピペしましょう!

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

使うまでの流れ2

アイコンを置きたいところに、Awesomeのアイコン一覧を見ながら以下のようにコピペするだけ♪

[html]
<i class="fa fa-car"></i>
[/html]

ちなみに↑の結果は車のアイコンです
とっても簡単♪

私の使い方

▽ちなみにこのブログでは、メニューの部分に使用しています♪
文字だけのメニューもアイコンが入るだけで全然雰囲気が代わりますね\(^o^)/

メニュー

▽以下のようなボタンにも使用しています。

▽PC版のフッターにはSNSアイコンとしても置いてみました♪
(SNSアイコンもひと通り揃っています!)

ブログのフッター

アイコンは今までPhotoshopやイラレでコツコツ作ったり、WEB素材を探してきて保存してアップしてと大変でしたが、
こんなWEBフォントを使うことでより簡単になりましたね。
そういえば、GoogleでもアイコンのWEBフォントが始まったとかなんとか。
とても簡単で便利なのでぜひ使ってみてください(`•ω•´)/

ABOUT ME
akane
フリーランスWebデザイナー・ブロガー・ママ。兵庫県在住。 ライフスタイル・シンプルでゆるい暮らしを目指し中。