axure库字体等安装

安装字体文件

首次使用字体图标需要在本机上安装FontAwesome字体文件，点击上面的的字体下载按纽获得字体文件包。解压缩后打开其中的Fonts文件夹，安装里面的FontAwesome.otf或Fontawesome-webfont.ttf这两个字体文件。Win系统双击这字体文件就会提示安装，Mac系统安装字体方法请自行百度。字体安装完成后需要重新启动Axure，重启后选中字体时在字体列表中如果能看到【Fontawesome】，则代表字体已经安装成功。

使用字体图标

在本页面找到需要的图标用鼠标左键双击，然后点击右击选择复制图标字符，这个操作跟在网页中复制文本的操作是相同的。然后返回到Axure软件界面中，在对应的元件中将图标字符粘贴进去。这个时候我们看到的图标仍然是一个乱码字符，我们需要选中这个乱码字符，在字体属性中将它的字体设置为【Fontawesome】，然后图标就能正常显示了。

设置字体图标

Fontawesome具有跟字体一样的特性，我们可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影等。设置方法跟设置字体的样式是一致的，选中图标字符在字体样式中就可以进行设置。除此之外，我们还可以对包含字体图标的元件设置选中、悬停、禁用等各种交互样式，这也是Fontawesome图标在原型设计中最易用的特点，用它来制作具有交互样式的按纽和组件会变得非常方便。

如何显示图标

如果我们已经在本机上安装了Fontawesome字体文件，在预览原型文件时字体图标都可以正常显示。而如果输出的原型在其它在未安装字体文件的电脑上演示时，图标显示为乱码该如何处理？第一种方法，在发布设置中Web字体选项中添加外部Web字体CSS链接，CSS链接地址可以在页面上方看到，需要将它复制并添加到Axure发布选项的Web字体中，这样生成的原型文件就可以在任何设备中演示时正常显示字体图标了。添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，然后设置名称为【FontAwesome】，将CSS链接地址添加到URL中，然后生成HTML文件就可以了。

第二种方法，在发布设置中的Web字体选项中添加本地Web字体CSS链接，使用这种方法即使在未联网状态下图标也能正常显示。将字体文件压缩包解压出来后将【font-awesome-4.7】目录拷贝到【Axure安装目录\DefaultSettings\Prototype_Files\resources\】中。完成拷贝后再添加CSS链接，添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【FontAwesome】，CSS链接地址设置为【resources/font-awesome-4.7/css/font-awesome.css】，生成HTML文件即可。

图标无法显示

当前我们使用的Fontawesome字体文件版本为v4.7，使用时必须同样安装该版本的字体文件，如果安装的是其它版本可能会部分图标会无法正常显示。另外，如果遇到Axure中图标可以正常显示，但是在预览时却是乱码的现象，一般是由于修改了页面的样式里面的“字体系列”选项导致的。这个字体系列的选项默认的是Applied Font，请不要去修改它，否则会覆盖页面中所有的字体属性设置而导致字体图标失效。

相关补充说明

目前除了Fontawesome字体图标之外，还有Ionicons和Meatrial Design等其它字体图标，如果有兴趣可以自行百度了解。字体图标的使用方式基本都是类似的，都需要安装对应的字体文件，但是不同的字体图标类型是不能混用的，每个字体文件只对当前的图标类型有效哦。为什么我们推荐使用Fontawesome v4.7字体图标，因为用于显示它的Web字体CSS链接有稳定的CDN服务支持。

更多图标推荐

Fontawesome包含的图标类型基本满足原型设计的需要，为了便于大家进行查找和使用其中的图标，我们将Fontawesome v4.7的600+款全部图标整理并在下面列了出来，强烈建议你将本页面添加到收藏夹中。你还可以直接下载由小楼老师分享的Fontawesome v4.7图标元件库元件库使用，通过百度或加入网站的相关交流群通过群文件都能下载到。

参考网址：http://www.iconfont.cn