agile-cli
Version:
agile系列框架整合使用脚手架(agile-ui、agile-ce、agile-component等)
696 lines (609 loc) • 28.1 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<script src="iconfont.js"></script>
<style type="text/css">
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bianji"></use>
</svg>
<div class="name">编辑</div>
<div class="fontclass">#icon-bianji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-anquan"></use>
</svg>
<div class="name">安全</div>
<div class="fontclass">#icon-anquan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chexiao"></use>
</svg>
<div class="name">撤销</div>
<div class="fontclass">#icon-chexiao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-bijiben"></use>
</svg>
<div class="name">笔记本</div>
<div class="fontclass">#icon-bijiben</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-chabei"></use>
</svg>
<div class="name">茶杯</div>
<div class="fontclass">#icon-chabei</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-daifahuo"></use>
</svg>
<div class="name">待发货</div>
<div class="fontclass">#icon-daifahuo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-daifukuan"></use>
</svg>
<div class="name">待付款</div>
<div class="fontclass">#icon-daifukuan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-daishouhuo"></use>
</svg>
<div class="name">待收货</div>
<div class="fontclass">#icon-daishouhuo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianzan"></use>
</svg>
<div class="name">点赞</div>
<div class="fontclass">#icon-dianzan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-diannao"></use>
</svg>
<div class="name">电脑</div>
<div class="fontclass">#icon-diannao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="fontclass">#icon-dianhua</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dingwei"></use>
</svg>
<div class="name">定位</div>
<div class="fontclass">#icon-dingwei</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fanhui"></use>
</svg>
<div class="name">返回</div>
<div class="fontclass">#icon-fanhui</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fanhui1"></use>
</svg>
<div class="name">返回2</div>
<div class="fontclass">#icon-fanhui1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fenlei"></use>
</svg>
<div class="name">分类</div>
<div class="fontclass">#icon-fenlei</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fenlei1"></use>
</svg>
<div class="name">分类2</div>
<div class="fontclass">#icon-fenlei1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fanxian"></use>
</svg>
<div class="name">返现</div>
<div class="fontclass">#icon-fanxian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang"></use>
</svg>
<div class="name">分享</div>
<div class="fontclass">#icon-fenxiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang1"></use>
</svg>
<div class="name">分享2</div>
<div class="fontclass">#icon-fenxiang1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-geren"></use>
</svg>
<div class="name">个人</div>
<div class="fontclass">#icon-geren</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gongjuxiang"></use>
</svg>
<div class="name">工具箱</div>
<div class="fontclass">#icon-gongjuxiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gengduo"></use>
</svg>
<div class="name">更多2</div>
<div class="fontclass">#icon-gengduo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gouwu"></use>
</svg>
<div class="name">购物</div>
<div class="fontclass">#icon-gouwu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gouwuche"></use>
</svg>
<div class="name">购物车</div>
<div class="fontclass">#icon-gouwuche</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gengduo1"></use>
</svg>
<div class="name">更多</div>
<div class="fontclass">#icon-gengduo1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanbi"></use>
</svg>
<div class="name">关闭</div>
<div class="fontclass">#icon-guanbi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanbi1"></use>
</svg>
<div class="name">关闭2</div>
<div class="fontclass">#icon-guanbi1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-guanbi2"></use>
</svg>
<div class="name">关闭3</div>
<div class="fontclass">#icon-guanbi2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jianshao"></use>
</svg>
<div class="name">减少</div>
<div class="fontclass">#icon-jianshao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jianshao1"></use>
</svg>
<div class="name">减少2</div>
<div class="fontclass">#icon-jianshao1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-kefu"></use>
</svg>
<div class="name">客服</div>
<div class="fontclass">#icon-kefu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-lianjie"></use>
</svg>
<div class="name">链接</div>
<div class="fontclass">#icon-lianjie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jishi"></use>
</svg>
<div class="name">计时</div>
<div class="fontclass">#icon-jishi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-liwu"></use>
</svg>
<div class="name">礼物</div>
<div class="fontclass">#icon-liwu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-liebiao"></use>
</svg>
<div class="name">列表2</div>
<div class="fontclass">#icon-liebiao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-paihang"></use>
</svg>
<div class="name">排行</div>
<div class="fontclass">#icon-paihang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-liebiao1"></use>
</svg>
<div class="name">列表</div>
<div class="fontclass">#icon-liebiao1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-remen"></use>
</svg>
<div class="name">热门</div>
<div class="fontclass">#icon-remen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu"></use>
</svg>
<div class="name">删除</div>
<div class="fontclass">#icon-shanchu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangchuan"></use>
</svg>
<div class="name">上传</div>
<div class="fontclass">#icon-shangchuan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rili"></use>
</svg>
<div class="name">日历</div>
<div class="fontclass">#icon-rili</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shangyibu"></use>
</svg>
<div class="name">上一步</div>
<div class="fontclass">#icon-shangyibu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shoucang"></use>
</svg>
<div class="name">收藏2</div>
<div class="fontclass">#icon-shoucang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shezhi"></use>
</svg>
<div class="name">设置</div>
<div class="fontclass">#icon-shezhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shoucang1"></use>
</svg>
<div class="name">收藏</div>
<div class="fontclass">#icon-shoucang1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shipin"></use>
</svg>
<div class="name">视频</div>
<div class="fontclass">#icon-shipin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouji"></use>
</svg>
<div class="name">手机</div>
<div class="fontclass">#icon-shouji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shu"></use>
</svg>
<div class="name">书</div>
<div class="fontclass">#icon-shu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
<div class="name">搜索</div>
<div class="fontclass">#icon-sousuo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tishi"></use>
</svg>
<div class="name">提示</div>
<div class="fontclass">#icon-tishi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-suo"></use>
</svg>
<div class="name">锁</div>
<div class="fontclass">#icon-suo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tianqi"></use>
</svg>
<div class="name">天气</div>
<div class="fontclass">#icon-tianqi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tianjia"></use>
</svg>
<div class="name">添加2</div>
<div class="fontclass">#icon-tianjia</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tongzhi"></use>
</svg>
<div class="name">通知</div>
<div class="fontclass">#icon-tongzhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tuikuan"></use>
</svg>
<div class="name">退款</div>
<div class="fontclass">#icon-tuikuan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenjian"></use>
</svg>
<div class="name">文件</div>
<div class="fontclass">#icon-wenjian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tuandui"></use>
</svg>
<div class="name">团队</div>
<div class="fontclass">#icon-tuandui</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tongzhi1"></use>
</svg>
<div class="name">通知2</div>
<div class="fontclass">#icon-tongzhi1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-tianjia1"></use>
</svg>
<div class="name">添加</div>
<div class="fontclass">#icon-tianjia1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenjian1"></use>
</svg>
<div class="name">文件2</div>
<div class="fontclass">#icon-wenjian1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenzhang"></use>
</svg>
<div class="name">文章</div>
<div class="fontclass">#icon-wenzhang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenti"></use>
</svg>
<div class="name">问题</div>
<div class="fontclass">#icon-wenti</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiazai"></use>
</svg>
<div class="name">下载</div>
<div class="fontclass">#icon-xiazai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wenti1"></use>
</svg>
<div class="name">问题2</div>
<div class="fontclass">#icon-wenti1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiangji"></use>
</svg>
<div class="name">相机</div>
<div class="fontclass">#icon-xiangji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiaoxi"></use>
</svg>
<div class="name">消息</div>
<div class="fontclass">#icon-xiaoxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiaoxi1"></use>
</svg>
<div class="name">消息2</div>
<div class="fontclass">#icon-xiaoxi1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xinfeng"></use>
</svg>
<div class="name">信封</div>
<div class="fontclass">#icon-xinfeng</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xinxi"></use>
</svg>
<div class="name">信息</div>
<div class="fontclass">#icon-xinxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xunhuan"></use>
</svg>
<div class="name">循环</div>
<div class="fontclass">#icon-xunhuan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yinle"></use>
</svg>
<div class="name">音乐</div>
<div class="fontclass">#icon-yinle</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yinliang"></use>
</svg>
<div class="name">音量</div>
<div class="fontclass">#icon-yinliang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhangdan"></use>
</svg>
<div class="name">账单</div>
<div class="fontclass">#icon-zhangdan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-youhuiquan"></use>
</svg>
<div class="name">优惠券2</div>
<div class="fontclass">#icon-youhuiquan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhaopian"></use>
</svg>
<div class="name">照片</div>
<div class="fontclass">#icon-zhaopian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhengque"></use>
</svg>
<div class="name">正确</div>
<div class="fontclass">#icon-zhengque</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-youhuiquan1"></use>
</svg>
<div class="name">优惠券</div>
<div class="fontclass">#icon-youhuiquan1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhengque1"></use>
</svg>
<div class="name">正确2</div>
<div class="fontclass">#icon-zhengque1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-zhuye"></use>
</svg>
<div class="name">主页</div>
<div class="fontclass">#icon-zhuye</div>
</li>
</ul>
<h2 id="symbol-">symbol引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
<li>兼容性较差，支持 ie9+,及现代浏览器。</li>
<li>浏览器渲染svg的性能一般，还不如png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
.icon {
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
vertical-align: <span class="hljs-number">-0.15</span>em;
fill: currentColor;
overflow: hidden;
}
<<span class="hljs-regexp">/style></span></code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
</span><<span class="hljs-regexp">/svg>
</span></code></pre>
</div>
</body>
</html>