Font Awesomeをpngで出力できるツールまとめ

| 1件のフィードバック

とても便利なFontAwesomeですが、マルチブラウザ対応やパフォーマンスを考えてどうしても静止画像にしたい場合もあります。
というわけでFont Awesomeをpngにするツールを調べたのでまとめです。
色々なツールがあり、いいところ・惜しいところあります。
場合により組み合わせて使うと便利だと思います。

flat icon

pngでサイズ指定をして簡単にダウンロードが可能。画像も探しやすい。
難点は、色を変えられないこと。
pngよりはやはりfont icon用のicon packを取得するサイトな気がする。
flaticon

iconion

インストールして利用する。fontawesome以外のアイコンも使える。
簡単で高機能。iphoneのホーム画面に配置するようなアイコンを作成するためには秀逸のツール。
ただし、周囲の余白を取り除けないのが残念。(例えば16 x 16pxのアイコンを作成するとき、ピッタリに作りたいのに枠と余白が絶対に入ってしまう)
あとは使っているfontawesomeのバージョンがわからないのも難点。自分で組み込めたらいいのに。
商業目的で利用する場合は購入する必要がある。有償版は無償版では使えないアイコンスタイルが使えるようになる。
iconion

iconmonstor

pngでダウンロードするときに色とサイズを指定できる。背景色やpaddnigも指定できるので便利。
惜しいのは検索がわかりにくいところ。欲しい画像があっても、検索しかUIがないためどのワードで検索していいのか分からない。カテゴリとかがあるといいのに。
iconmonstr

Font Awesome to PNG

名前の通り、Font Awesomeをpngにすることに特化したオンラインツール。
色・サイズはもちろん指定でき、アイコン名を入力するとオートコンプリートで保管してくれるところが使いやすくてとても良い。
ピンポイントで1つの画像が欲しい時には重宝する。
Font Awesome to PNG

font-awesome-to-png

gitからダウンロードし、コマンドを実行して利用する。
色・サイズを指定できる。
一番の良さは、ファイルの一括作成ができること。ALLのような指定ができるため、コマンド一つですべてのアイコンをサイズ・色違いで簡単に用意することができる。
font-awesome-to-png

まとめ

それぞれ良い所がありますが、私はぴったりサイズのアイコンが欲しかったので、一括作成できるfont-awesome-to-pngと簡単にピンポイントで好きな色・サイズで作れるFont Awesome to PNGはすごく重宝しました。
どんどん良いツールが出てきてくれるといいですね。

Font Awesomeをpngで出力できるツールまとめ」への1件のフィードバック

  1. ピンバック: Font Awesomeを使ってアイコンをWebフォントで表示しよう | PlusTrick

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>