アイコンフォントといえばFont Awesomeが有名ですが、
Font Awesomeで公開されているものでは500種類以上のアイコンが入ったフォントファイルを
ダウンロードしないといけないため、少なからずページの読み込み時間に影響します。
また、入っていないアイコンがあるとFont Awesomeとは別に読み込ませないといけない…ということもあります。
そこで紹介するのが、Font Awesomeの開発者が公開した新たなサービス、「Fonticons」です。
Fonticonsでは、サイトで使いたいアイコンだけを選ぶことでFont Awesomeよりサイズを抑えられ、
svg形式のアイコンを簡単に追加できます。
その上、Font Awesomeと同様にCDNになっており、回転やアニメーションなどの効果をつけられます。
Fonticonsは現在、Beta版になっています。
Fonticonsのページで「Request an Invitation to the Beta」をクリックしてください。
名前とメールアドレス、簡単な自己紹介 (何に使うか、何故使いたいと思ったかで良いと思います)
すれば一日ほどで招待メールが届きます。
登録時のスクショを取っていなかったので画像はありませんが、
登録時にどのプランにするか聞かれます。
Free (無料)では一つのアイコンセット、月間PV10,000までになっています。
有料プランでは今のところ３種類あり、月額$7から$49となっています。
月間PV数の制限を超過すると追加料金がかかるため、PV数が多いサイトでは余裕を持って有料プランにするといいでしょう。
登録を済ませた後ログインすると、下のような画面になります。
「Kit」はアイコンや効果などのひとかたまりのことで、
有料プランであれば何パターンかKitを作成して使い分ける、というようなことができます。
Nameには好きな名前を入れて、CSS PrefixにはCSSのクラスに使いたい文字を入れてください。
ちなみにCSS Prefixをfaにすれば、これまでFont Awesomeで使っていたクラス名とほぼ同じまま使えます。
他人に勝手に使われてPV数制限を超えてしまった…ということが起きないように
Domains Allowedの欄でKitを読み込めるドメインを制限できます。
ドメインはコンマ (,)で区切って入力してください。
次の画面では、使いたいアイコンを選べます。
独自のアイコンを追加したい場合は、add an iconをクリックし、名前と白黒のSVGファイルを選んでアップロードしてください。
アイコンを選び終わったら、3. Tweak Kitをクリックします。
Tweak CSSで、有効にしたいCSS効果を選べます。
使わないもののチェックを外すと少しサイズを小さく出来ます。
4. Publish Kitをクリックして、Publish Kitをクリックすると利用できるようになります。
Embed Codeの欄にあるscriptタグを以下にコピーして、 Font Awesomeと同様になどと書くとアイコンを表示できるようになります。
以上です。
androplus.orgで使ってみたところ、使用しているアイコンが多いせいで
新しいアイコンを使うときに追加しないといけないデメリットのほうが大きい感じでした。
あまり大量にアイコンを使わないサイトでは効果覿面だと思います。