Bootstrapに270のアイコンを追加するElusive Iconsを使ってみる

1 Bootstrapは標準で140種類のアイコンが使えます。単色のピクトグラムなので豪華ではありませんが文字だけでは寂しい時に便利です。140種類あれば困ることはなさそうですが、気持ち足りないなというのが正直な所。

というわけでBootstrapに270個のアイコンを追加する「Elusive Icons」を試してみました。導入前の懸念としては「Elusive Icons」はWEBフォントなので、重くなるかな・・・という点でした。

スポンサーリンク

導入してみる

早速、導入してみます。githubからダウンロード。

Elusive icons, an icons font designed for use with Bootstrap

導入は簡単です。bootstrap.css と elusive-webfont.cssを読み込んで、fontフォルダをコピーします。とりあえず標準のBootstrapで試したのですが、デフォルトのアイコンとElusive Iconsが重なって表示されてしまいました。

公式ページによれば、カスタマイズしたBootstrapを使うとのこと。

Bootstrapをカスタマイズしたことはなかったので試してみましたが、Iconsを除いただけの状態では、Tooltipsなどのコンポーネントが入ってくる分、標準より巨大なBootstrapになってしまいました。

カスタマイズから標準のBootstrapを作るには、Iconsの他にもいくつかの項目を外す必要があるようです。出来るだけシンプルな状態にしたかったので、私は標準のBootstrapからicon関連の記述を手動で削除して使用しました。

使用感

標準のBootstrapをカスタマイズする手間を除けば、cssの追加とfontフォルダのコピーのみでスグに使えます。下はデフォルトとElusive-Iconsのサンプルです。

デフォルトBootstrap サンプル

デフォルトは文字サイズが大きくなると使い物になりません。

Elusive Icons サンプル

Elusive Iconsのメリット・デメリットをまとめてみました。

メリット
  • アイコンが文字サイズと共に拡大される。
  • 使用方法はデフォルトと同じ。もちろん白色表示もできる。
  • フォントなんで色も変えられる。
デメリット
  • デフォルトとは細かい所でデザインが異なる。
  • フォントの容量がデフォルトアイコン画像より大きい。

    ブラウザ互換のために4種類のWEBフォントが用意されていますが、モダンブラウザではwoffファイルが使われるようです。デフォルトアイコン画像は白黒併せて20KBほど。woffの70KBなら許容範囲とも言えます。svgだけ巨大ですが、Safari4などごく一部のブラウザのみで使用されるようです。

    Elusive-Icons.eot39KB
    Elusive-Icons.svg206KB
    Elusive-Icons.woff69KB
    Elusive-Icons.ttf39KB

     

WEBフォントのブラウザ互換についてはてっく煮ブログさんに良いまとめがありました。WEBフォントが表示できない環境が4%近かったというのは、デフォのBootstrapがWEBフォントではなく画像を選択した理由の1つと言えそうです。

専用アイコンを用意するほど労力をさけない選択肢として、Elusive Iconsは覚えておきたい存在です。

 

 

スポンサーリンク