如何在Axure中使用Iconfont图标字体

需求背景

在原型设计中，图标是我们使用率非常高的元素，通常我们会选择将图标导出为图片放到Axure里使用，或者使用Axure的图标元件库，但是他们使用起来会有很多不方便的地方：

• 图片进行缩放会失真，无法设置复杂的交互样式，例如改变颜色

• 元件库的图标和文本一起使用时无法和文本一起改变交互样式，并且只能选择有限的图标

• 
  

解决方案

上述问题可以通过图标字体得到很好的解决，图标字体作为一种字体可以将图标和其它文本作为一个整体使用，并且可以灵活的设置各种样式。

使用方法

安装图标字体

从IconFont下在字体包并安装图标字体。我在IconFont中创建了一个图表集合项目库，直接下载这个项目

从下载的文件中找到 iconfont.ttf 这个文件，安装这个字体文件

引用图标

在Axure中是无法直接输入图标文字的，这里借助Word的 插入-符号 功能，选择IconFont字体，将图标转化成文本

 

将Word中的图标文本复制到Axure中使用，将字体选择为Iconfont，就可以和其它文本一起使用了

将图标分解创建为图标元件库

为了图标的取用方便，可以将所有图标统一转换为文字后在Axure中创建为元件库，随取随用

配置Web字体

这时我们就可以在页面中看到这些字体图标了，但是由于我们本机安装了字体可以看到，如果在没有安装字体的电脑上打开文件看到的字体图标都会变成方块，这时候我们可以通过配置Web字体的方式，让所有联网的机器都可以正常看到这些字体图标。

从我们的在线图标库中复制图标库链接

Axure中配置Web字体

当不能联网使用在线Web字体时，将下载好的字体包放到生成的HTML文件夹中，将引用地址改为本地地址即可

结语

本文使用的IconFont字体只是一个在Axure中使用在线图标库的示例，其它在线图标库（例如）也可以通过类似的方法在Axure中使用。

另外，使用图标字体后，支持动态更新，图标有更新时只需要更新字体包，相应的图标可以自行更新。

转自：https://www.zcool.com.cn/article/ZODU4MjA0.html