zico
Version:
A web icon framework by Zoomla!CMS team,一个专为中国开发者而生的跨平台图标解决方案|基于zico技术可快速渲染webfont或svg矢量图标,并提供免费的网页字体,由知名的Zoomla!逐浪CMS团队维护
228 lines (198 loc) • 11.4 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="ZoomlaCMS-www.z01.com">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>zico-基于JS输出SVG</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--只要引入一行JS就可以输出zico的SVG图标-->
<script src="js/zico.min.js" ></script>
<!--以下是网页框架-与zico的svg输出无关-->
<link rel="stylesheet" href="lib/bootstrap4.min.css" >
<script src="lib/jquery-3.2.1.min.js" ></script>
<script src="lib/popper.min.js"></script>
<script src="lib/bootstrap4.min.js" ></script>
<link href="lib/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center bg-warning">
<h1><a href="index.html"><i class="zi zi_home"></i></a> zico 逐浪优秀图标集<small class="text-muted">SVG图标输出引用</small></h1>
</div>
<main class="container">
你只要引用<code><script src="js/zico.js" ></script></code>就能输出svg形式的icon图标，而且网页写作模式没有任何不同，比如<code><i class="zi zi_user"></i></code>,下面是一些例子示意。
</main>
<div class="container">
<i class="zi zi_user"></i> 我的中国心，我的中国ICON图标集，所有的图标与HTML元素完美的结合，并有<i class="zi zi_govRoundFlag zi_6x"></i>等中国元素。
<hr>
<h1>图标体系</h1>
标准图：
<i class="zi zi_user"></i>
<i class="zi zi_menu"></i>
<i class="zi zi_user"></i>
<hr>
90度旋转：
<i class="zi zi_user zi_rotate90"></i><br/>
180度旋转：
<i class="zi zi_user zi_rotate180"></i><br/>
270度旋转：
<i class="zi zi_user zi_rotate270"></i><br/>
<hr>
水平投影:
<i class="zi zi_filePic zi_flipLevel"></i>
<hr>
垂直投影（翻转）
<i class="zi zi_filePic zi_flipVertical"></i>
</div>
<hr>
12种规格
<i class="zi zi_user zi_1x"></i>
<i class="zi zi_user zi_2x"></i>
<i class="zi zi_user zi_3x"></i>
<i class="zi zi_user zi_4x"></i>
<i class="zi zi_user zi_5x"></i>
<i class="zi zi_user zi_6x"></i>
<i class="zi zi_user zi_7x"></i>
<i class="zi zi_user zi_8x"></i>
<i class="zi zi_user zi_9x"></i>
<i class="zi zi_user zi_10x"></i>
<i class="zi zi_user zi_11x"></i>
<i class="zi zi_user zi_12x"></i>
<i class="zi zi_crow zi_10x"></i>
<i class="zi zi_tmWeihaifb"></i>
<i class="zi zi_tmYoutube"></i>
<hr>
动作：
<p>
<i class="zi zi_checkcircle zi_spin" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_pulse" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_load" zico="圆打勾"></i>
</p>
<section class="icoColor">
<div class="container">
<h3>自由定义你的颜色于展现</h3>
<span>极其便利的定义图标颜色 --></span>
<code><i class="zi zi_baseballball" zico="棒球" style="color: red"></i></code>
<p>
<i class="zi zi_baseballball" zico="棒球" style="color: red"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:beige"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:aqua"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:blue"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:OrangeRed"></i>
<i class="zi zi_baseballball" zico="棒球" style="color: Magenta"></i>
<i class="zi zi_baseballball" zico="棒球" style="color: DarkGreen"></i>
</p>
</div>
</section>
<section class="zico_list_case">
<div class="container">
<strong>丰富的动作</strong>
<span>旋转、风车、渐入等各类动作</span>
<div class="zico_list_case_d">
<i class="zi zi_globe zi_spin" zico="地球"></i>
<i class="zi zi_Pisces zi_pulse" zico="双鱼"></i>
<i class="zi zi_fire zi_load" zico="火苗"></i>
</div>
</div>
</section>
<div class="container">
固定宽度列表：<br>
<i class="zi zi_glass zi_w1"></i>zi_w1+++zi_glass<br>
<i class="zi zi_glass zi_w2"></i>zi_w2+++zi_glass<br>
<i class="zi zi_glass zi_w3"></i>zi_w3+++zi_glass<br>
<i class="zi zi_glass zi_w4"></i>zi_w4+++zi_glass<br>
<i class="zi zi_glass zi_w5"></i>zi_w5+++zi_glass<br>
<i class="zi zi_glass zi_w6"></i>zi_w6+++zi_glass<br>
<i class="zi zi_glass zi_w7"></i>zi_w7+++zi_glass<br>
<i class="zi zi_glass zi_w8"></i>zi_w8+++zi_glass<br>
带边框定义：<br>
<i class="zi zi_pathUp zi_border"></i><br><br>
旋转90度、180度、270度：<br>
<i class="zi zi_anchor zi_rotate90"></i>
<i class="zi zi_anchor zi_rotate180"></i>
<i class="zi zi_anchor zi_rotate270"></i><br><br>
标准图标：<i class="zi zi_bomb "></i><br>
水平投影：<i class="zi zi_bomb zi_flipLevel"></i><br>
垂直投影：<i class="zi zi_bomb zi_flipVertical"></i><br><br>
<hr>
默认组合使用：
<span class="zi_group zi_2x">
<i class="zi zi_squareLine zi_group2x"></i>
<i class="zi zi_digg zi_group1x"></i>
</span>
<br><br>
反转颜色组合使用：
<span class="zi_group zi_2x">
<i class="zi zi_circle zi_group2x"></i>
<i class="zi zi_digg zi_group1x zi_inverse"></i>
</span>
<br><br>
自定颜色组合使用：
<span class="zi_group zi_2x">
<i class="zi zi_squareLine zi_group2x"></i>
<i class="zi zi_digg zi_group1x" style="color:Tomato"></i>
</span>
<br><br>
<div style="font-size:19rem;border:1px solid #ccc">
<i class="zi zi_user"></i>
</div>
<div class="zi zi_glass"></div>
<br>
<br>
<br>
<br>
<br>
<i class="zi zi_user"></i>
<i class="zi zi_user"></i>
<i class="zi zi_user"></i>
<i class="zi zi_user"></i>
<br>
<i class="zi zi_music"></i>
</div>
<footer>
<div class="container">
<div class="col-md-8 offset-md-2 footLi">
<ul>
<li><strong>关于</strong></li>
<li><a href="http://ico.z01.com/Item/1397.aspx">项目理念</a></li>
<li><a href="http://ico.z01.com/Item/1356.aspx">有何不同</a></li>
<li><a href="http://ico.z01.com/Item/508.aspx">检索方法</a></li>
<li><a href="http://ico.z01.com/Item/1350.aspx">区位标准</a></li>
</ul>
<ul>
<li><strong>使用</strong></li>
<li><a href="http://ico.z01.com/Item/499.aspx">CDN使用</a></li>
<li><a href="http://ico.z01.com/Item/499.aspx">网站目录引用</a></li>
<li><a href="http://ico.z01.com/Item/499.aspx">下载本地使用</a></li>
<li><a href="http://ico.z01.com/Item/1349.aspx">微信小程序引用</a></li>
<li><a href="http://ico.z01.com/Item/1348.aspx" style="font-size: 0.8rem;">结合angular\VUE</a></li>
</ul>
<ul>
<li><strong>支持</strong></li>
<li><a href="http://ico.z01.com/Item/1352.aspx">捐赠我们</a></li>
<li><a href="http://ico.z01.com/Item/1351.aspx">商业订制</a></li>
<li><a href="http://www.ziti163.com/webfont" target="_blank">webfont</a></li>
<li><a href="http://www.ziti163.com/uni" target="_blank">Uni全球区码</a></li>
<li><a href="http://ico.z01.com/Item/1357.aspx">申请新图标</a></li>
</ul>
<ul>
<li><strong>链接</strong></li>
<li><a href="http://www.z01.com" target="_blank">Zoomla!逐浪CMS</a></li>
<li><a href="http://f.ziti163.com" target="_blank">逐浪字库</a></li>
<li><a href="http://code.z01.com/v4" target="_blank">Bootstrap中国站</a></li>
<li><a href="http://code.z01.com/sass" target="_blank">scss/sass文档</a></li>
</ul>
</div>
<div class="Copyright">
<script src="/js/mobile.js"></script><a href="http://app.z01.com/Class_2/NodePage.aspx?url=http://localhost:115/&t=m" style="font-size:30px;" data-toggle="tooltip" data-placement="top" title="" target="_blank" data-original-title="本网站支持手机访问，点此模拟手机并获得访问"><img style="width:15px;" src="data:image/gif;base64,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" alt=""></a>
Copyright © 2018 Zoomla!CMS. All Rights Reserved 逐浪CMS®软件旗下<a href="http://www.73ic.com" target="_blank">73ic去上</a> 提供云计算服务 <a href="http://ico.z01.com/Item/1353.aspx">[版权申明]</a><br>
<a href="https://opensource.org/licenses/MIT" target="_blank">遵循 MIT 开源协议</a>
</div>
</div>
</footer>
</body>
</html>