Hey everyone,
Font Awesome 5 Pro is pretty, well… Awesome!! However, getting it working in Axure 9 has been really tough for me. So, after days of head scratching and troubleshooting, here’s how I got all Font Awesome 5 Pro fonts working in both local preview and remote AxShare generated prototypes with Axure 9:
Step 1: Go Pro: https://fontawesome.com/pro - It’s $60/year, and worth it imho
Step 2: Download: https://fontawesome.com/download - Download and unzip the Pro for Desktop zip of fonts.
Step 3: OS Font Install: Go into the folder you unzipped, then into the otfs folder, and install all 4 of the otf font families included. Usually that’s a double-click on each, or a bulk select, right-click install all at once. Regardless, once you’ve done that, restart Axure so the fonts will show up in Axure’s global fonts select list.
Step 4: CSS URLs: https://fontawesome.com/start - go to that url and get the latest Font Awesome CSS urls. Specifically, select these filters: Pro, Solid, Regular, Light, Brands, Webfont, and keep that page open, as you’ll use that in Step 5. While you’re there, click the blue + icon in the lower left, and add axshare.com (ie: the usable on: indicator). Here’s what all that looks like:
Step 5: Add Fonts: In Axure 9, Click the blue Share icon in the upper right, click the Fonts tab, and add 4 entries exactly like this, but using whatever the current URLs you got from Step 4 were. Here’s what I had at the time of writing this post (the exact version numbers will soon get outdated, so again, use the URLs you got from step 4, the inclusion of URLs here is just for demonstration purposes):
Font Label: Font Awesome 5 Pro Solid
Choose Link to .css
URL of css file: https://pro.fontawesome.com/releases/v5.7.1/css/solid.css
Font Awesome 5 Pro Regular
Choose Link to .css
URL of css file: https://pro.fontawesome.com/releases/v5.7.1/css/regular.css
Font Awesome 5 Pro Light
Choose Link to .css
URL of css file: https://pro.fontawesome.com/releases/v5.7.1/css/light.css
Font Awesome 5 Pro Brands
Choose Link to .css
https://pro.fontawesome.com/releases/v5.7.1/css/brands.css
Here’s what that looks like when it’s done:
Step 6: Add Font Mappings: This ended up being the most unintuitive part for me. So, while still in the Fonts tab from Step 5, click the small Font Mappings link in the upper right, and add the following four font mappings EXACTLY. TYPOS MAY BREAK FONTS, SO GET THESE EXACTLY RIGHT!!
Font Awesome 5 Pro >> Solid
Font Awesome 5 Pro >> 900 >> normal
Font Awesome 5 Pro >> Regular
Font Awesome 5 Pro >> 400 >> normal
Font Awesome 5 Pro >> Light
Font Awesome 5 Pro >> 300 >> normal
Font Awesome 5 Brands >> (left blank)
Font Awesome 5 Brands >> (left blank) >> (left blank)
Here’s what that looks like:
The reason I went all caps-locky above was I realized that I had been writing Font Awesome 5 Pro Solid in the Font Mappings open text field for the map to font family field, and that was actually causing the Pro Solid fonts to not render. However, when I changed it to just Font Awesome 5 Pro and removed the Solid part, and just let the font weight value carry the Solid treatment, it worked.
So, all that to say… with any luck, now you’re able to do what I do - live on the https://fontawesome.com/icons page, pasting Font Awesome glyphs directly into Axure, and then highlighting the broken thing I pasted and changing the font to FontAwesome Pro or Brands, and presto, now you can publish to AxShare or whatever, and get all the font awesomeness you could ever want!!
Pro tip: There’s a kinda hidden but very convenient way to copy the icons off the icons page. On https://fontawesome.com/icons (it’s the new cheatsheet basically), click the little info icon in the upper right. That will show a nice little clipboard icon below each icon. Click that, and the glyph is in your clipboard, and ready to be pasted anywhere, including Axure!
I sincerely hope this helps some people. It’s taken me days to figure this out. Best of luck to you all, and please hit reply and let me and the community know how well these instructions worked for you!
Thanks,
- Erik