Font Awesome is a great way to get icons into your Axure documents for a few reasons:

  • There are tons of icons in the collection, so you can usually find what you’re looking for
  • It’s vector so it scales to any size and looks good on retina
  • You can change the icon’s color right in Axure
  • It’s lightweight

Here’s how to start using Font Awesome in your Axure wireframes:

Step 1: Download and install Font Awesome on your machine

Here: https://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.5.0.zip

Unzip it, go into the “fonts” folder and double-click the appropriate font file to install it (FontAwesome.otf on OSX).

Step 2: Add Font Awesome to your Web Fonts

Copy this link: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

In Axure, go to Publish > Generate HTML Files… and navigate to the Web Fonts section.

Axure web fonts

Here, click the green “+” icon to add a web font, add the font name, and paste the URL. Close the box when finished.

Axure Web Fonts – Font Awesome added

Now that you’ve added it as a Web Font, it will render properly when you publish and share to people on other machines (even if they don’t have Font Awesome installed).

Step 3: Copy/paste icons into your document

Go to the Font Awesome Cheatsheet (keep this bookmarked since you’ll need it every time you want a new icon): http://fortawesome.github.io/Font-Awesome/cheatsheet/

Highlight and copy the icon you want to use.

Right caret highlighted

Go to Axure and paste it in.

Right caret pasted but rendering incorrectly

I’ve added the icon to the text in my “Take me to the Pizza” CTA, but it won’t render correctly until I change it to Font Awesome.

Text changed to Font Awesome

Boom. Such an actionable CTA. Make the icon a separate text area if you want to resize/position it different from the rest of the button text like so:

Reformatted icon

Questions? Have a better method for using Font Awesome in Axure? Comment below.