Retinaディスプレイ(iPhone)対応Bootstrapアイコン

· by · in

みなさんBootstrapは好きですか？僕は大好きです。

便利なライブラリや使いやすいスタイルを多数提供してくれますが、唯一の欠点と言えるのはアイコンがiPhoneのRetinaディスプレイに対応しておらず、iPhoneで見た際にボケてしまうことです。

仕事で必要になったというのもありますが、Bootstrapと同一のアイコンを利用し倍サイズのアイコンセットを作成しました。ごく一部、倍サイズの画像がフリーのセットに無かったため抜けていますが、それでも大体間に合う量があるのではと思います。

[bsbutton size=”large” style=”primary” icon=”icon-download” iconcolor=”white” text=”ダウンロード：bootstrapIcons_for_retina.zip” link=”http://code.agnist.jp/files/bootstrapIcons_for_retina.zip” target=”This page”]

使い方

ダウンロードしたパッケージの「bsiRetina.css」をmedia属性の幅指定で読み込んでもらうか、出来合いのレスポンシブ用CSSに組み込んでもらうのがベストです。「bootstrap-responsive.css」に組み込んでもらっても良いです。

Bootstrap本来のアイコン表示クラスを普通に利用してもらうことで、レスポンシブCSSに切り替わるタイミングでアイコンも差し替えられます。

おそらくそのうちBootstrap本家もRetina対応させてくると思うので、それまでの気休め程度にご利用ください。

ライセンス

画像の改変など行わずスプライト化したものに過ぎないため、当然著作権は配布元にあります。配布元のライセンスポリシーに従って利用して下さい。

筆者について

KaBuKi
ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
Tags: , ,