Ligature Symbols で Twitter Bootstrap のアイコンを増やす

最近、Bootstrap 比率が高いですが何か。という訳で今回は Bootstrap のアイコンを強化するネタを。

先日、Bootstrap のアイコンの語彙が足りないのを動機に何とかアイコン種類を増やせないかとネットを物色してたら、Font Awesome という Bootstrap での利用が可能なウェブフォントを発見。これを試してみたところ、滅法使い勝手がイイ! なんたって従来の Glyphicons アイコンを全てカバーした上に70種類もアイコンが増えているし、フォントなのでサイズや色が自由に指定できるし。もう自分的には今後 Bootstrap を使う時はこいつとの組み合わせが標準ケテーイです。

…と感激していた訳ですが、それと時を同じくして Ligature Symbols なるシンボルフォントがあることを知りました。Font Awesome とカブっているものもそれなりにありますが、日本人作者によるものなので、はてなや Mixi、モバゲー等日本発サービスのアイコンが豊富だったり等、Font Awesome とはまた別の使い勝手がありそうです。これを Font Awesome と同じ要領で Bootstrap に組み込めないかな、というスケベ心が抑えきれず試してみたところ、割りと簡単にできちゃったのでお裾分けというか。

やり方は至って単純で、Font Awesome のスタイルシートを Ligature Symbols に合わせて書き換えただけです。icon-xxx というクラス名に接頭詞を付けて、ls-icon-xxx とするように語彙を増やした訳です。これにより、こんな感じ(↓)でより多くのアイコンを使うことができまっせ。

拙サイトにデモを用意しましたので、興味のある方は見て頂ければと。

※ 追記 : 本記事を UP 後、Ligature Symbols の作者さんがはてなユーザ( id:kudakurage )だったことに気づきました。ちゃんとフォント作成の記事まであるしw てな訳で、Ligature Symbols についての詳細は http://d.hatena.ne.jp/kudakurage/20120720/1342749116 をどうぞ。