6 Steps to get Font Awesome 5 Pro + Axure 9 working


#1

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

#2

Hi Erik,

Thank for posting this! I went through the steps you outlined and was able to get Font Awesome fonts to render correctly here at Axure HQ–sweet! I did notice one thing that hopefully makes things easier:

In Step 4: CSS URLs, when visiting https://fontawesome.com/start, you can click “All”. This will make it so that in Step 5: Add Fonts, you only have to link to one .css (all.css) and also makes it so that you don’t need to add font mappings as described in Step 6: Add Font Mappings.
2019-02-12_1645

Hope this helps!


#3

Erik,

Thank you VERY MUCH for taking the time to document this out. I wish there was an easier way to do this in the Axure application, but this help me a TON!

Do you know of a way to set this up so that it is shared across projects? I wish that I could do all of this configuration on a shared library and then have it inherited across the projects that use the shared library. I will have a number of projects going at once, and I wold love to have a central place to control this.

Cheers,
Ethan

EDIT: If you ever built a book in Indesign, you were able to have multiple files that were related as a “book” and if you made any style updates to one of the “chapters” you had the option to push those changes to the rest of the files. This is what I would love to have…I miss the more mature style support of the print world from 15 years ago…oh and being able to define Spot colors for a project. A guy can dream…


#4

@Justin_Axure when I used the all css option from fontawesome, I found that some icons from the brands and pro solid sets weren’t being rendered. I probably should have clarified that in my original post, and will update my original post either way depending on the outcome of this discussion. Would you be willing to report back after a week of active use of the all css urls for Font Awesome 5 pro, and let the community know about your experience? That would really help us get closer to having closure on this point. I agree, using all would be vastly preferable, if it actually worked 100%, which in my experience, it didn’t.

@atimefordesign Glad it was helpful! Regarding having it be “shared across projects”, I’m almost positive it’s not possible. That said, for future projects, what you could do is make a starter project file that you duplicate from in order to get things going without having to redo all of this each time. The only thing I’d caution you about is regarding version numbers - fontawesome version numbers are constantly changing, and they’re built into the css urls, so, it might be worthwhile to update the urls using the latest each time you duplicate your starter project. Hope that helps!!


#5

Is there a widget library for Font Awesome 5 Pro that I should be using? This is how I had used previous (free) versions of Font Awesome. I had a Widget Library to pick from and then I could drag the “icons” onto the dartboard and style them as needed.


#6

@atimefordesign the way I work is - I live on fontawesome.com/icons because the search function is really powerful. The search matches both text and often meaning. Since there’s >5,000 icons, I think having a really thoughtful search becomes the most important piece. So, I probably wouldn’t use a widget library even if there was one for that reason alone. Instead, what I do is search for the kind of thing I want an icon for, and when I find the right one, I hit the copy button below it (that’s what the Pro Tip near the end of my original post was for), and then paste into the text field on whichever widget it should go on (and correct the font if it wasn’t right initially). Thoughts?


#7

This is going to be the way I work. Once I decide to use a specific icon, then I will manually add it to the widget library for that project. This will help the team use the same version of specific icons when there are multiple options. The search in Axure is actually kind of a pain in the butt anyway, and the one on the FA.com is pretty darn radical.

I did use the .css URL for all the fonts https://pro.fontawesome.com/releases/v5.7.2/css/all.css as mentioned by @Justin_Axure and it worked perfectly. If it works for you as well, you can add it to your initial post.


#8

@atimefordesign sweet - did you also skip the font mappings step? Maybe I’ll try it again some time soon and see if I can get it to work.

Also, quick extension our previous convo - I totally agree that once you’ve got an established suite of icons for certain things in a given project, there’s a lot of value to standardizing that for the rest of the team to re-use. You could use axure share to share a widget library, or just add a page in your sitemap dedicated to common design patterns, and put whatever you need in there.


#9

Hi @r0tt3n,

Thanks for clarifying! I tried out a handful of the brands when using the all.css link but didn’t find any issues when copying the glyph from FontAwesome’s cheat sheet. However, I did find that if I entered the text of the brand (e.g. “apple”), the icon would render on canvas but would display as text when published to Axure Share (this is expected as ligatures aren’t supported for Web Fonts + CSS by Font Awesome). Does this sound like what you were running into?

If not, were there any specific brand glyphs that weren’t appearing correctly when published?

Note: If anyone is curious on why Font Awesome’s icons will render in desktop applications and not on the web when entering the text of an icon, check out their note on Ligature use in Font Awesome on the web on the following page:
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started


#10

Yes, exactly! That’s what I found - importing into axure was fine, but publishing to axure share was randomly not rendering some icons. The only way I could get it to work for all scenarios was by doing exactly what my original instructions described, with all the font mappings, etc. I don’t see a way to avoid that and still get it working everywhere 100%. Thoughts?


#11

Hi @r0tt3n

Thanks for your help with this so far! We’d like to make sure that the “all.css” option works for all icons to make this process as smooth as possible. That said, when the brand icons weren’t displaying, can you describe how the brand icons looked when you published them to Axure Share? Also, can you share specific brand icons you were having trouble with? I’d like to relay those over to our QA teams for further testing!

Thanks again!


#12

I will 100% use a shared library…once Axure 9 supports team projects. I already have it up there, and I am using the cloud based library, even though it is a pain for a team of 1. Nice thing is that my first compatriot is joining me on Monday, so hopefully they turn on the Team Project feature “soon”

cc: @Rachel