簡単!bootstrapで使うフォントアイコンを追加する方法&オリジナルのアイコンフォントを作る方法

bootstrap3ではGLYPHICONSというアイコンフォントが最初から用意されています。
しかし、欲しい形がなかったりと、物たりないない場合がありませんか?

そんな時に、アイコンフォントを追加する方法をいくつかご紹介します。


GLYPHICONS PRO


bootstrapでは最初からフォントアイコンが250種類用意されていますが、
有料のPRO版を購入すると、800以上ものアイコンの種類が使えるようになります。


Font Awesome Pro

Font Awesomeはアイコンフォントとしてはメジャーで利用している方も多いかと思います。
 無料で675種類ものアイコンを選ぶことができます。
こちらも有料版が用意されており、拡張すると3,000以上のアイコンを選ぶことができます。


IcoMoon

IcnMoonはサイトで使う分だけのアイコンを選んだり、svgファイルをアップロードすれば、オリジナルのアイコンフォントが使えるようなったり、
余分なアイコンをサイトに読み込まないので、fontawsomeより容量の軽いウェブフォントです。

使い方は簡単なので、手順を紹介します。
 

↓右上の紫色のIcoMoonAppというボタンをクリックします。

↓サイト内で使いたいアイコンを選択します。

↓アイコンを拡張したい場合は、左下の「Add Icons Form Library」をクリックします。

↓アイコンのパッケージ一覧がでるので、気に入ったアイコンのaddボタンを押します。中には有料でしか選べないアイコンもあります。

↓オリジナルのアイコンを追加したい場合は、左上の「ImportIcons」のボタンを押すと、オリジナルのアイコンを追加できます。
https://www.flaticon.com/​こちらのサイトでかなりの量のアイコンを選べます。
フォントを選び終わったら、右下の「Genelate Font」ボタンをクリックします。

↓このページで、生成したフォントアイコンをCSSでどのように指定するかを見ることができます。
CSSのクラス名も自分の好きなものに変えられます。
右下の「Download」ボタンを押すとアイコンフォントで使用するファイルを一式ダウンロードできます。

↓ダウンロードしたファイルの中身は以下のようになります。
ファイル一式をサーバーにアップロードし、style.cssのみサイトに読み込ませれば、
アイコンフォントを使用することができます。

 


以上、個人的にアイコンフォントは手っ取り早さでいうとFontAwsomeが良いと思いますが、
ファイル容量を軽くしたり、オリジナルアイコンを使いたい場合はIcoMoonが良いと思います。
IcoMoonの詳しい使い方は「使うアイコンだけを含む最小限のウェブフォントを作る」このサイトでも詳しく解説されています。

ぜひ使ってみてください。

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。