How to use Fontawesome fonts in AxureRP7

When we use Axure to make prototypes, we often use a variety of small icons. Some friends make it themselves, some to download it online, and then use the import to Axure. This is very cumbersome, some friends ask Axure can be like image processing tools as convenient and flexible use of icon font? The answer is: Yes!
Using the Fontawesome font in AxureRP7, this is a very useful little trick, and is now published and shared with gentlemen.

This article by the prototype Library website Jin Wu contribution, wants the system study AxureRP7 schoolmate, may refer to Sun Teacher's AxureRP7 website and the app prototype production from the introduction to the Proficient video tutorial , has 20 sections to be free to try to learn oh.

First step: Download

650) this.width=650; "class=" Size-full wp-image-2310 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 111130zzg7k0apb3pd0mou.jpg "height=" 146 "width=" 206 "/>

Fontawesome font: HTTP://YUNPAN.CN/CYTAKIFCNYZ6J (extract code: FA4D)
Axure Font Part library: HTTP://YUNPAN.CN/CYXW7JSZVYPMH (extract code: 53DB)

Second step: Double-click Font-awesome.zip Install Font-awesome font to your computer

650) this.width=650; "class=" Size-full wp-image-2311 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 111316q7gd7i9gaaoxoavg.jpg "height=" 277 "width=" 447 "/>

Step three: Open Axure RP, load fontawesomev321.rplib this part library

650) this.width=650; "class=" Size-full wp-image-2312 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 111459dltybs24yb6s4fay.jpg "height=" width= "420"/>

Fourth Step: Add the following font Awesome CSS link to the Web font that pops up when generating the HTML dialog box, and then click Close.

Http://netdna.bootstrapcdn.com/f ... ss/font-awesome.css

650) this.width=650; "class=" Size-full wp-image-2313 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 111704nz9zjwe91j8jz71g.jpg "height=" 311 "width=" 653 "/>

At this point, the Fontawesome font has been installed.

How to use:

1. In the Axure part library list, select the FontAwesome321 part library, and then drag and drop it as you would like to manipulate other parts.

650) this.width=650; "class=" Size-full wp-image-2314 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 112107i2oefx9z7it31z2t.png "height=" 285 "width=" 560 "/>

2. Open the FontAwesome3.2.1 version of the reference page http://fontawesome.io/3.2.1/cheatsheet/, copy the icon you want, and then paste it into Axure.

650) this.width=650; "class=" Size-full wp-image-2315 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 112413ugjb9zclaz7yy7dl.png "height=" 363 "width=" 673 "/>

Note: If you copy the icon to Axure, it does not display properly. Please select the icon and set the font to Fontawesome.

650) this.width=650; "class=" Size-full wp-image-2316 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 112744c962jlvzv6yqfg6x.jpg "height=" 421 "width=" 546 "/>

Last: Because these small icons actually use font icons, you can use the font size and color to customize the style of small icons.

650) this.width=650; "class=" Size-full wp-image-2317 "src=" http://axure.youxibe.com/wp-content/uploads/2015/01/ 113042oon80ynh1o03uohu.png "height=" 444 "width=" 656 "/>

Video tutorial: Http://yunpan.cn/cyXdH89S7byHH (Extract code: 8A88)

How to use Fontawesome fonts in AxureRP7