【好看的qq备注前缀】如何使用Font Awesome图标库在Axure RP 8中完成设计-拍拖百科

今天，我们将简要介绍如何在Axure RP 8中使用Font Awesome图标库完成设计。

交互设计时，作为产品设计师，我们经常需要使用一些标准图标库，导入现成的图标可以大大提高设计效率。一般提供SVG、PNG图片的普通图标库，设计师下载后可直接用于交互设计文件，开发学生将图片文件放在图标文件夹中，供页面代码使用。例如：

免费的Esayicon付费IconFinder，但是这种古老的方式对前端开发人员来说很不方便。所以新一代图标库提供设计师矢量图片(SVG格式或字体格式)，设计师在设计稿中记录图标名称，并通知前端开发人员。在开发过程中，前端学生可以调用图标库提供的CSS样式，填写图标的名称，以便在web上快速呈现复杂的矢量图标。例如：

Icomon提供了自定义字体库图标，使设计师能够使用ARITOUL库。SVG、PNG照片为设计者提供Font Awesome，并提供标准字体库图标。今天，设计者使用Font Awesome图标完成交互设计，并让前端同学愉快地合作。

1、初识 Font Awesome

Font Awesome提供了可扩展的矢量图标，您可以使用CSS提供的所有属性(包括大小、颜色、阴影或其他支持的效果)进行更改。官方网页如下：

英语不好的学生可以访问“极风有机术”提供的中文页面。

要查看所有图标的分类，请选择页面顶部的“图标”按钮。

“选择”“手势”，网页自动复制到所有“手势”图标部分，“点击图标结束”“复制”按钮，可以复制到此图标的名称。下面红色框中显示的“hand-o-right”，

2. 产品设计师如何使用Font Awesome

2.1 下载字体库

Font Awesome图标库是基于字体的，因此必须先在官网顶部单击“立即下载”(当前最新版本为V4.7.0)

2.2 在Axure 中使用 Font Awesome

网上很多网友推荐加载Font Awesome的元件库，以此快速完成图标的使用。但是笔者认为由于Font Awesome经常更新，而对应的Axure 元件库很难快速更新，所以建议大家自己在官网上通过图标的分类，快速选择自己心仪的图标，获取名字以后，在图标库中搜索定位图标，然后复制粘贴到Axure中使用即可。

但是由于之前的页面只允许我们复制图标的名字，没法直接复制图标，所以我们没法在Axure中将图标使用。所以我们需要去到”字体库的图标备忘单页面“ ( /cheatsheet/) ，按名字搜索图标。例如：我们之前选择向右的手势为 “hand-o-right”, 然后我们在CheatSheet页面搜索（Ctrl+F）到该图标，如下所示：

然后我们复制红框中的手势图标贴入Axure中，但是我们发现图标没有出现，而是一个方框：

原因是字体默认为Arial,我们切换为 Font Awesome,以后图标正常显示：

但是需要注意我们一定更要在该图标的说明里面备注图标的名字，这样便于前端同学开发时快速完成代码的编写，如下图所示：

2.3 设计发布

但我们完成设计以后，需要将线框图发布成HTML文件，这时候如果将文件放到一个没有安装过Font Awesome 字体的电脑上，字体图标可能无法显示，所以我们需要在发布的时候做一些手脚。

首先我们点击页面右上角的发布-生成HTML文件…

为了确保以后用来查看线框图的电脑在断网的情况下同样可以正常查看，我们需要采用离线字体的方式完成HTML文件的生成。如下图所示，添加Web字体时，我们选择@font-face，并在具体参数处填写：

font-family: FontAwesome;

src:url(‘’) format(‘truetype’);

然后将TrueType字体库放入HTML文件所在的文件夹里面，如下图所示：

然后我们将整个文件夹拷给前端同学他们就可看到了，如下图所示：

2.4 备份CheatSheet

为了确保我们无法访问Font Awesome官网时也可以快速复制图标贴入Axure中，我们可以将 Font Awesome 的CheatSheet 备份为PDF文件。在Chrome浏览器中，输入 /cheatsheet/，然后鼠标右键选择打印，如下图所示：

注意：如上图红框所示，请将目标打印机选择为”另存为PDF“，只有这样生成的PDF文件中的图标才是可以复制的。

3. 前端攻城狮如何使用Font Awesome

Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称（前端同学可以查看设计同学线框图中的注释）。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。但实际上使用 <span> 才能更加语义化。如下所示：

<iclass=”fa fa-hand-o-right”></i>fa-hand-o-right

由于藕不是前端攻城狮，所以不敢班门弄斧了，具体可以去网站上看看用法，如下所示：

好啦，到目前为止，大家应该很清楚Font Awesome应该如何使用了吧，快去试试吧。

本文由 @逻辑画疯原创发布于人人都是产品经理。未经许可，禁止转载。