Font Awesome 5 - Free vs Solid

newbie-question
#1

So I went through all the posts that I could find about how to integrate FontAwesome 5.x into my wireframes.

  1. I added the link into Web Fonts: https://drive.google.com/file/d/1C3334wn-Yc9OwCfwAWnd2Xo4FCuRwG2h/view?usp=drivesdk

  2. If I browse on the same computer I’m working on, all icons show up correctly in the html. If i browse on another computer, only some icons show up, but not all.

I then looked at the ‘Computed Style’ tab as mentioned in another post and realized that all ‘FA Free’ icons show up as a network resource but all ‘FA Free Solid’ ones don’t.

Don’t be misled by the fact that the icons show up fine in both cases - the screenshots were taken on the local computer…

Would appreciate any pointers as to what I can do differently, short of going through each screen and replacing the ‘Free Solid’ ones with ‘Free’ ones…

Thanks!

#2

Hi caseekay,

Thanks for the screenshots! Let’s try this:

  1. Please download the latest version of Font Awesome 5 (v5.5.0) from the below link (the OTF font files):

    https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started

  2. Once that’s done, open your .rp file in Axure RP, go to “Publish > Generate HTML Files > Web Fonts” from the main menu, and paste over the updated CSS link:

https://use.fontawesome.com/releases/v5.5.0/css/all.css

I got the updated link from here:

https://fontawesome.com/start

Does that help to render your FA5 fonts properly? If not, could you post your .rp file here so I can take a look at what’s going on? If you’d rather keep the file private, feel free to email that over to support@axure.com. Thanks!

#3

Yep, already did that and also used the font mappings as described here Font Awesome 5 Solid, Font Weight Changing from 900 to 400 and now the Sold fonts don’t render at all. Sending the rp file over by email…

#4

Hi caseekay,

With the newer versions of Font Awesome 5, you do not need to set up font mappings. The Solid icons should render as Solid, and the Regular icons should render as Regular, just with the updated CSS link.

At any rate, I’ll be looking out for your email!