ウェブアイコンフォントとは？
ウェブアイコンフォントとは、HTMLのタグや固有のクラス名を付与し、Webサイト上にアイコンを簡単に表示することのできるサービスのことです。
フォントとしてアイコンを利用できるので、CSSで簡単にサイズや色を変更ます。そのため、使い勝手にも優れています。
アイコンはWebデザインを行う上で欠かせない要素で、色々な場面で使用できます。メニューバーに表示したり、SNSのアイコンをWebページに設置したりもできます。
こんな感じです
アイコンフォントのメリット
アイコンフォントを利用する具体的なメリットについてご紹介していきます。
大きなメリットとしては以下の3点が挙げられます。
- クラス名で簡単に呼び出し可能
- CSSでカスタマイズ可能
- ファイルサイズを抑えることが可能
クラス名で簡単に呼び出す
アイコンフォントの呼び出し方は様々な方法があります。
一般的なのはクラス名による指定呼び出しです。<span class="fas fa-dog"></span>のようにspanタグやiタグにフォント名称となるクラスを設定することで、アイコンを簡単に呼び出すことが可能です。
色の指定やアイコンサイズを修正したい場合でも、CSSを修正するだけで、すぐに修正可能なので、簡単に微調整を行う事ができます。
また、アイコンデザインの差し替え時にも、クラス名を変更するだけで他のアイコンに変更できます。
CSSでカスタマイズ
上記でも少し記載しましたが、アイコンフォントは、CSSで色やサイズを調整できます。なので、同じアイコンでも違った見せ方をすることが可能です。
設定の仕方としては、通常のテキストにデザインを加える場合と同じで、font-sizeでサイズ指定やcolorで色を指定することができます。イメージとしては↓のような感じです。
そのアイコンフォントならではの味を出すことができるのが良いポイントですね。
ファイルサイズを抑える
アイコンフォントを利用せず、PNGやJPEGなどの画像をアイコンとして使用する際、場合によってはファイルサイズを調整してから書き出す必要があります。
また、PNGやJPEGはSVGと比べてファイルサイズが大きいです。そのため、ファイル数が増えてくるほど表示するページの描画速度にも影響します。普通に利用する分については、気にならない程度かもしれないですが、それでもパフォーマンスとしては悪くなってしまいます。
その一方で、アイコンフォントを利用すると画像の書き出し作業なども必要なく、ファイルサイズも小さいのでページの描画速度の影響を気にせずに使用できます。
おすすめのアイコンフォント
アイコンフォントは様々ありますが、今回は3つに絞ってご紹介したいと思います！
- Font Awesome
- Line Awesome
- Google Material Icons
Font Awesome
Font Awesomeは、手軽に使えるWebアイコンフォントを提供しているサービスでWordPressの他にReactやVueでWebサイトを構築している人にも人気となっているサービスです。
無料で使用できるアイコンの種類も豊富で1,700種類以上のWebアイコンフォントを利用することができます。
世界中の多くの人が利用しているため、記事も多く、有名なサービスのアイコンも用意されているので活用しやすくおすすめのサービスとなっています。
Font Awesomeを利用するには下記のように書く場合とKitやプラグインを利用する方法があります。
- linkタグでFont Awesomeのスタイルシートを読み込む
- <i class=”fas fa-dog”></I>のように利用したいタグを指定する
こちらでご紹介していますのでよかったら覗いてみて下さい！
Line Awesome
Line Awesomeは、Font Awesomeと同じようなアイコンをラインアイコンで利用できるアイコンセットです。
Font Awesomeが、バージョン6へのアップデートに伴い会員登録が必要となりました。Line Awesomeは、Font Awesomeに対して「より手軽でFont Awesomeにない線形のアイコンを」という意図でリリースされたサービスとなってます。
デザインの問題なので、好みによりますが、Font Awesomeのデザインが合わないなーと感じた方は、Line Awesomeを試してみてください！
Line AwesomeはCDN用とZip版が用意されているので、好きな方で利用して下さい。
こちらのFontについてもまとめていますので、よかったら覗いてみて下さい！
Google Material Icons
Google Material Icons(現在はGoogle Fontsに統合されています)のシステムアイコンは、シンプルさかつモダンで個性的なデザインで作成されています。Google Material IconsはUI全体で一般的に使用されている共通の概念をシンプルな形式で表現しています。
UIデザインに使えるユーティリティ系のアイコン素材が多く、様々な場面で活用できます。
使い方としては、Google Fontsを利用する方法とセルフホスティングし、HTMLの形式で記述する形式があります。
具体的な使用方法や設定についてはこちらにまとめています！
本記事のまとめ
今回は、ウェブアイコンフォントの利用方法とおすすめのアイコンフォントについて、まとめました。
ポイントをまとめると、
・簡単に呼び出し可能で自分の好きなようにデザインにできる
・ウェブアイコンを利用すると華やかになる
コメント