Thursday, March 24, 2016

Problems with Font Awesome Icons

I love Font Awesome, but it's been a pain in the ass for me to work with their icons on my Windows machine using Inkscape. I blame this on Inkscape's buggy text element interface, but I'm happy to use it as a free, open source package.

Anyhow, it's hard to select an icon from the Font Awesome Cheatsheet or from individual icon pages becasue I'm not able to select the icon directly. I end up copying a space character.


I ended up relying on Microsoft word to act as a medium to get access to copying the character:

  • Open Word
  • Type the Unicode address, for instance f041
  • Select the 4-digit code and hit Alt+x to convert the unicode value to its designated character
  • Change the font of the unknown character to FontAwesome, then I can finally move on with my life...
Even after I'm able to copy the desired character from Word, Inkscape still doesn't always work since it's a nightmare tying to tell Inkscape to render the character using the FontAwesome font.

Anyway, here are a few things to consider to ease the transition

Download the Latest Font File

If you have any problem, first update to the latest Font Awesome font file:
  • Uninstall any current Font Awesome fonts you have installed. Make sure to close any software that's running it including Inkscpae, Gimp, Illustrator, or even Word or Outlook just to be safe
  • Go to FontAwesome.io and click the Download button to grab the latest version
  • Install the .ttf file and try again

Chrome Won't Let me Select Icons

I found a cool Chrome extension that streamlines the search-copy method.

Download the Font Awesome Icon Picker extension for Chrome for a quick Font Awesome reference. It'll let you easily navigate the catalog of icons, and most importantly, it allows you to directly highlight and copy individual icons.


Since I started using this, I haven't had a problem directly pasting the desired icon directly into Inkscape.