お知らせ
2023.12.5(Tue)
技術
2015.9.2(Wed)
これは便利！ Bootstrapおすすめ拡張機能まとめ ～ アイコン編 ～
目次
こんにちは。堀部です。
みなさんご存じのとおり、弊社製品の CODEMATIC にはBootstrapを採用しています。そこで今回から数回にわたって、Bootstrapの拡張機能を紹介していきたいと思います。
初回はBootstrap3の特徴の一つでもあるグラフィックアイコン（Webフォント）についてです。
Bootstrap3.0から標準でWebフォントが使用できるように変更されました（Bootstrap2.Xまではpng画像です。）。標準でも十分な数のWebフォントが使用できますが、その数をさらに増やすことができるプラグインをご紹介します。
目次
標準Webフォント
Bootstrapには標準で、２５０以上のWebフォントが使用可能となっていますが、実はこれ通常は有償だそうです。Glyphiconsの作者がBootstrapのために無償で提供してくれているそうで、代わりにGlyphiconsへのリンクを含めてほしいとのことです。
Available glyphs
Includes over 250 glyphs in font format from the Glyphicon Halflings set.
Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.
As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
Font Awesome
CODEMATICにも追加しているWebフォントです。これを追加するだけで５１９個ものアイコンを増やすことができます。
Font Awesomeはアイコンを追加するだけでなく、フォントの大きさを変えたり、アイコンを使ってリスト表示させたりと様々な機能を含んでいます。
またCSS3のアニメーション機能を使って、アイコンを回転させることもできます。この機能はCODEMATICのLoadingにも使用しています。
Elusive Icons
こちらは３０４個のアイコンを追加できます。
Font Awesomeがあれば大体カバーできるかもしれませんが、同じ名前のアイコンでも形が違っていたりするので好みに合わせて使い分けるとよいかもしれません。その他の機能についてもFont Awesomeとほぼ同じです。
ionicons
シンプルでフラットなアイコンフォントです。ソーシャル系のアイコンも豊富にあります。
Weather Icons
１８９個の天気をテーマにしたアイコンを追加できます。
Iconpicker for Bootstrap
アイコンピッカーです。何かに使えるかもしれません。
まとめ
いかがでしたでしょうか？
Webフォントは、今回紹介したもの以外にもほんとにたくさんの種類がありますので、何を取り入れるべきかきちんと取捨選択していきたいですね。
次回は画面デザインを手軽に変更することができるテーマ編をお送りしたいと思います。
ITエンジニアリング事業部 マネージャー
K.Horibe
技術ブログを中心に小ネタを書いています。たまにはライフスタイルも書いてみようかな。
MOST VIEWED ARTICLES
よく見られている記事
