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
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
In Axure, go to Publish > Generate HTML Files… and navigate to the Web Fonts section.
Here, click the green “+” icon to add a web font, add the font name, and paste the URL. Close the box when finished.
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.
Go to Axure and paste it in.
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.
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:
Questions? Have a better method for using Font Awesome in Axure? Comment below.