必要なアイコンだけをWebフォントとして扱えるWebサービス【Fontello】の使い方

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもはじめまして。来年4月から正式に新メンバーになる予定の Honma と申します。今月から少しずつ Tips に投稿していきたいと思いますのでよろしくお願いします!

今回の Tips は自由に使いたいアイコンだけを選んでWebフォントにするサービス『Fontello』の紹介です。少し前からあるサービスですが、非常に便利なので復習も兼ねて。

Fontello でアイコンを選択・編集する

今回は4つブラウザアイコンを選択してみました。

fontell_1

Customize Names のタブを押すとアイコンの名前を編集できます。デフォルトのままでも OK です。

fontello_2

Customize Codes のタブを押すとコード名を編集できます。こちらも特に編集しなくても OK。

fontello_3

アイコンをダウンロードして使用する

編集が終わったら右上の Download webfont をクリックし、DL したファイルを解凍してください。

自分のサイトで使う場合は、解凍したフォルダ内の cssfont に入っているファイルを任意のフォルダに移動し、全て読み込みます。

フォントのフォルダ名が違うとパスの関係で読み込めなくなるのでその場合は fontello.css に記述してあるフォントフォルダのパスを変更してください。

あとは <i class=”icon-chrome”></i> のように最初に設定したアイコン名を、クラス名としてiタグに入れてあげれば表示することができます!

Webフォント なので、Long Shadow Generator などのサービスと組み合わせれば画像無しで簡単にアイコンが作成できますよ。

fontello_4

また、Fontello のほかにも IcoMoonWe Love Icon FontsFontastic (登録制) などの類似サービスがあるので、使用したいアイコンが揃ったサイトを利用するといいと思います。

以上になります。