产品设计
FontAwesome v4.7 & v5.7.2字体图标方案.rplib

一套绝佳的矢量字体图标元件库

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。Font Awesome字体图标具有轻量和友好的特性,非常适合在Axure原型设计中进行应用,同时可以方便的实现按纽或元件的交互样式效果。FontAwesome v5 Pro版字体图标元件库包含40多个分类及5000+款常用图标。

图标类型说明

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

1、安装FontAwesome v5 Free版字体文件

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

首次使用FontAwesome v5 Free版字体图标需要在本机上安装字体文件,在字体图标专题页面下载【字体文件及元件库】文件包。解压缩后打开【font-awesome-free\otfs】,将目录内3个字体文件完成安装。Win系统双击字体文件就会提示安装,Mac系统安装字体方法请见下面的链接。字体安装完成后需要重新启动Axure,重启后选中字体时在字体列表中如果能看到【Fontawesome 5 Free】和【Fontawesome 5 Brands】,则代表字体已经安装成功。

Mac系统如何安装字体方法教程:点击查看

2、如何使用FontAwesome v5 Free字体图标

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

第二种使用方法,使用字体图标元件库。在【字体文件及元件库】文件包有提供的rplib格式的元件库文件,将元件库文件导入到Axure元件库中。使用时从元件库列表中找到需要的图标,直接拖入到编辑界面中就可以了。注意,如果元件库列表中图标未正常显示,请在安装字体文件后刷新元件库,或者将元件库卸载后重新载入,元件库的图标列表就可以正常显示了。

特别说明,Fontawesome 5 Free版的图标共分为Solid(实心图标)、Regular(常规图标)、Brand(品牌图标)三种类型。通过专题页面中的图标列表复制图标到Axure中时,需要在字体设置中选择对应的类型,否则图标在预览时将无法正常显示 。

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

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

如果我们已经在本机上安装了Fontawesome 5 Free字体文件,在预览原型文件时字体图标是可以正常的,但输出的原型在其它在未安装字体文件的电脑上演示时图标依然显示为乱码,只需要设置一下Web字体选项即可解决这个问题。在发布设置中Web字体选项中添加外部Web字体CSS链接,CSS链接地址可以通过字体专题页面中获取到。添加方式:发布—生成HTML文件—Web字体,勾选“包含Web字体”,点击加号图标,设置名称为【Font Awesome 5 Free】,将CSS链接地址添加到URL中,生成HTML文件即可。下面分别是Axure 8和9设置WEB字体选项的截图。

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

4、在Axure中使用字体图标设置交互效果

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

5、如何在未联网环境下演示时显示字体图标

如果输出的原型在未联网环境下进行演示,可以在发布设置中添加本地Web字体CSS链接,这种方法是使用相对路径调用的字体资源。在添加本地CSS链接前需要将【font-awesome-free】文件夹拷贝到【Axure安装目录\DefaultSettings\Prototype_Files\resources\】中,下面为拷贝完成后的截图。

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

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

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

 

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

FontAwesome字体图标的多个版本是可以在同一个Axure的原型文件中,但是建议不要将对应的图标和类型进行混用。例如我们在一个原型文件中同时使用了FontAwesome的v4.7、v5 Free、v5 Pro三个版本的字体图标,需要安装这个三个版本对应的字体文件,然后在发布设置的Web字体设置中设置对应名称和CSS链接。另外,v5 Pro版中已经包含了v5 Free版的全部图标,如果已经使用了v5 Pro版,建议不要再同时使用v5 Free版了。

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

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

首先应检查字体文件是否已经正确安装,或者安装的字体版本是否与使用的版本是否一致,目前我们的作品中使用到的字体图标有v4.7、v5 Free、v5 Pro三个版本,这三个版本是独立的,需要单独的安装和设置。另外,通过专题页面中的图标列表复制字体图标时,在Axure中需要设置对应的字体和图标类型,具体设置方式在第2点中有详细说明。如果在Axure 8中遇到编辑界面中图标可以正常显示,但是在预览时却是乱码的现象,可能是由于修改了页面的样式里面的“字体系列”选项导致的。这个选项默认的是【Applied Font】,请不要去修改它,否则会覆盖页面中所有的字体属性设置而导致字体图标失效。

FontAwesome v4.7 & v5.7.2字体图标方案.rplib

8、关于图标使用的补充说明

在下载的【字体文件及元件库】文件包中还单独提供了FontAwesome v5 Free全部图标的Svg格式,使用SVG格式图标不需要安装字体文件或设置WEB字体选项,直接将对应的图标文件拖入到Axure编辑界面中即可。SVG格式图标同样是矢量的,支持无限放大,同时在Axure中右击图标可转为化形状,然后可以修改它的颜色或其它样式。Fontawesome包含的图标类型基本满足原型设计的需要,如果在设计中需要更多的图标,可以查看网站的图标推荐,建议配合使用阿里的IconFont图标库,它提供的图标数量达到了数百万,网址:http://www.iconfont.cn

9、字体CSS链接

FontAwesome v4.7.0 CSS链接:https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css

FontAwesome v5.7.2 Free CSS链接:https://cdn.bootcdn.net/ajax/libs/font-awesome/5.7.2/css/all.css

FontAwesome Pro v5.7.2 CSS链接:https://cdn.jsdelivr.net/gh/zhaoshengblog/Picbed@master/all.min.css

相关书籍

手机移动端交互原型通用模板精简版.rp
包含各类手机设备模型及常用界面模板
View UI Axure Library 中后台元件库完整版
一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品
信息化精美简历模板精简版.rp
本作品提供免费下载
移动端交互原型元件库精简版.rp
本元件库是专属于移动端的Axure元件库,由常用组件、信息输入、信息输出、信息反馈、综合系列等五大元件类型组成
QQ小程序sketch组件库
QQ小程序是连接年轻用户的新方式,覆盖8亿新生代活跃网民。轻便快捷的开发模式,还能在QQ内被轻松获取和传播
Axure数据可视化原型设计
如果你正在使用 Axure 进行数据可视化原型设计,可以来试试 js 解决方案,可以让你像 PPT 内方便地编辑和设计图表~

暂无评论

暂无评论...