一、点阵图片图标

这是用得最多的,网上下载的组件库大多属于此类,缺点是图片放大会模糊,在Axure中无法更改颜色。如果想要不同颜色,比如白灰黑,只好分别做一套。

二、字符图标

字符图标的本质就是文本,具有与文本一样的属性,可以通过字号改变大小,任意放大不失真,还可以改成任意颜色,甚至可以加粗。

1.首先比较通用的是unicode编码定义的图标,比如: ☺, ♫ , ★、 ❤、 ✈…更多在这,http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html
直接复制粘贴即可使用。

2.如果嫌少,还可以用FontAwesone 字体,有旧版3.2.1和新版4.3.0,旧版有361个图标并兼容ie7,新版有519个图标但不支持ie7了。

171104_225039

我用的是旧版,方法如下:

  1. 首先下载FontAwesone 字体,并安装到电脑上;
  2. 在axure中载入部件库;
    这样就能在自己的电脑上使用了,但是导出到html文件发给别人时,因为别人的电脑没有装字体,所以会显示不了:

171104_225303

可以在发布时在web字体处直接加字体链接,跟下面链接的教程一样,会通过网站调用字体,问题是需要电脑连上网才能显示。

字体下载及详细教程:http://www.woshipm.com/rp/130956.html

于是自己研究了下,把字体直接拷进文件夹中就能离线使用,字体文件也小,只有113.7KB。

方法如下:

在web字体中选@font-face

171104_225335

填写如下:

font-family: FontAwesome; 
src: url('fontawesome-webfont.eot');   /* IE9 Compat Modes */   
src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        
url('fontawesome-webfont.ttf') format('truetype’);   /* Safari, Android, iOS */   

生成后记得把字体文件FontAwesome.otf、fontawesome-webfont.ttf拷入根目录,即index.html所在目录,如图:

171104_225340

然后就可以发给别人看了,经测试,ie7、8,firefox、ios中都能正常显示。

三 矢量图标

从网上下载的一个axure文档,发现里面的图标明明是image属性,却可以放大不失真,猜测应该是矢量图,但不知怎么实现的,这个未解之谜希望有高人能指点一下。