Arrow of time
Arrow of time

My Font Awesome to bitmap converter

Share Tweet Share

A few months ago I created a small script which extracts Font Awesome glyphs and creates transparent PNG images, with …

A few months ago I created a small script which extracts Font Awesome glyphs and creates transparent PNG images, with some fancy additional options such as shadow / emboss. My friend Saša then prettied it up a bit and we basically forgot about it - I didn't even describe it on this blog :)

I've just needed an image from this project so I'd thought I'd finally write about it.

For start, here's how to use it:

usage: awesome2png.py [-h] [-s SVG] [-t TTF] [-z SIZE] [-c COLOUR] [-d SHADOW]
                      [-i HIGHLIGHT] [-o OFFSET] [-b]

Awesome 2 png utility

optional arguments:
  -h, --help            show this help message and exit
  -s SVG, --svg SVG     set .svg file. If there is exactly one file with .svg
                        extension in current directory, that file will be used
                        as default.
  -t TTF, --ttf TTF     set .ttf file. If there is exactly one file with .ttf
                        extension in current directory, that file will be used
                        as default.
  -z SIZE, --size SIZE  image dimensions; default is 64px
  -c COLOUR, --colour COLOUR
                        default is black #000000
  -d SHADOW, --shadow SHADOW
                        set shadow colour; if not specified, there will be no
                        shadow
  -i HIGHLIGHT, --highlight HIGHLIGHT
                        set highlight color; if not specified, there will be
                        no highlight
  -o OFFSET, --offset OFFSET
                        set highlight / shadow offset from the main glyph, as
                        a fraction of the image dimension; default is 0.03
                        (3%) or 1px, whatever is larger.
  -b, --blur            blur the shadow and highlight

It requires two files: the TTF with the actual font data and the SVG which contains a list of glyphs. A future version may or may not change this. When run, the script will create a directory named as the chosen image size which will contain all the glyphs present in the SVG file.

You can adjust the resulting bitmap size, the glyph colour, the shadow and highlight colours, which, when combined, can result in pretty shadow / emboss effects. Here are some icons I made this way:

Some images generated by awesome2png

comments powered by Disqus