4 steps to get FontAwesome 5.11.2 FREE + Axure 9 working

#1

Hi
For those of you that have Axure 9 and want to use FontAwesome 5 FREE i have created a simplified 4 step guide based on this topic for FontAwesome Pro: https://forum.axure.com/t/6-steps-to-get-font-awesome-5-pro-axure-9-working/57832 (thank you r0tt3n for the inspiration)

Step 1: Download: https://fontawesome.com/download - Download and unzip the Free for Desktop zip of fonts. I got version 5.11.2
Step 2: OS Font Install: Go into the folder you unzipped, then into the otfs folder, and install all 3 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 3: Add Fonts: In Axure 9, Click the blue Share icon in the upper right, click the Fonts tab, and add
Font Label: Font Awesome 5 Free
Choose Link to .css
URL of css file: https://use.fontawesome.com/releases/v5.11.2/css/all.css
This is what it looks like:
axure%209%20font%20css
Please note - this is where this guide is simplified. This step is for version 5.11.2 and there may some icons that do not show up. For now, it is working for me.
Otherwise go to this page https://fontawesome.com/account/cdn and get specific css for each font family.
Step 4: Add Font Mappings: While still in the Fonts tab from Step 5, click the small Font Mappings link in the upper right, and add the following font mappings (I did not try to add brands, since I don’t need it)

Font Awesome 5 Free >> Solid
Font Awesome 5 Free >> 900 >> normal

Font Awesome 5 Free >> Regular
Font Awesome 5 Free >> 400 >> normal

Font Awesome 5 Brands >> (left blank)
Font Awesome 5 Brands >> (left blank) >> (left blank)

Here’s what that looks like:
axure%209%20font%20mappings

Now, you can go to the https://fontawesome.com/icons page, and paste the Font Awesome glyphs directly into Axure. Highlight it and change the font to FontAwesome Free or Brands, and presto, now you can publish to AxShare.

Again, thank a lot to r0tt3n for the original post. I would never have guessed the steps without it.
Best regards, Marianne

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

Hi Marianne!
Thank you for your nice guide about using web fonts.
I really want to know why we need to add font mapping? I just added the css address, pasted the glyphs, and everything went well including sharing to axure cloud.
I am a little bit puzzled.

#3

Hi
I honestly don’t know. I think it is to make sure that the font looks correct in all browsers, even if the user does not have the fonts installed.
Best regards, Marianne

#4

Without the css font link, people viewing it on their computer (who don’t have font awesome installed), will not be able to see the icons. They would see a broken image instead. If you ask someone you know, who doesn’t have font awesome installed, to check and let you know. They would most probably not be able to see the icons correctly.

#5

Doesn’t seem to work on preview

axure%20gpyphs%201
axure gpyphs 1.PNG1187×912 51.5 KB
axure%20gpyphs%202
axure gpyphs 2.PNG1479×967 20.6 KB

#6

Hate to ask a stupid question, but…
From where do you copy the icon? There are lots of places on the Font Awesome icon page and I can’t figure out from where to cut/copy… Do you copy from Font Awesome and then paste onto the Axure canvas, or some other action? A picture would be great. Thanks so much!

#7
  1. Install FontAwesome font on your desktop
  2. Search icon name on FontAwesome site
  3. Select the icon, Click the small icon ‘Copy unicode glyph’ under the big bold icon name.
  4. Paste it into the Axure canvas. Set the text font to FontAwesome Free Regular/Solid

If you wanna use pro icons, you should buy and install pro fonts. Check the icon whether it is a pro or not.