こんばんは。
先日設置した「上に戻るボタン」のカスタマイズをしたくて、
試行錯誤中のmikanusagiです。
今回は、Font Awesome のアイコンをPNG化できるという、
Convert Icon Fonts To PNGを使ってみました。
Font Awesome以外のものも使えるようです。
何より、無料！！(2018年5月現在)
早速使ってみます。
- Font Awesomeのアイコンの名前を確認する (省略可)。
- 左上の Name のところに「chevron-circle-upと入力」
- アイコンの色を変える場合。
- 背景の色を変える場合。
- 画像をダウンロード。
Font Awesomeのアイコンの名前を確認する (省略可)。
今回は、このアイコンなので「chevron-circle-up」です。
左上の Name のところに「chevron-circle-upと入力」
なお、適当なキーワードでも検索できます。
(だからFont Awesomeでの検索は省略してもよい。)
◀ 例えば「arrow...」と入力しかけているところ。
アイコンの色を変える場合。
アイコンの色は2段目。右の四角をクリックしたら、色を選択できます。
たとえば、緑の指定にしてみると。。(自分でカラーコードを入力してもOK)
色が変わりました。
背景の色を変える場合。
背景に関しては、3段目。
未入力の場合、うっすら「Background e.g. #eee...」と表示されますが、
このままだと、背景は透過。
もしくは、左のごみ箱をクリックすると、transparentとなって、背景が透過。
右のカッコをクリックすると、アイコン同様、色を選択できます。
今回は、背景は透過させたいので、transparentで。
➡ 
画像をダウンロード。
「 Generate 」ボタンをクリック。
数秒間処理されて、
Download ボタンが出てきます。
▲ ちなみに、remove backgroundボタンもあります。
これをクリックしたら、背景に色を設定していたとしても、
背景の透過画像をダウンロードすることができます。
これで、Font Awesome のPNG画像を入手できました。(*´▽｀*)
お疲れ様でした。
