FontAwesome v5 Pro版字体图标使用说明

本使用说明主要基于v5 Pro版本

Copyright © www.AxureUX.com, All Rights Reserved.

助你快速打造友好美观的交互原型

1

安装FontAwesome v5 Pro版字体文件

首次使用FontAwesome v5 Pro版字体图标需要在本机上安装字体文件，获取【Fontawesome v5 Pro版元件库】文件包后解压打开【font-awesome-pro\otfs】，将目录内4个字体文件完成安装。Win系统双击字体文件就会提示安装，Mac系统安装字体方法请自行百度。字体安装完成后需要重新启动Axure，重启后选中字体时在字体列表中如果能看到【Fontawesome 5 Pro】和【Fontawesome 5 Brands】，则代表字体已经安装成功。

2

使用FontAwesome v5 Pro版字体图标

第一种使用方法，使用字体图标元件库。在【Fontawesome v5 Pro版元件库】文件包有提供的rplib格式的元件库文件，将元件库文件导入到Axure元件库中。使用时从元件库列表中找到需要的图标，直接拖入到编辑界面中就可以了。

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

特别说明，Fontawesome 5 Pro版的图标共分为Solid（实心图标）、Regular（常规图标）、Light（简约图标）、Brand（品牌图标）四种类型。通过专题页面的图标列表复制图标到Axure中时，如果复制的是Solid、Regular、Light三种类型的图标，字体需要设置为Fontawesome 5 Pro，而这三种类型的字体图标是可以共用的，通过切换字体选项中的对应类型，图标也会按照它的类型样式显示。另外，如果复制Brand类型的图标到Axure中时，字体需要设置为Fontawesome 5 Brands。

3

Axure中使用字体图标设置常见交互效果

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

4

如何在未安装字体的设备上显示字体图标

如果我们已经在本机上安装了Fontawesome字体文件，在预览原型文件时字体图标都可以正常显示。而如果输出的原型在其它在未安装字体文件的电脑上演示时，图标显示为乱码该如何处理？

第一种方法，在发布设置中Web字体选项中添加外部Web字体CSS链接，CSS链接地址可以通过【Fontawesome v5 Pro版元件库】中的介绍信息中查看到。添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【Font Awesome 5 Pro】，将CSS链接地址添加到URL中，生成HTML文件即可。

第二种方法，在发布设置中的Web字体选项中添加本地Web字体CSS链接，这种方法是使用相对路径调用的字体资源，所以即使在未联网状态下图标也能正常显示。在添加本地CSS链接前需要将【Fontawesome v5 Pro版元件库】中的【font-awesome-pro】文件夹拷贝到【Axure安装目录\DefaultSettings\Prototype_Files\resources\】中，下面为拷贝完成后的截图。

完成拷贝后再添加CSS链接，添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【Font Awesome 5 Pro】，CSS链接地址设置为【resources/font-awesome-pro/css/all.css】，生成HTML文件即可。

从列表中复制Solid类型到Axure中后，字体需要设置为Font Awesome 5 Pro，字体类型选择：Solid

复制Regular类型图标到Axure中后，字体需要设置为Font Awesome 5 Pro，字体类型选择：Regular

从列表中复制Light类型到Axure中后，字体需要设置为Font Awesome 5 Pro，字体类型选择：Light

从列表中复制Brand类型图标到Axure中后，字体需要设置为Font Awesome 5 Brands

5

一个文件同时使用多个FontAwesome版本

FontAwesome字体图标的多个版本是可以在同一个Axure的原型文件中，使用时需要同时安装每个版本对应的字体文件或设置对应的WEB字体选项。例如我们在一个原型文件中同时使用了FontAwesome的v4.7、v5 Free、v5 Pro三个版本的字体图标，需要先安装这个三个版本对应的字体文件，然后在发布设置的Web字体设置中设置对应名称和CSS链接，v4.7设置名称为【FontAwesome】， v5 Free设置名称为【FontAwesome 5 Fee】，v5 Pro设置名称为【FontAwesome 5 Pro】，对应的CSS链接以对应专题页面中提供的CSS链接为准。

关于多版本设置主要用于解决在同一个原型文件使用了旧的v4.7版，同时又在这个文件使用新的v5 Free或v5 Pro版的情况。由于以前的文件使用的都是4.7版，如果开始使用新的v5版本，必定会有一个过渡期。不过，FontAwesome的版本是向下兼容的，如果你创建的是一个新的Axure文件并开始使用v5版本，建议不要再同时使用旧版本了。另外，v5 Pro版中已经包含了v5 Free版的全部图标，如果已经使用了v5 Pro版，建议不要再同时使用v5 Free版了。

在一个原型文件中同时使用了FontAwesome的v4.7、v5 Free、v5 Pro三个版本的字体图标，需要先安装这个三个版本对应的字体文件，然后在发布设置的Web字体设置中设置对应名称和CSS链接。上面标识中1\2\3分别对应为v4.7、v5 Free、v5 Pro三个版本的名称和CSS链接。

6

字体图标无法正常显示问题说明

首先应检查字体文件是否已经正确安装，或者安装的字体版本是否与使用的图标的版本是否一致。使用FontAwesome v5 Pro版字体图标请根据第1点中的说明安装Pro版字体文件，用于添加外部Web字体CSS链接以【Fontawesome v5 Pro版元件库】文件包中说明信息内提供的链接为准。通过Pro版专题页面中的图标列表复制字体图标时，在Axure中需要设置对应的字体和图标类型，具体设置方式在第2点中有详细说明。

如果遇到Axure中图标可以正常显示，但是在预览时却是乱码的现象，一般是由于修改了页面的样式里面的“字体系列”选项导致的。这个字体系列的选项默认的是【Applied Font】，请不要去修改它，否则会覆盖页面中所有的字体属性设置而导致字体图标失效。

7

关于图标使用的补充说明

在下载的【Fontawesome v5 Pro版元件库】文件包中还单独提供了v5 Pro版全部图标的Svg格式，使用SVG格式图标不需要安装字体文件或设置WEB字体选项，直接将对应的图标文件拖入到Axure编辑界面中即可。SVG格式图标同样是矢量的，支持无限放大，同时在Axure中右击图标可转为化形状，然后可以修改它的颜色或其它样式。

Fontawesome包含的图标类型基本满足原型设计的需要，如果在设计中需要更多的图标，可以查看网站的图标推荐，建议配合使用阿里的IconFont图标库，它提供的图标数量达到了数百万，网址：http://www.iconfont.cn

字体安装完成后重启Axure，在字体列表中能看到这两个字体名称，代表安装成功

 微信公众号

 网站交流群

 了解平台

 帮助手册

 业务咨询

专业的交互原型素材原创分享平台

 返回上页