Axure 图标解决方案_html/css_WEB-ITnose

部件库的方式

       常用的方法就是采用网络上分享出来的部件库，比较全的就是小楼老师的部件库。

       但是这种部件库的ICON一般都是图片，当颜色与当前原型色调不一样的时候，就不能用了。而且ICON常常表示状态，不同的状态需要不同的颜色，用图片做原型ICON就不合适了。

字体CION方式

        后来发现了一个神器，字体icon，每个icon其实就是一个文字，文字更改颜色和大小非常方便。

字体名称：FontAwesome

FontAwesome字体下载链接：http://yunpan.cn/cytakifcnYz6j（提取码：fa4d）

FontAwesome字体部件库：http://yunpan.cn/cyXw7JszvyPmh（提取码：53db）

1.字体安装

      a.下载完字体之后，解压缩文件，选择font文件夹

      b.双击字体文件，进入字体安装页面

      c.在页面中确认安装

      d.安装成功后，你就可以在你的Axure字体选择就可以看到FontAwesome了、

2.载入字体库

         但是在使用的时候，却发现并不知道怎么用。我怎么打出这样一个个图标呢？这个时候你可以选择到FontAwesome官网上一个个找，找到后复制黏贴就可以了。但是效率低。这个时候，我们将字体一个个拆分，做成部件，使用就很方便了。字体部件库下载链接见上图。下面来说安装方式

      a.载入部件库，在Axure中选择【载入元件库】

      b.找到你下载的rplib文件，进行安装

       c.使用时，选择全部/FontAwesome部件库

      d.直接使用，然后你就可以直接使用了，自由更改字体大小，颜色等

3.生成原型之后，链接CSS样式

      完成原型制作之后，然后就是给别人看了，由于我们使用了特殊的FontAwesome字体，就需要告知网页加载这个字体样式。

      a.在Axure发布页面，修改配件文件

      b.选择默认的HTML样式

      c.在web字体中，新增一个web字体的css样式

链接地址  http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

4.这样我们的FontAwesome就可以正常使用了