有名なアイコンフォントを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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

タグクラウド

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