Axure Tutorial: Using Font Awesome Icon Library on Axure RP
Introduction
Axure RP can use Web Fonts, which makes it very convenient to include Font Awesome. Font Awesome is a font that is mainly used for icons, not the fonts we are familiar with.
With just a few simple steps, you can use Font Awesome's 2,099 free icons on your own projects. The icons cover a wide range and the style is relatively uniform.
1. Install the Font Awesome font file locally
To use Font Awesome, it must be recognized locally, so you need to install the font file first. Go to the official download page https://fontawesome.com/download and choose to download the Free for Desktop version.
Unzip the compressed package and install the 3 otf font files in the otfs folder:
- Font Awesome 6 Free-Regular-400.otf；
- Font Awesome 6 Free-Solid-900.otf；
- Font Awesome 6 Brands-Regular-400.otf
After successfully installing the font file, restart Axure, and the font icon of Font Awesome can be displayed on this machine.
2. Add web fonts configuration to Axure project
Simply installing fonts on this machine will not solve the problem of font display on other devices. By configuring the web font, the font can be called online, so as to solve the problem that the device does not support the display of the font.
Axure supports using .css or configuring @font-face to call web fonts, click [+ Add Font], add web font, and select [Link to .css] to add a css reference:
Font Label set to Font Awesome Free
URL of CSS file set to https://use.fontawesome.com/releases/v6.1.1/css/all.css
The css file version referenced here is 6.1.1, which corresponds to the version installed locally. The css file address comes from font awesome official site.
If you need other versions of css files, you can visit https://fontawesome.com/account/cdn (requires account registration) and choose your own css as needed.
Web font configuration is complete, you can close the page. At this time, the Font Awesome font is not installed on the instant demo device, and you can still see the icon you set.
Note: A font configuration is added here using all.css. You can also split Brands, Solid, and Regular into 3 corresponding css configurations according to your needs.
3. Use Font Awesome Icons in Axure
After completing the local font configuration and web fonts configuration, you can directly paste the icons on Font Awesome locally.
Font Awesome's icon library: https://fontawesome.com/icons
Since only free icons of Solid, Regular, and Brands can be used, the corresponding types can be filtered directly on the left. Select the desired icon and click the Copy Unicode Glyph button to copy the icon. It can then be pasted directly within Axure.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
This site was… how do I say it? Relevant!! Finally I’ve found something which helped me.
Thank you!
Aw, this was an extremely nice post. Finding the time and actual effort to make a superb
article… but what can I say… I put things off a whole lot and never
manage to get nearly anything done.
When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails
with the same comment. Is there any way you can remove people from that service?
Many thanks!
I was suggested this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my trouble.
You’re amazing! Thanks!
Way cool! Some extremely valid points! I appreciate
you penning this write-up plus the rest of the website is also really good.
Leave a comment