こんにちは、クリエイティブフレークです。 Webフォントもだいぶ広く使われてきて、使える種類も多くなりましたよね。 アイコンフォントだって負けてないほど、増えていました! 超カワイイ絵文字フォントから、実用性の高いアイコンフォントまで置いてある fontello の使い方を。 今回はダウンロードしてそのまま使うサンプルです。 まずはサイトに行って、使いたいフォントを選びましょう。 わたしは顔文字とIEアイコンをチョイス。 顔文字はシンプルで使いやすい感が好きです。それに好き嫌いのない感じですよね。 選んだら、右上の「Download webfont」ボタンを。 ダウンロードしたフォルダにはいろいろと入っているのですが、必要なファイルは以下の通り。 ・fontello.css ・fontファイル(中身全部) それではエディタを開いて、ヘッダー部分にcssファイルを読み込みます。 そしてアイコンフォントを入れたい場所のクラス名なんですが、サイトのひとつ隣のタブ「Customize Names」を選ぶと、出てくるのがクラス名です。 例えば、 <div class="icon-emo-grin"></div> と書くと顔文字が、 <div class="icon-ie"></div> と書くと、IEアイコンが表示されるワケです。 もちろん、クラス名をつけてフォントサイズを大きく/小さくしたり、色を変えることもフォントならでは。 画像じゃないから拡大縮小だって問題ないのがうれしい! こういったカワイイものから、メールアイコンや虫眼鏡アイコンなど汎用性の高いものまでそろっています。 Written by Creative Flake