必要なアイコンだけをWebフォントとして扱えるWebサービス【Fontello】の使い方
どうもはじめまして。来年4月から正式に新メンバーになる予定の Honma と申します。今月から少しずつ Tips に投稿していきたいと思いますのでよろしくお願いします!
今回の Tips は自由に使いたいアイコンだけを選んでWebフォントにするサービス『Fontello』の紹介です。少し前からあるサービスですが、非常に便利なので復習も兼ねて。
Fontello でアイコンを選択・編集する
今回は4つブラウザアイコンを選択してみました。
Customize Names のタブを押すとアイコンの名前を編集できます。デフォルトのままでも OK です。
Customize Codes のタブを押すとコード名を編集できます。こちらも特に編集しなくても OK。
アイコンをダウンロードして使用する
編集が終わったら右上の Download webfont をクリックし、DL したファイルを解凍してください。
自分のサイトで使う場合は、解凍したフォルダ内の css と font に入っているファイルを任意のフォルダに移動し、全て読み込みます。
フォントのフォルダ名が違うとパスの関係で読み込めなくなるのでその場合は fontello.css に記述してあるフォントフォルダのパスを変更してください。
あとは <i class=”icon-chrome”></i> のように最初に設定したアイコン名を、クラス名としてiタグに入れてあげれば表示することができます!
Webフォント なので、Long Shadow Generator などのサービスと組み合わせれば画像無しで簡単にアイコンが作成できますよ。
また、Fontello のほかにも IcoMoon や We Love Icon Fonts 、Fontastic (登録制) などの類似サービスがあるので、使用したいアイコンが揃ったサイトを利用するといいと思います。
以上になります。