päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

これは便利!簡単に導入できるアイコンフォント「WE LOVE ICON FONTS」

WE LOVE ICON FONTS
WE LOVE ICON FONTS

最近アイコンフォントを使ってみて便利!と感じた「WE LOVE ICON FONTS」の導入の仕方について簡単に説明をします。

entypo

種類が10種類あるのでその中から一つ好きなモノを撰んで「add」と書かれたボタンを押します。
今回は、entypoを使ってみようとおもいます。アイコンフォントを読み込むCSSに記述をします。

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-camera"]:before {
  font-family: 'entypo', sans-serif;
}

次にentypoの中から使用したいアイコンを押します。
するとアイコンの名前が表示されます。entypo-cameraを使ってみようとおもいます。

entypo camera 使用したい場所に「entypo-camera」というclassを追加します。
<p class="entypo-camera"></p>
すると、簡単に使用することができます!

アイコンフォントのメリット

  • ・画像に比べて軽量
  • ・retinaディスプレイ(高解像度デバイス)などでも綺麗に表示ができる
  • ・CSSを使ってサイズやカラー変更など可能なので色々な組み合わせをすることができる

アイコンフォントのデメリット

IEなどの一部のブラウザで少し手を加える場合があるそうです。
アイコンフォントには色々な便利な使い方がるので、いろいろ試してみると楽しいとおもいます!

こちらの記事もよく読まれてます。