简介

zio是一个非常优秀的webfont与svg图标展示系统，它的目标是让全栈开发者与用户可以自由的任何页面引用矢量级的图标。

随着计算机软件技术的进步，人们无论是在开发传统客户端软件、移动APP软件、微信公众号、微信小程序、Facebokk内页，或从事web网站系统的开发，都需要用到图标。

可以说，一个UI交互界面，除了颜色、字体之外，最重要的就是图标系统了，一个好的图标可以让人们对界面（应用）一目了然，并提升业务能力。

获得zico程序包

zico是免费开源的，我们提供了多种便利的安装使用方法

1. 载离线程序包
   你可以点击这里下载最新官方发布程序包
   zico官方程序包
   我们会不断更新此程序包，以保证其是最新更新，而且它是一个袖珍文件，很快就能下载完成。
   下载后，解压开即可使用。
2. 通过Npm安装
   全球流行的Npm安装方式自然是非常简单了，其命令是：
   npm i zico
   这需要你的系统安装了nodeJS，这有一个快速教程：
3. 通过Github安装
   我们还在全球最大的源码开放平台Github上发布,zio源码仓库的访问地址是
   https://github.com/zoomla/zico
4. CDN引用
   如果你不想下载和安装，也可以直接CDN引用，只要在网页和应用中中置入zico的CDN源地址即可，其URL请求源为：
   http://code.z01.com/zico.min.css
   这个网址同时支持SSL，你也可以采用
   https://code.z01.com/zico.min.css
   以及自便应模式
   //code.z01.com/zico.min.css
   都是合法的。

引用文件

由于zio可以在多种场合（如网页开发、app、小程序、客户端、传统设计）中引用，所以不同的软件引用方法各不相同，这里仅以在网页上引用为例，其引用规范为：
<link rel="stylesheet" href="css/zico.min.css" >
注意上面文件的路径真实可在，其完整源码结构应该如下图所示：

• —css/
  —fonts/

在任何你要引用图标的web(移动页面)应用图标

推荐的引用方法是：
<i class="zi zi_music"></i>

当然，你也可以使用其它任意你想要的用的标签，如：
<span class="zi zi_music"></span>
<div class="zi zi_music"></div>
<p class="zi zi_music"></p>
<a href="#" class="zi zi_music"></a>
上面的方法都是完全适用，而且同样可以输出结果的，是不是很方便^_^

如果你是一个高级web开发者，熟悉Emmet语法，还可以直接用简写的方式，即
.zi.zi_music
形式展开，就能完成快速的应用zico图标。
如下图所示：

接下来，我们将引导讲解一系列深度的应用技巧，其中包括：

1. 在微信开发中引用zico
2. 美化zico
3. 赋予zio动作
4. 一些优秀的应用技巧

欢迎您继续浏览。