AMG Solution

これは便利! Bootstrapおすすめ拡張機能まとめ ~ アイコン編 ~

feels

こんにちは。堀部です。
 
みなさんご存じのとおり、弊社製品の CODEMATIC にはBootstrapを採用しています。そこで今回から数回にわたって、Bootstrapの拡張機能を紹介していきたいと思います。
 
初回はBootstrap3の特徴の一つでもあるグラフィックアイコン(Webフォント)についてです。
 
Bootstrap3.0から標準でWebフォントが使用できるように変更されました(Bootstrap2.Xまではpng画像です。)。標準でも十分な数のWebフォントが使用できますが、その数をさらに増やすことができるプラグインをご紹介します。

目次

  1. 標準Webフォント
  2. Font Awesome
  3. Elusive Icons
  4. ionicons
  5. Weather Icons
  6. Iconpicker for Bootstrap

BS_icon1

Bootstrap

 
Bootstrapには標準で、250以上の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.

getbootstrap.com

BS_icon2

Font Awesome

 
CODEMATICにも追加しているWebフォントです。これを追加するだけで519個ものアイコンを増やすことができます。
 
Font Awesomeはアイコンを追加するだけでなく、フォントの大きさを変えたり、アイコンを使ってリスト表示させたりと様々な機能を含んでいます。
 
またCSS3のアニメーション機能を使って、アイコンを回転させることもできます。この機能はCODEMATICのLoadingにも使用しています。

BS_icon3

Elusive Icons

 
こちらは304個のアイコンを追加できます。
 
Font Awesomeがあれば大体カバーできるかもしれませんが、同じ名前のアイコンでも形が違っていたりするので好みに合わせて使い分けるとよいかもしれません。その他の機能についてもFont Awesomeとほぼ同じです。

BS_icon4

ionicons

 
シンプルでフラットなアイコンフォントです。ソーシャル系のアイコンも豊富にあります。

BS_icon7

Weather Icons

 
189個の天気をテーマにしたアイコンを追加できます。

BS_icon6

Iconpicker for Bootstrap

 
アイコンピッカーです。何かに使えるかもしれません。

まとめ

いかがでしたでしょうか?
 
Webフォントは、今回紹介したもの以外にもほんとにたくさんの種類がありますので、何を取り入れるべきかきちんと取捨選択していきたいですね。
 
次回は画面デザインを手軽に変更することができるテーマ編をお送りしたいと思います。

feels recruit

HORIBE'S BLOG

堀部の記事

堀部の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

feelsでSFA・CRM
はじめました。
LOADING