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

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

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

1引言

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

2矢量图标的下载

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

3unicode方式调用矢量图标

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

4fontclass方式调用矢量图标

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

5symbol方式调用矢量图标

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

参考文献：

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

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

李可 宁波职业技术学院

 环境设计论文   实验设计论文   电路设计论文   造型设计论文   优化设计论文 室内设计论文   网页设计论文   平面设计论文   环境艺术设计论文   服装设计论文 广告设计论文   招贴设计论文   园林设计论文   园林景观设计论文   建筑设计论文 景观设计论文   字体设计论文   空间设计论文   方案设计论文   家具设计论文 网站设计论文   工程设计论文   系统设计论文   设计管理论文   路面设计论文 照明设计论文   环保设计论文   程序设计论文   结构设计论文   产品设计论文