Icon Fontsの使い方。

Icon Fontを初めて使ったので、忘備録としてメモして起きます。

アイコンフォントとは?

要するに「アイコン型のWebフォント」のことだそうです。一文字に対して、文字ではなくアイコンが割り当てられています。

メリットデメリットを調べてみると、、、

メリット

  • ベクターデータなので鮮明に表示できる。
  • 基本的に軽量。
  • CSS3を使ってシャドウやアニメーションを適用できる。
  • フォントなのでテキストとのベースラインが合わせやすい。

デメリット

  • IEなどの一部ブラウザでは、対応するためのコードを書く必要あり。
  • フォントなので1文字につき1色しか使えない。

 

アイコンフォント使い方

今回は、こちらの↓アイコンフォントを使いました。(ザーブと読むのでしょうか)

http://zurb.com/playground/foundation-icon-fonts-3

 

1、こちらからアイコンフォントのファイルをdownload。

2、foundation-icons.css / foundation-icons.[eot/ttf/svg/woff]/を任意のフォルダに配置。

(foundation-icons.css内で、foundation-icons.[eot/ttf/svg/woff]を読み込んでいるので、

同一フォルダ内に配置しない時は、正しいパスになるようにfoundation-icons.cssを書き換える。)

3、foundation-icons.cssをヘッダで読み込む。

4、<i class=”fi-アイコン名”></i>と表示したい箇所に記述。

 

以上です!

naoki

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください