在做交互设计的时候，作为产品设计师我们常常需要用一些标准的图标库，通过导入现成的图标可以极大地提高我们的设计效率。
常用的图标库，一般提供SVG，PNG图片，他们提供给设计师矢量图片(SVG格式或字体格式），设计师在设计稿中记录该图标的名称，并告知前端开发人员。
在开发过程中，前端同学通过调用图标库提供的CSS样式，并填上对应图标的名称，便可以快速在Web上呈现出各种精美的矢量图标，例如：
Icon， 可提供自定义的字体库图标供设计师使用- 阿里图标库 ，可提供
SVG，PNG图片供设计师使用 Font Awesome，可提供标准的字体库图标供设计师使用
今天我们重点讲述，如果规范使用Font Awesome图标库完成交互设计，并让前端同学快乐地跟我们合作。
初识 Font Awesome
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
官方网页为： http://fontawesome.com(新版官网)
新版 FontAwesome 官网
对于英文不是太好的同学可以访问由“极风游科技”提供的 中文页面： http://fontawesome.dashgame.com
选择页面顶部的“图标”按钮，可以看到所有图标的分类：
选择“文件”，网页自动跳转出到所有“文件”图标部分，点击图标最后的“复制”按钮，可以复制到该图标的名称，如下红框所示“file-excel-o”，这里非常重要，这个名称对于设计师之后导入图标到Axure 或者 前端同学都非常有用。
产品设计师如何使用Font Awesome
1.下载字体库
由于Font Awesome图标库是基于字体来使用的，所以我们首先需要在官方主页的最上面点击”立即下载”（目前最新版为 V4.7.0）, 然后解压压缩包，点击 “TrueType 字体文件”，完成字体的安装：
在页面中安装使用 Font Awesome
Axure字体选择就可以看到FontAwesome了
2.载入字体库并使用字体元件库
载入部件库，在Axure中选择【载入元件库】
找到你下载的rplib文件，进行安装，也可以将元件库直接复制到“Axure RP 8\DefaultSettings\Libraries”，前面的 Axure RP8是软件安装的根目录；可到百度网盘下载
在左侧的元件库中，选择“FontAwesome”直接使用，然后你就可以直接使用了，自由更改字体大小，颜色等
3.生成原型之后，链接CSS样式
完成原型制作之后，然后就是给别人看了，由于我们使用了特殊的FontAwesome字体，就需要告知网页加载这个字体样式。
使用网络添加远程地址文件
在【发布】-【在HTML文件中重新生成当前页面（R）】-【生成HMTL文件】-【Web字体】中进行相应设置，添加链接到“.css”文件，也可以使用快捷键 ctrl + f8 再到【Web字体】中添加 URL ，（这是个远程地址，需要网络）
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css也可以使用本地文件添加
也可以使用后面的 @font-face 并在具体参数处填写：
font-family:FontAwesome;
src:url(‘fontawesome-webfont.ttf’)format(‘truetype’);
然后将TrueType字体库放入HTML文件所在的文件夹里面，如下图所示：
见证奇迹的时刻，重新打开你的原型，就能看到你想要的字体了。
前端攻城狮如何使用Font Awesome
Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称（前端同学可以查看设计同学线框图中的注释）。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。
但实际上使用<span>才能更加语义化。如下所示：
前端的小伙伴们可以很深入的了解下矢量图标。
<i class="fa fa-camera-retro"></i> fa-camera-retro 
