Monday, October 21, 2013

Font Awesome icons as PNG and JPG image files

Font Awesome is simply awesome! Many thanks to Favid Gandy for this font.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Recently I managed to enable Font Awesome on my Moodle production site. The result is that I am now able to display Font Awesome CSS fonts on any Moodle resource or Moodle activity just by installing Julian Ridden's Font Awesome filter and by following his instructions here and here.

I've created two photomosaics of your images using the Font Awesome icons. This took me almost 30% of a whole day's work. I had to figure out how to automatically convert the Font Awesome icons into PNG files using Python (the toughest part!). Then I had to batch convert 378 PNG files into JPG format (only after a tough web search). Finally, I used AndreaMosaic to create the final mosaics using a combination of 2,000 repeating JPG images of the icons (the easiest part!).


A photomosaic of the original image found here.

Here's a self-potrait done for fun!

Best viewed from a distance of 3 feet away from the monitor.

If it helps anyone, I've also created a zip file that has the PNG and JPG images of all 378 Font Awesome icons. I doubt if you can find the icons in image format anywhere on the Internet. Of course, Font Awesome, as a graphical font by itself has an advantage over the image format. Anyway for what it's worth, here's the link:

Frankie Kam

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!

1 comment:

  1. Thanks to Alejendra for sharing another other great resource of fonts that is super well organized. Best of all, these fonts are free for commercial use! See


Ratings and Recommendations by outbrain