有名なアイコンフォントをpngで使う方法

有名なアイコンフォントをpngで使う方法

  • 2017-10-20  最終更新日:2017-10-20

サイトのカンプを作るときに最近ではアイコンフォントを使うことはもう当たり前になっていますが、アイコンフォントをフォトショップやスケッチに埋め込むときに便利なサイトをご紹介します。

fa2pngというサイトですが⇒Convert Icon Fonts To PNG - fa2png.io -png形式に変換してダウンロードできますのでかなり使い勝手が良いです。私はよくFontAwesomeのアイコンを使っているのでこれでだいぶ間に合いますが、実は私はこれを知るまではアイコンジャーというアプリを使っていました⇒IconJar

今でも使っていますがアプリにアイコンフォントを登録しておけば使い勝手が良いのですが有料です。無料で使えていたのですが今では有料で2500円ぐらいと結構しますね。


スポンサーリンク


使えるアイコンフォントの種類

fa2pngというサイトで使えるアイコンは以下の種類です。最新の状態でないものもありますね。

使い方は簡単です。

FA2PNGロゴの隣にFontsというメニューがありますが、コチラは使えるフォントリストを表示してあります。それでその隣にあるIconsでアイコンを選びます。

fa2png.io

All fontsというプルダウンから使うフォントを選んで検索フォームにタグを入れます。今回はAll fontsからinstaと入れて検索してみました。そして使いたいアイコンフォントをクリックします。fa-instagramのアイコンを選びました。

fa2png.io

このような編集画面になります。一番上にあるのがアイコンの色です。その下が背景色を決められます。その下が大きさです。最大で1024pxになります。最大にすると画面からはみ出ますがちゃんとそのサイズでダウンロードできます。そしてその下がマージンサイズです。基本0で良いと思います。上下左右に幅をとりたい場合にあけたい幅をピクセルで記入すれば良いです。

あとはGenerateをクリックすると下にダウンロードボタンが表示されますのでダウンロードして完了です。

fa2png.io

参考になれば幸いです。


∞Tadashi Suyama∞

icon fonts png convert
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
fontawesome5の使い方

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontA...

18 Feb 2018

アイキャッチ
自作アイコンをSVGでの表示方法

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。W...

13 Feb 2018

アイキャッチ
なりすまし・フィッシングメール対策のDMARCとは

DMARC(ディーマーク)とは迷惑メールの送信者から偽装を防ぐ仕組みになります。まだ対応サーバーは少ない気がします。 その仕組みに当たってSPFとDKIM(ディーキム)も知る必要があります。こ...

03 Feb 2018

アイキャッチ
いつもの定型文をDashに登録、便利なスニペット機能

Dashとは、ドキュメントマニュアルとコードスニペットマネージャになります。 サポートされているマニュアルは150の以上あり、オフライン環境でのドキュメントを検索することができます。そしてエデ...

27 Jan 2018

アイキャッチ
アマゾンエコーを使ってみた感想

アマゾンエコーを購入したので使ってみた感想などを述べたいと思います。1週間ほど使ってみましたがこんなことが出来るとかこんな感じで使うと良いのかなという参考になれば思います。 第一印象は結構音が...

20 Jan 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

icon fonts png convert
フッターイメージ