需求背景

在原型设计中，图标是我们使用率非常高的元素，通常我们会选择将图标导出为图片放到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

如何在Axure中使用Iconfont图标字体相关推荐

如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
如何在openlayers中使用iconfont或font Awesome字体图标
目录前言 1.准备工作 2.新建一个最简单的helloworld页面 3.看看效果 4.注意点1-需使用Unicode写法 4.注意点2-需注意iconfott.woff2的请求顺序 5.特殊图标的 ...
ios label 高度紫石英_iOS中iconfont(图标字体)的基本使用
前言近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
eclipse里source的快捷方法_教你如何在Linux中设置快捷方式图标
这篇文章主要给大家介绍了关于如何在Linux中设置快捷方式图标的相关资料,文中通过示例代码的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧前言 Linux系统 ...
如何在WordPress中添加FontAwesome图标
毋庸置疑,人类是非常视觉化的生物.因此,我们不仅关注内容,也关注网站的视觉设计.传统上,世界各地的网页设计师和开发人员使用图像和图像精灵,在任何网站上包括图标.然后,这些图标被用作整个网站的视觉增强, ...
产品小白如何在Axure中从无到有创建原型
如何在Axure中从无到有创建原型呢?一般你是怎么做的呢?这里结合一位学员的学习过程,一起来看看. 先说一下做的内容是什么.这个产品是一个P2P网贷类的产品,有多种贷款模式,在选择其中的一种模式之后, ...

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