FontAwesomeをpngで画像化する方法を紹介!

FontAwesomeを使用することで簡単にアイコンを表示できます。今回はFontAwesomeのアイコンをpngで画像化する方法を解説します。pngで画像化してから表示することでサイトの表示スピードを改善することができます。

コンテンツ [表示]

  1. 1FontAwesomeをpngで画像化したい
  2. 2FontAwesomeをpngで画像化する方法
  3. 2.1flaticon
  4. 2.2Iconion
  5. 2.3iconmonster

FontAwesomeをpngで画像化したい

様々なアイコンを表示できるFontAwesomeはとても便利ですが、サイト内で1つしか使用しないのにCDNコードで読み込んだり、ローカルで使用したりするとサイトスピードが必要以上に遅くなってしまいます。

そこで、サイトパフォーマンスを向上させるためにアイコンをpngで画像化する方法を解説します。

Photo byPexels

FontAwesomeをpngで画像化する方法

今回はFontAwesomeのアイコンをpngで画像化する方法を3種類解説します。

いろいろなサイト・ツールがあり、それぞれ長所短所があるので、その時の都合によって使うツールを分けるとより便利だと思います。

flaticon

まず最初に紹介するのはflaticonです。

サイズ指定をして簡単にpngでダウンロードができます。

長所はアイコンが探しやすいこと、簡単にダウンロードできることです。しかし、アイコンの色を変えることができないという短所があります。
 

Iconion

次に紹介するのはIconionです。ダウンロードして使用します。

長所は高機能かつFontAwesome以外のアイコンも使えることです。

しかし、商業目的で利用する場合は購入する必要があります。また、周囲の余白を取り除けず、枠と余白がついてしまいます。

 

iconmonster

最後に紹介するのはiconmonsterです。

pngでダウンロードするときにアイコンの色と背景色とサイズと余白を指定できます。またpngだけでなくsvgなどにも変換でき、とても便利です。

短所はアイコンを検索する必要があり、一覧から探しづらいという点です。

下記の画像は実際にiconmonsterを用いてダウンロードした画像です。

iconmonsterからダウンロードした画像
GeekHive採用サイト

関連記事