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.
I’m impressed, I must say. Rarely do I encounter a blog that’s both educative and engaging, and without a doubt, you’ve
hit the nail on the head. The issue is something that too few people
are speaking intelligently about. I’m very happy I came across this in my search for something regarding
this.
I really like what you guys are usually up too. This type of clever
work and exposure! Keep up the superb works guys I’ve included you guys to my
personal blogroll.
How do I enlarge the font size in tabs on Chrome?
Set page or font size for all webpages
On your computer, open Chrome.
At the top right, click More. Settings.
Click Appearance.
Make the changes you want: Change everything: Next to “Page zoom,” click the Down arrow. . Then select the zoom option you want. Change font size: Next to “Font size,” click the Down arrow .
Fonts Monster
How do you change the font size on Canva?
Tap on a text box and use the text toolbar that appears below to format text. Formatting options include: Text font: Tap Font and select or search for the font you want to use. Text size: Tap Font size and drag the Font size slider to your preferred value.
Font Sonic
Can I download Adobe Fonts to my computer?
In the Fonts window, select the File menu, and choose “Install New Font.” Navigate to the folder that contains the fonts you want to install. OpenType fonts purchased online from Adobe will be in the location you decompressed them to. Select the fonts you want to install.
Fonts Monster
Leave a comment