WEBサイトやWEBページの制作の中で今や欠かせなくなってきたアイコンフォントですが、今のような形式で使えるようになってからの歴史は浅いのです。
それまではというと主にgif画像を使って代用してきたという歴史があるのです。
アイコンフォントもその提供元や使い方にはいろいろ種類があって様々です。
この記事ではアイコンフォントのいろいろな種類や使い方について解説していきます。
アメブロでは使えないと思ってる方もいるでしょうけどいくつかのアイコンフォントは、使えるようです。
この記事の中でもアメブロで使えるアイコンフォントを使ってみました。

 

 

 

アイコンフォントって何？

アイコンというとホームページ制作が多くなりだした2000年前後では画像を使っていました。
しかし、今では画像ではなくWEBフォントの一部であるアイコンフォントを使用するようになりました。

 

アイコンフォントの定義は下記のようにWEB上で表示されています。

 

アイコンフォントとは、Webフォントと同じように使用できるアイコンのことです。

画像と違う点は、スタイルシートで大きさを自由に変更できるところですね。 また、頻繁に使うアイテムは、Insert TextやClippingsに登録しておくと便利になります。

 

利用シーンの提案

ページを開くと真っ先に見れるヘッダーの中で1番よく使われているのがグローバルメニューの中です。
ヘッダーでいうとヘッダー内にソーシャルメディアへの導線を作る方がアイコンフォントをリンクタグで囲むというのは、よくあるパターンですね。

 

パンくずリストのHOMEだけがアイコンフォントというのもよくあります。

 

多くのテーマでソーシャルブックマークもアイコンフォントを使ってスタイルシートで整形されています。

 

記事の中に入ると見出しの先頭にアイコンフォントを自動的に表示するようにしているサイトもありますね。

 

サイドバーの見出しの先頭にもスタイルシートで自動的にアイコンフォントを入れるようにしているサイトもあります。

 

記事の文中で使う場合は、上記のような感じですね。
間隔を考えて前後にスペース( )を入れると見栄えがよくなります。

 

アイコンフォントの種類

アイコンフォントにも種類があるのです。
どんな種類かというと提供元ですね。
中には有料のものもあります。
しかし、今回は無料で使えるものに限定したいと思います。

 

Font Awesome

 

 

Font Awesomeは見やすくフラットなデザインを約1600種類のWebアイコンフォントを提供するサービスです。数多くのWebアイコンフォントは商用利用可能、しかも無料で利用できます。専用のスタイルシートをサーバーにアップロードして、ヘッダーで指定、あとは任意のフォントを専用のタグで呼び出すだけでWebアイコンフォントが表示されます。
Webアイコンフォントがどんなものか試したい場合や、一目で何を意味するアイコンかわかるものを利用したい場合におすすめです。
有料のPROプランもあり、課金すれば約8000個弱のアイコンを使えるようになります。
無料の場合は、メールアドレスで登録して自分専用のJavaScriptを取得する必要があります。

 

 

Google Material Icon

 

 

Google Material Iconsは無料で約1000種類以上のアクセシビリティに優れたマテリアルデザインのWebフォントアイコンを提供するサービスです。
ヘッダに専用のタグを設置、Webフォントアイコンを設置したい場所に専用のタグを記述することで、スクリーンリーダーに対応しているWebアイコンフォントが表示されます。
その他、フラットで見やすいデザインであり、様々なパターンのサイトデザインにマッチしやすいため、使い方次第でユーザビリティとアクセシビリティの両方の向上が期待できます。