色々なアイコンが使用可能・鈍色合字アイコンフォントの紹介

 以前、頑張ってこのサイト用でもあるアイコンフォントを作りました。CDNとかも色々そろえてみていたりします。
 我ながら結構いいものを作れたと思っているのですが、あんまり使われていないようなので、自分で宣伝がてら、アイコンフォントとは何かも紹介しつつ、便利なところとか紹介してみようと思います。

広告

アイコンフォントとは?

 アイコンフォントとは、たとえばTwitterなどのアイコンを文字の形の一部として含むフォントのことです。
 これを使うと、画像ではなく文字として、アイコンを扱うことができます。つまり、テキストとしてアイコンを入力し、扱うことができるのです。

アイコンを文字で扱えることによるメリット

 アイコンフォントのメリットは、説明にも書きましたが、「テキストとしてアイコンを扱えること」です。
 通常、画像を拡大すると、ちょっとぼやけてしまったり、ピクセルのエッジが目立ったりとかすると思うのですが、アイコンフォントの場合、フォントの一部という扱いなので、拡大・縮小もCSSで容易です。しかもそんな風にしても、画像よりは重さは抑えられる可能性が高いのです。なにせフォントですので。
 さらに、フォントなので、アイコンの色を変更したい、といった考えを持った場合は、文字色を変更するだけと、手軽に可能です。
 ベクタ・イメージもそういった一面はありますが、文字とひっくるめてCSSで装飾できるというのは、このアイコンフォントの良い点でしょう。

サイトで利用するときはWebフォント扱い

 さて、このように便利なフォントですが、使用するには閲覧者側のPCにアイコンフォントが入っていること前提でコーディングするか、Webフォントをサーバに配置する、CDNで利用可能になっているものを利用するなどして使うことになります。
 アイコンフォントは特殊なフォントなので、閲覧者側のPCにあらかじめ入っているということはそう多くありません。ですので、通常はWebフォントとして使用することになります。

代表的なアイコンフォント

 代表的なアイコンフォントとしては、まずはFont Awesomeがあげられます。検索しても大体出てくるのがこれですね。
 他は色々とあるみたいなのですが、実のところ、このFont Awesomeがかなり有名な印象です。
 なお、日本産のものでは、Ligature kudakurage Symbolsが存在します。

鈍色合字アイコンフォントについて

 鈍色合字アイコンフォントとは、Ligature kudakurage Symbolsに影響を受けてこのサイトの管理人・数寄屋がIcoMoonを使い、作成したフォント・セットです。
 大本であるLigature kudakurage Symbolsもフォントセット内にとりいれつつ、Font Awesomeの豊富なアイコン、さらにはFeather、Material Iconsからもとりこみ、様々なアイコンを使えるようにしてあります。愛するVivaldiのアイコンも入れておきました。
 また、それぞれのアイコンに対して、後述の通り合字を設定してありますので、例えばこのフォントで「Twitter」という文字列を表示すると、Twitterのアイコンとなって示される、といったふうにもなっています。
 というわけで、手前味噌ですが、このアイコンフォントのいいところを紹介していきたいと思います。

アイコンが豊富で、日本のサービスのアイコンも使用可能

 Font Awesomeは確かによいアイコンフォントのセットなのですが、いかんせん外国のアイコンフォントですので、日本の「はてなブックマーク」などのアイコンが使えません。
 そこを、Ligature kudakurage Symbolsを用いることで埋め合わせ、はてなブックマークアイコンその他、日本でメジャーなサービスのアイコンも使えるようにしています。
 これで、たとえばこのページの上下にあるようなSNSボタンを作成するときにも、アイコンフォントをそのままつかうだけでよいようになりました。
 さらに、Material Iconsを用いることで、この豊富さをプラス。わりとどういうシーンにでも間に合うようになったのではないかな、と思います。
 なお多すぎる、フォントサイズが大きすぎる、という場合は軽量版もDLページに用意しています。この場合もライセンス等同じです。

含まれている全てのアイコンにリガチャを設定

 前述したとおり、たとえば「Twitter」と入力すれば、Twitterのアイコンが出てくるといったことが可能です。
 下にデモを用意してみましたので、色々お試しください。fileとかfile-zip-oなど入れてみたり、browserとかvivaldiでも出るようになっている…はずです。

 これにより、アイコンにテキストとしての意味をもたせることも可能です。
 なお、好きなリガチャを設定したい場合は、IcoMoonを使って設定しなおすこともできます。IcoMoonを使えば、SIL OFLライセンスを守る限りは、svgファイルを取り込んで、自分の好きなサブセットを、自分の好きな文字列のリガチャを設定して作るのも可能です。
 なお、複数のアイコンフォントを取り込んだために、「ファイル」を表すアイコンなど、同じ意味のものが複数あり、それについては被らないようにしつつたとえばfile1,file2、というように連番で、それなりに一貫性のあるように設定しています。取り込んだ結果グリフが2003個もあったので、割と大変でした。ですので、これら全ての設定をやり直すのはおすすめしません…。

ライセンスはSIL OFL 1.1で、気軽に使えます

 ライセンスはSIL OFLでの提供です。気軽に使えるライセンスです。フォント単体で販売などしない限り、ほぼご自由にお使いいただけます。ただし、派生フォントを作って配布する際には、「鈍色」「鈍色合字」などの、元のフォント名に用いられている単語を使ったフォントに許可なくしないでください(と、ライセンス(Ligature kudakurage Symbolsよりコピーレフトゆえに継承)はなっておりますので、よろしくお願いいたします。)。
 SIL OFLについて、詳しくは以下をどうぞ。

取り込んだフォント類とそのライセンスについて

 詳しくは、以前書いた以下のエントリに表記しております。

ダウンロード

 こちらのサイトからDLできます。

使用方法

 まず、Webフォントとしてサーバ上に配置し、付属のCSSをlinkタグで取り込むか、配布ページに書いてあるCDNコードを使うかたちでCSSをlinkタグで取り込むなどしてWebフォントとして使えるようにします。
 あとは、クラス.dgicom(Light版の場合は.dgicoml)を、適用させたい部分を囲んでいるHTMLタグに追加するだけです。アイコンが表示されるリガチャ・文字コードなどはデモページをご覧下さい。

その他コメントなど

 今回は自作、というかまあフォントを合成してリガチャを設定したフォントである鈍色合字アイコンフォントを紹介しました。
 何かありましたらコメント、Twitterでお問い合わせください。
 結構いい感じのセットになったと思うので、使ってくださると嬉しいです。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA