Axure使用图标字体（icon font）

什么是图标字体？

图标字体就是在做手机APP或WEB项目时为了能方便控制图标的大小、颜色等属性而将图标字体化

图标字体的优点

• 轻量性：图标字体相比于纯图片占用的空间要小，加载的速度快
• 灵活性：图标字体可以通过设置字体大小、颜色等方便地改变图标的大小和颜色，不需要频繁的更换图片
• 资源丰富：网上有很多免费的图标字体库，提供的图标十分丰富，能够满足我们绝大多数的开发需求

在线的图标字体库

• Font Awesome：为Bootstrap而生，应该是最广为人知的图标库，最新4.7版下载
  

  

  font-awesome.png

• IcoMoon：提供了很多icon packes可以选择性下载
  

  

  icomoon.png

• 阿里巴巴矢量图标库：阿里出品，海量图标，随意选择和下载
  

  

  iconfont.png

Axure使用图标字体

在Axure使用图标字体，避免了我们使用纯图片带来的一系列问题：如想改变图片颜色，需要重新导入新的图片；想改变大小可能会导致图片失真等

Axure中使用步骤（以Font Awesome为例）：

1. 首先下载Font Awesome下载

2. 双击安装解压后的fonts文件夹下的fontawesome-webfont.ttf字体文件

   
   
   

   install_fonts.png
3. 安装完成，如果此时Axure打开，需要重启Axure，载入新的FontAwesome字体
4. 借助word将Font Awesome的矢量图片复制到Axure

• word中点击插入->符号->其它符号

• 字体选择FontAwesome（安装完字体文件word中就有了该字体）

  
  
  

  word_fonts.png
• 插入到word中然后复制到Axure中

• 出现以下状况，请选择FontAwesome字体

  
  
  

  axure_no_show.png

• 正常显示如下，可随意更改大小及颜色

  
  
  

  axure_show.png

生成Html文件

我们在Axure中做完后，一般会生成Html以供他人阅览，而这时他人的电脑上没有安装指定的字体就会出现图标不显示的问题

解决方法

1. 引入在线的css文件：一般的在线图标库有会提供css文件的cdn网络地址，我们需要将url引入到Axure中

• 在Axure中使用CTRL+F5或点击Publish->Preview Options打开选项框
• 然后点击Configuration，选择WebFonts项，新增一个webfont，名称为FontAwesome，url为css文件的cdn地址http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css， 如下图所示：
  
  

  online_css.png
• 然后生成的Html文件中就会引入该css，在任何联网的电脑上都能正常显示图标

2. 1中的方法需要联网才能正常显示图标，如果我们想本地化，我们需要另行配置

• 按1中方法打开web fonts配置项，将url修改为本地资源所在位置，如下图所示：

  
  
  

  local_css.png

• Axure生成的Html结构如下图所示，css等资源文件都在resources文件夹下：

  
  
  

  html_structure.png
• 所以我们要将下载的FontAwesome中的css文件，和fonts文件都拷贝到该文件夹下，以和我们上面配置的css文件路径相符
• 注意css文件和fonts文件的相对路径

几点说明

1. 我们在Axure中的配置主要是为了生成Html文件后能载入css文件并能正常显示图标
2. 一定要将css文件和fonts文件都拷贝到生成的Html文件中，没有fonts文件仍然不能显示
3. 使用其他的图标字体和FontAwesome的使用方法一致