阿里巴巴矢量图标库在网页设计中的应用

【摘要】当今众多的Web前端设计都采用了阿里巴巴矢量图标库来制作网页中的小图标，图标库是开放的，可以在线或下载使用。而这一技术在很多《网页设计》教材中未曾提及，本文就来介绍一下阿里巴巴矢量图标库的使用方法，作为对《网页设计》课程教学内容的一个补充。

【关键词】矢量图标；web前端；网页设计

1引言

阿里巴巴公司推出的Webfont形式的矢量图标库网站，其中涵盖了1006860多个常用图标并且还在持续更新中。Iconfont平台为用户提供图标分捡下载、矢量格式转换、在线图标搜索、在线储存、个人图标库管理及项目图标管理等基础功能。网页中引入的图标是作为字体形式插入，可以自由修改颜色，自由变换大小，也可以添加透明度、阴影、旋转等视觉效果，并且在布局方面也非常方便。

2矢量图标的下载

进入官方网站后，在搜索框中输入搜索关键字进行搜索，比如输入：“鱼”，就会出现代表“鱼”的图标，这个图标会有很多，有黑白色的也有彩色的，我们都可以选择使用。当我们需要下载多个小图标时，可将选好的图标统一加入购物车，加入好购物车以后点击下载代码即可，此时需要我们登录。网站提供了3种登录方式，其中阿里域帐号是内部管理帐号，可以使用新浪微博帐号和Gthub帐号登录。

3unicode方式调用矢量图标

按照下载文件中demo_unicode.html页面内容的提示进行调用。例如调用美女和鱼图标（图1），我们书写的HTML代码是：<iclass="iconfontmeinv">&#xe605;</i><br/><iclass="iconfont">&#xe6b4;</i>调用后，运行结果如图2给class为meinv的图标书写以下样式，运行后效果如图3.meinv{font-size:100px;font-style:italic;color:orange;border:1pxsolidblue;unicode是字体在网页端最原始的应用方式，它的特点是兼容所有的浏览器，支持ie6+；支持按字体的方式去动态调整图标大小，颜色等等；不支持多色图标。

4fontclass方式调用矢量图标

按照下载文件中demo_fontclass.html页面内容的提示进行调用。例如调用购物车和鱼图标（图4），我们书写的HTML代码是：<iclass="iconfonticon-gouwuche"></i><br/><iclass="iconfonticon-yu2"></i>调用后font-class是unicode使用方式的一种变种，主要是解决u－nicode书写不直观，语意不明确的问题。与unicode使用方式相比，具有如下特点：兼容性良好，支持ie8+，及所有现代浏览器。相比于uni－code语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。

5symbol方式调用矢量图标

按照下载文件中demo_symbol.html页面内容的提示进行调用。例如调用购物车和鱼图标（图6），我们书写的HTML代码是：<svgclass="icon"aria-hidden="true""><usexlink:href="http://#icon-gouwuche"></use></svg><svgclass="icon"aria-hidden="true""><usexlink:href="http://#icon-yu"></use></svg>调用后，运行结果如图7，如果需要增加样式，则样式代码作用在<svg></svg>标签上。symbol是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。兼容性较差，支持ie9+,及现代浏览器。浏览器渲染svg的性能一般，还不如png。总结：虽然现在有了iconfont资源库，但它还不是万能的，毕竟它不能100%满足我们的需求，有时候我们需要一些特别icon图标，就需要我们自己制作了。目前我们在Web前端工作中最需要了解的是svg格式的图标，一些门户网站已经开始运用到了这个技术。同时通过文本的介绍，希望将此技术加入到《网页设计》授课内容中。

参考文献：

［1］吴恩华;图形处理器用于通用计算的技术、现状及其挑战［J］;软件学报;2004年10期

［2］黄晶慧;颜色与点图标方法的可视化［J］;《电脑知识与技术》;2015(1):153-156

作者:李可 单位:宁波职业技术学院