简介
zio是一个非常优秀的webfont与svg图标展示系统，它的目标是让全栈开发者与用户可以自由的任何页面引用矢量级的图标。
随着计算机软件技术的进步，人们无论是在开发传统客户端软件、移动APP软件、微信公众号、微信小程序、Facebokk内页，或从事web网站系统的开发，都需要用到图标。
可以说，一个UI交互界面，除了颜色、字体之外，最重要的就是图标系统了，一个好的图标可以让人们对界面(应用)一目了然，并提升业务能力。
获得zico程序包
zico是免费开源的，我们提供了多种便利的安装使用方法
- 载离线程序包
你可以点击这里下载最新官方发布程序包zico官方程序包
我们会不断更新此程序包，以保证其是最新更新，而且它是一个袖珍文件，很快就能下载完成。
下载后，解压开即可使用。 - 通过Npm安装
全球流行的Npm安装方式自然是非常简单了，其命令是：npm i zico
这需要你的系统安装了nodeJS，这有一个快速教程： - 通过Github安装
我们还在全球最大的源码开放平台Github上发布,zio源码仓库的访问地址是https://github.com/zoomla/zico - 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图标。
如下图所示：
接下来，我们将引导讲解一系列深度的应用技巧，其中包括：
- 在微信开发中引用zico
- 美化zico
- 赋予zio动作
- 一些优秀的应用技巧
欢迎您继续浏览。
CSS引用展示：
分步加载.zi_load：
无缝旋转.zi_spin：
卡壳式8步旋转.zi_pulse：
固定宽度列表：
zi_glass
zi_jiubi
zi_jb
带边框定义：
旋转90度、180度、270度：
标准图标：
水平投影：
垂直投影：
默认组合使用：
反转颜色组合使用：
自定颜色组合使用：
酒杯:
zi_glass
zi_jiubi
zi_jb
音乐：
zi_music
zi_yinyue
zi_yy
搜索：
zi_search
zi_sousuo
zi_ss
一键复制
编辑
Web IDE
原始数据
按行查看
历史
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
