如何快速引用逐浪CMS官方发布的的ZICO图标库

时间 2020-09-14

标签如何快速引用 cms 官方发布 zico 图标栏目 CMS 繁體版

原文原文链接

随着对版权的要求不断提升，都想拥有自主研发的东西可随手拿来就用。不论是在字体，仍是在图片上，很多平台都为版权问题费尽心事，字体版权用到的不少纠纷问题如方正，说起你们都熟悉；图片版权更是近两年比较热的事情，因图片版权问题你们都认识了视觉中国。随之版权意识高的公司都在作自有知识产权的研发储备。css

ICO是什么？html

ICO是Windows的图标文件格式，实际上是ico file的缩写形式，它是基于windows开发的图标文件格式。图标文件能够存储单个图案、多尺寸、多色板的图标文件。一个图标其实是多张不一样格式的图片的集合体，而且还包含了必定的透明区域。node

如今ICO的应用范围普遍，使用方法也多，逐浪CMS为此专门开发了ico图标库供开发者使用，一个专为中国开发者而生的跨平台图标解决方案，同时基于zico技术能够快速渲染webfont或svg矢量图标，并提供免费的网页字体技术。web

zio是一个很是优秀的webfont与svg图标展现系统，它的目标是让全栈开发者与用户能够自由的任何页面引用矢量级的图标。小程序

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

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

逐浪CMS开发的图标库的引用方法有多种，接下来咱们详细看下:sass

第一种：桌面引用：尽情的在windows、Mac OS、Linux等电脑环境中使用zico矢量全真图标集

下载zio图标集，选择其中“电脑版”安装后，拷贝下面符号到电脑软件中(如Photoshop、 Illustrator、CorelDraw、Word等)，选择字体为“逐浪矢量全真图标"或“ZoomlaIco-A050"便可生效。微信

下载好的文件，点击安装便可，安装好的文件在各类应用软件中均可用。svg

上图下面三个图标是直接引用的ZoomlaIco-A050即为：逐浪矢量全真图标

第二种：直接SVG引用快速又简单

选择点击你须要用的图标，进入图标详情页，

点击获取SVG引用代码，直接一键复制，方便快捷，颜色也可自定义选择。

第三种：基于scss/sass混合的引用：对一个图标快速自定义颜色，方法就是：`<i class="zi zi_baseballball" zico="棒球" style="color: red"></i>`

自由混合

zico提供了基于scss/sass的混合器，其scss源码与map文件均已经全面开放，你能够下载在在scss文件夹中得到。
下载zico后，您就能进行混合，目录结构以下所示：

混合配置

为了更好的支持中文环境，咱们的scss有可能采用了中文变量，因此您可能要选择正确的编译软件，其中微软的visual code、adobe的Dreamver cc 2017以及更高版本均能较好的混合。
`
如下是咱们的推荐的混合配置：

扩展

因为遵循开放协议，因此你经过混合，能够将zico彻底集成在你的系统中1。
[1] 若是你还不熟悉scss/sass混合，能够浏览这里

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网code.z01.com

快速精简

有时可能须要对CSS文件进行精简，从而提高访问速度。
一般经典的理论认为，网页通常速度为3秒，超过5秒就是不可接受的。
因此开发者们常是想尽办法去简化请求的效率。

若是你是采用css引用，则能够经过删除或注释zico.css文件的前两行来简化。
可简化的两行代码是：

@import url(zico_tm.min.css);
@import url(zico_gov.min.css);

`
简化了这两行后，则带来的问题是：

不能调用品牌库
不能调用政务特点库对于大多数用户来讲，这两类库不是必须的，因此是能够精简的。

自由精简

你也能够根据须要进行精简，删除没必要要的代码，尤为是根据咱们提供的Scss/sass混合器来处理，其网址：

基于scss/sass混合的介绍_zicoico.z01.com

第四种：基于JS输出SVG图标的方法引用：组合应用更加方便：`<span class="zi_group zi_2x"><i class="zi zi_squareLine zi_group2x"></i>` `<i class="zi zi_digg zi_group1x"></i></span>`

一行JS文件引用

若是你要采用zico的svg输出，只要引用一行JS就能够了。
你能够下载zico文件包，将js文件拷到程序目录中（推荐）。
也能够经过云端读取咱们的远程zico文件，其地址是：
http://ico.z01.com/zico.min.js

引入行，就能够自由的调用图标了，写做html标签时，仍是同样的引用，其方法如：<i class=”zi zi_user>`

咱们这里提供了一个svg输出实例页面：
http://ico.z01.com/svg.shtml

和原生CSS调用相同的显示方法

全部的使用习惯和css调用相同，没有任何不一样，以确保你的习惯获得尊重。

第五种：CDN引用

若是你不想下载和安装，也能够直接CDN引用，只要在网页和应用中中置入zico的CDN源地址便可，其URL请求源为： http://ico.z01.com/zico.min.css 这个网址同时支持SSL，你也能够采用 https://ico.z01.com/zico.min.css 以及SSL自响应模式： //http://ico.z01.com/zico.min.css 都是合法的。

更多可访问逐浪图标库官方，引用方法多，使用简单。