AMG Solution

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

 
みなさんご存じのとおりCODEMATICにはBootstrapを採用していますので、
今回から数回にわたってBootstrapの拡張機能を紹介していきたいと思います。

初回はBootstrap3の特徴の一つでもあるグラフィックアイコン(Webフォント)についてです。

Bootstrap3.0から標準でWebフォントが使用できるように変更されました。
(Bootstrap2.Xまではpng画像です。)

標準でも十分な数のWebフォントが使用できますが、その数をさらに増やすことができるプラグインをご紹介します。

 

標準Webフォント

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

 

Font Awesome

BS_icon2
Font Awesome

CODEMATICにも追加しているWebフォントです。
これを追加するだけで519個ものアイコンを増やすことができます。

Font Awesomeはアイコンを追加するだけでなく、フォントの大きさを変えたり、アイコンを使ってリスト表示させたりと様々な機能を含んでいます。

またCSS3のアニメーション機能を使って、アイコンを回転させることもできます。
この機能はCODEMATICのLoadingにも使用しています。

 

Elusive Icons

BS_icon3
Elusive Icons

こちらは304個のアイコンを追加できます。

Font Awesomeがあれば大体カバーできるかもしれませんが、同じ名前のアイコンでも形が違っていたりするので好みに合わせて使い分けるとよいかもしれません。

その他の機能についてもFont Awesomeとほぼ同じです。

 

ionicons

BS_icon4
ionicons

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

 

Weather Icons

BS_icon7
Weather Icons

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

 

Bootstrap Arrows

BS_icon5
Bootstrap Arrows

Bootstrapに任意の角度で矢印を追加できるプラグインです。
大小7色の矢印が用意されています。

 

Iconpicker for Bootstrap

BS_icon6
Iconpicker for Bootstrap

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

 

まとめ

いかがでしたでしょうか?
Webフォントは今回紹介したもの以外にもほんとにたくさんの種類がありますので、何を取り入れるべきかきちんと取捨選択していきたいですね。

次回は画面デザインを手軽に変更することができるテーマ編をお送りしたいと思います。

HORIBE'S BLOG

堀部の記事

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

SAME CATEGORY BLOG

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

新卒採用
はじめました。
LOADING