<!DOCTYPE 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="#wdicon-youhui"></use>
</svg>
<div class="name">优惠</div>
<div class="fontclass">#wdicon-youhui</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-caiwu"></use>
</svg>
<div class="name">财务</div>
<div class="fontclass">#wdicon-caiwu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-kuozhanicon"></use>
</svg>
<div class="name">扩展icon</div>
<div class="fontclass">#wdicon-kuozhanicon</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youhui1"></use>
</svg>
<div class="name">优惠</div>
<div class="fontclass">#wdicon-youhui1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-heimingdan"></use>
</svg>
<div class="name">黑名单</div>
<div class="fontclass">#wdicon-heimingdan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-ttpodicon"></use>
</svg>
<div class="name">关于</div>
<div class="fontclass">#wdicon-ttpodicon</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-iconfontdengdai"></use>
</svg>
<div class="name">插件</div>
<div class="fontclass">#wdicon-iconfontdengdai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-weibiaoti1"></use>
</svg>
<div class="name">注册</div>
<div class="fontclass">#wdicon-weibiaoti1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youqinglianjie"></use>
</svg>
<div class="name">友情链接</div>
<div class="fontclass">#wdicon-youqinglianjie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-jinlingyingcaiwangtubiao38"></use>
</svg>
<div class="name">链接</div>
<div class="fontclass">#wdicon-jinlingyingcaiwangtubiao38</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-kuozhanzujianzhuanhuan"></use>
</svg>
<div class="name">扩展组件 [转换]</div>
<div class="fontclass">#wdicon-kuozhanzujianzhuanhuan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-caiwu1"></use>
</svg>
<div class="name">财务</div>
<div class="fontclass">#wdicon-caiwu1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-weishibiewenjian"></use>
</svg>
<div class="name">未识别文件</div>
<div class="fontclass">#wdicon-weishibiewenjian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youhui2"></use>
</svg>
<div class="name">优惠</div>
<div class="fontclass">#wdicon-youhui2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-bangzhu"></use>
</svg>
<div class="name">帮助</div>
<div class="fontclass">#wdicon-bangzhu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youqinglianjie1"></use>
</svg>
<div class="name">友情链接</div>
<div class="fontclass">#wdicon-youqinglianjie1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-icfanghuoqiang"></use>
</svg>
<div class="name">ic_防火墙</div>
<div class="fontclass">#wdicon-icfanghuoqiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-duankai"></use>
</svg>
<div class="name">断开</div>
<div class="fontclass">#wdicon-duankai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-search"></use>
</svg>
<div class="name">找回方式</div>
<div class="fontclass">#wdicon-search</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-icon9"></use>
</svg>
<div class="name">收藏</div>
<div class="fontclass">#wdicon-icon9</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-bangzhu1"></use>
</svg>
<div class="name">帮助</div>
<div class="fontclass">#wdicon-bangzhu1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-lianjie"></use>
</svg>
<div class="name">链接</div>
<div class="fontclass">#wdicon-lianjie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-chajian"></use>
</svg>
<div class="name">插件</div>
<div class="fontclass">#wdicon-chajian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-weibiaoti13"></use>
</svg>
<div class="name">模型管理</div>
<div class="fontclass">#wdicon-weibiaoti13</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-caiwu2"></use>
</svg>
<div class="name">财务</div>
<div class="fontclass">#wdicon-caiwu2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-php"></use>
</svg>
<div class="name">php</div>
<div class="fontclass">#wdicon-php</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-gouwuche"></use>
</svg>
<div class="name">购物车</div>
<div class="fontclass">#wdicon-gouwuche</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-gouwuchetianjia"></use>
</svg>
<div class="name">购物车添加</div>
<div class="fontclass">#wdicon-gouwuchetianjia</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-article"></use>
</svg>
<div class="name">文章</div>
<div class="fontclass">#wdicon-article</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-qingchuhuancun"></use>
</svg>
<div class="name">清除缓存</div>
<div class="fontclass">#wdicon-qingchuhuancun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shenhe"></use>
</svg>
<div class="name">审核</div>
<div class="fontclass">#wdicon-shenhe</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanyu"></use>
</svg>
<div class="name">关于</div>
<div class="fontclass">#wdicon-guanyu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shenhe1"></use>
</svg>
<div class="name">审核</div>
<div class="fontclass">#wdicon-shenhe1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-finance"></use>
</svg>
<div class="name">财务</div>
<div class="fontclass">#wdicon-finance</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanggao"></use>
</svg>
<div class="name">广告</div>
<div class="fontclass">#wdicon-guanggao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-111"></use>
</svg>
<div class="name">黑名单</div>
<div class="fontclass">#wdicon-111</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-tag19"></use>
</svg>
<div class="name">收藏</div>
<div class="fontclass">#wdicon-tag19</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-mima"></use>
</svg>
<div class="name">密码</div>
<div class="fontclass">#wdicon-mima</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-off"></use>
</svg>
<div class="name">优惠</div>
<div class="fontclass">#wdicon-off</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-icon903"></use>
</svg>
<div class="name">密码找回</div>
<div class="fontclass">#wdicon-icon903</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-mima1"></use>
</svg>
<div class="name">密码</div>
<div class="fontclass">#wdicon-mima1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-about"></use>
</svg>
<div class="name">关于</div>
<div class="fontclass">#wdicon-about</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-huancun"></use>
</svg>
<div class="name">缓存</div>
<div class="fontclass">#wdicon-huancun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-heimingdan1"></use>
</svg>
<div class="name">黑名单</div>
<div class="fontclass">#wdicon-heimingdan1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-cuohao"></use>
</svg>
<div class="name">错号</div>
<div class="fontclass">#wdicon-cuohao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="fontclass">#wdicon-dianhua</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-fenlei"></use>
</svg>
<div class="name">分类</div>
<div class="fontclass">#wdicon-fenlei</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shouye"></use>
</svg>
<div class="name">首页</div>
<div class="fontclass">#wdicon-shouye</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-suoding"></use>
</svg>
<div class="name">锁定</div>
<div class="fontclass">#wdicon-suoding</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-tongji"></use>
</svg>
<div class="name">统计</div>
<div class="fontclass">#wdicon-tongji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-QQ"></use>
</svg>
<div class="name">QQ</div>
<div class="fontclass">#wdicon-QQ</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanyu1"></use>
</svg>
<div class="name">关于</div>
<div class="fontclass">#wdicon-guanyu1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-fanghuoqiang"></use>
</svg>
<div class="name">防火墙</div>
<div class="fontclass">#wdicon-fanghuoqiang</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-gerenshejiao"></use>
</svg>
<div class="name">个人社交</div>
<div class="fontclass">#wdicon-gerenshejiao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-fanghuoqiang1"></use>
</svg>
<div class="name">防火墙</div>
<div class="fontclass">#wdicon-fanghuoqiang1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youqingwailian"></use>
</svg>
<div class="name">友情外链</div>
<div class="fontclass">#wdicon-youqingwailian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanggao1"></use>
</svg>
<div class="name">广告</div>
<div class="fontclass">#wdicon-guanggao1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wangzhanguanli"></use>
</svg>
<div class="name">网站管理</div>
<div class="fontclass">#wdicon-wangzhanguanli</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-circular-QQ"></use>
</svg>
<div class="name">circular-QQ</div>
<div class="fontclass">#wdicon-circular-QQ</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-circular-Taobao"></use>
</svg>
<div class="name">circular-Taobao</div>
<div class="fontclass">#wdicon-circular-Taobao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-circular-WeChat"></use>
</svg>
<div class="name">circular-WeChat</div>
<div class="fontclass">#wdicon-circular-WeChat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-default-WeChat"></use>
</svg>
<div class="name">default-WeChat</div>
<div class="fontclass">#wdicon-default-WeChat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-square-QQ"></use>
</svg>
<div class="name">square-QQ</div>
<div class="fontclass">#wdicon-square-QQ</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-square-WeChat"></use>
</svg>
<div class="name">square-WeChat</div>
<div class="fontclass">#wdicon-square-WeChat</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-html"></use>
</svg>
<div class="name">符号-html</div>
<div class="fontclass">#wdicon-html</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wenjianjia-zhankai"></use>
</svg>
<div class="name">文件夹-展开</div>
<div class="fontclass">#wdicon-wenjianjia-zhankai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wenjianjia-shouqi"></use>
</svg>
<div class="name">文件夹-收起</div>
<div class="fontclass">#wdicon-wenjianjia-shouqi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-tianjia-yin"></use>
</svg>
<div class="name">添加</div>
<div class="fontclass">#wdicon-tianjia-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-chenggong-yin"></use>
</svg>
<div class="name">成功</div>
<div class="fontclass">#wdicon-chenggong-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zhuyi-yin"></use>
</svg>
<div class="name">注意</div>
<div class="fontclass">#wdicon-zhuyi-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xinxi-yin"></use>
</svg>
<div class="name">信息</div>
<div class="fontclass">#wdicon-xinxi-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shibai-yin"></use>
</svg>
<div class="name">失败</div>
<div class="fontclass">#wdicon-shibai-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-bangzhu-yin"></use>
</svg>
<div class="name">帮助</div>
<div class="fontclass">#wdicon-bangzhu-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-jinzhi-yin"></use>
</svg>
<div class="name">禁止</div>
<div class="fontclass">#wdicon-jinzhi-yin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yonghu-"></use>
</svg>
<div class="name">用户-02</div>
<div class="fontclass">#wdicon-yonghu-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shaixuanyonghu"></use>
</svg>
<div class="name">筛选用户</div>
<div class="fontclass">#wdicon-shaixuanyonghu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-qunzu"></use>
</svg>
<div class="name">群组</div>
<div class="fontclass">#wdicon-qunzu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanliyuan"></use>
</svg>
<div class="name">管理员</div>
<div class="fontclass">#wdicon-guanliyuan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yonghu"></use>
</svg>
<div class="name">用户</div>
<div class="fontclass">#wdicon-yonghu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-tianjiayonghu"></use>
</svg>
<div class="name">添加用户</div>
<div class="fontclass">#wdicon-tianjiayonghu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shuaxin"></use>
</svg>
<div class="name">刷新</div>
<div class="fontclass">#wdicon-shuaxin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-lingcun"></use>
</svg>
<div class="name">另存</div>
<div class="fontclass">#wdicon-lingcun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-baocun"></use>
</svg>
<div class="name">保存</div>
<div class="fontclass">#wdicon-baocun</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shouqi"></use>
</svg>
<div class="name">收起</div>
<div class="fontclass">#wdicon-shouqi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zhankai"></use>
</svg>
<div class="name">展开</div>
<div class="fontclass">#wdicon-zhankai</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-suodingSQLshujuji"></use>
</svg>
<div class="name">锁定SQL数据集</div>
<div class="fontclass">#wdicon-suodingSQLshujuji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-SQLshujuji"></use>
</svg>
<div class="name">SQL数据集</div>
<div class="fontclass">#wdicon-SQLshujuji</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yibiaoban"></use>
</svg>
<div class="name">仪表板</div>
<div class="fontclass">#wdicon-yibiaoban</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youduiqi"></use>
</svg>
<div class="name">右对齐</div>
<div class="fontclass">#wdicon-youduiqi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-juzhong"></use>
</svg>
<div class="name">居中</div>
<div class="fontclass">#wdicon-juzhong</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zuoduiqi"></use>
</svg>
<div class="name">左对齐</div>
<div class="fontclass">#wdicon-zuoduiqi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-fuzhi"></use>
</svg>
<div class="name">复制</div>
<div class="fontclass">#wdicon-fuzhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-niantie"></use>
</svg>
<div class="name">粘贴</div>
<div class="fontclass">#wdicon-niantie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wenbenduiqi"></use>
</svg>
<div class="name">文本对齐</div>
<div class="fontclass">#wdicon-wenbenduiqi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-duohangwenben"></use>
</svg>
<div class="name">多行文本02</div>
<div class="fontclass">#wdicon-duohangwenben</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-huobi"></use>
</svg>
<div class="name">货币</div>
<div class="fontclass">#wdicon-huobi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-paixu"></use>
</svg>
<div class="name">排序</div>
<div class="fontclass">#wdicon-paixu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-set"></use>
</svg>
<div class="name">设置</div>
<div class="fontclass">#wdicon-set</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-event"></use>
</svg>
<div class="name">事件</div>
<div class="fontclass">#wdicon-event</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-refresh"></use>
</svg>
<div class="name">刷新</div>
<div class="fontclass">#wdicon-refresh</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-add"></use>
</svg>
<div class="name">新增</div>
<div class="fontclass">#wdicon-add</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-panel"></use>
</svg>
<div class="name">仪表盘</div>
<div class="fontclass">#wdicon-panel</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-alter"></use>
</svg>
<div class="name">变更</div>
<div class="fontclass">#wdicon-alter</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-edit"></use>
</svg>
<div class="name">编辑</div>
<div class="fontclass">#wdicon-edit</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-pieChart"></use>
</svg>
<div class="name">饼图</div>
<div class="fontclass">#wdicon-pieChart</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-order"></use>
</svg>
<div class="name">工单</div>
<div class="fontclass">#wdicon-order</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-publish"></use>
</svg>
<div class="name">发布</div>
<div class="fontclass">#wdicon-publish</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shutDown"></use>
</svg>
<div class="name">关机</div>
<div class="fontclass">#wdicon-shutDown</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-cancel"></use>
</svg>
<div class="name">取消</div>
<div class="fontclass">#wdicon-cancel</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-deblock"></use>
</svg>
<div class="name">解锁</div>
<div class="fontclass">#wdicon-deblock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-lock"></use>
</svg>
<div class="name">死锁</div>
<div class="fontclass">#wdicon-lock</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-button-add"></use>
</svg>
<div class="name">button-add-按钮添加</div>
<div class="fontclass">#wdicon-button-add</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-button-remove"></use>
</svg>
<div class="name">button-remove-按钮删除</div>
<div class="fontclass">#wdicon-button-remove</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-print"></use>
</svg>
<div class="name">print-印刷</div>
<div class="fontclass">#wdicon-print</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-fujian"></use>
</svg>
<div class="name">附件</div>
<div class="fontclass">#wdicon-fujian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shujuku"></use>
</svg>
<div class="name">数据库</div>
<div class="fontclass">#wdicon-shujuku</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-gongju-"></use>
</svg>
<div class="name">工具-3</div>
<div class="fontclass">#wdicon-gongju-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yingyong-"></use>
</svg>
<div class="name">应用-4</div>
<div class="fontclass">#wdicon-yingyong-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yewumingxi"></use>
</svg>
<div class="name">业务明细</div>
<div class="fontclass">#wdicon-yewumingxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-pingtaiguanli"></use>
</svg>
<div class="name">平台管理</div>
<div class="fontclass">#wdicon-pingtaiguanli</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiaoxi-"></use>
</svg>
<div class="name">消息-2</div>
<div class="fontclass">#wdicon-xiaoxi-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-home"></use>
</svg>
<div class="name">home</div>
<div class="fontclass">#wdicon-home</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shiliqingk"></use>
</svg>
<div class="name">shiliqingk</div>
<div class="fontclass">#wdicon-shiliqingk</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wl"></use>
</svg>
<div class="name">wl</div>
<div class="fontclass">#wdicon-wl</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yyxtgl"></use>
</svg>
<div class="name">yyxtgl</div>
<div class="fontclass">#wdicon-yyxtgl</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zbtdgl"></use>
</svg>
<div class="name">zbtdgl</div>
<div class="fontclass">#wdicon-zbtdgl</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shanchu-"></use>
</svg>
<div class="name">删除-3</div>
<div class="fontclass">#wdicon-shanchu-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-huifu"></use>
</svg>
<div class="name">恢复</div>
<div class="fontclass">#wdicon-huifu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-piliangshanchu"></use>
</svg>
<div class="name">批量删除</div>
<div class="fontclass">#wdicon-piliangshanchu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wenjian"></use>
</svg>
<div class="name">文件1</div>
<div class="fontclass">#wdicon-wenjian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wenjian1"></use>
</svg>
<div class="name">文件</div>
<div class="fontclass">#wdicon-wenjian1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zhuanfa-"></use>
</svg>
<div class="name">转发-2</div>
<div class="fontclass">#wdicon-zhuanfa-</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-cipan"></use>
</svg>
<div class="name">磁盘</div>
<div class="fontclass">#wdicon-cipan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-institute"></use>
</svg>
<div class="name">机构</div>
<div class="fontclass">#wdicon-institute</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-kefu"></use>
</svg>
<div class="name">客服</div>
<div class="fontclass">#wdicon-kefu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-ban"></use>
</svg>
<div class="name">禁用</div>
<div class="fontclass">#wdicon-ban</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-annotate"></use>
</svg>
<div class="name">注释</div>
<div class="fontclass">#wdicon-annotate</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-message"></use>
</svg>
<div class="name">信息</div>
<div class="fontclass">#wdicon-message</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shibielianjie"></use>
</svg>
<div class="name">识别连接</div>
<div class="fontclass">#wdicon-shibielianjie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-yonghuguanli"></use>
</svg>
<div class="name">用户管理</div>
<div class="fontclass">#wdicon-yonghuguanli</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-quanxianguanli"></use>
</svg>
<div class="name">权限管理</div>
<div class="fontclass">#wdicon-quanxianguanli</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zuguanli"></use>
</svg>
<div class="name">组管理</div>
<div class="fontclass">#wdicon-zuguanli</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shishibaobiao"></use>
</svg>
<div class="name">实时报表</div>
<div class="fontclass">#wdicon-shishibaobiao</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-youqing"></use>
</svg>
<div class="name">友情</div>
<div class="fontclass">#wdicon-youqing</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-like"></use>
</svg>
<div class="name">点赞</div>
<div class="fontclass">#wdicon-like</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-serve"></use>
</svg>
<div class="name">客服</div>
<div class="fontclass">#wdicon-serve</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-link"></use>
</svg>
<div class="name">链接</div>
<div class="fontclass">#wdicon-link</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiangxi"></use>
</svg>
<div class="name">详细</div>
<div class="fontclass">#wdicon-xiangxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shouquan"></use>
</svg>
<div class="name">授权</div>
<div class="fontclass">#wdicon-shouquan</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-icon-weixin"></use>
</svg>
<div class="name">icon-weixin</div>
<div class="fontclass">#wdicon-icon-weixin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-renlianshibie"></use>
</svg>
<div class="name">人脸识别</div>
<div class="fontclass">#wdicon-renlianshibie</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shanchu"></use>
</svg>
<div class="name">删除</div>
<div class="fontclass">#wdicon-shanchu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-jifen"></use>
</svg>
<div class="name">积分</div>
<div class="fontclass">#wdicon-jifen</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-zhibiaopeizhi"></use>
</svg>
<div class="name">指标配置</div>
<div class="fontclass">#wdicon-zhibiaopeizhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-bumenguanli"></use>
</svg>
<div class="name">部门管理</div>
<div class="fontclass">#wdicon-bumenguanli</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-qrcode_fill"></use>
</svg>
<div class="name">qrcode_fill</div>
<div class="fontclass">#wdicon-qrcode_fill</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-qrcode"></use>
</svg>
<div class="name">qrcode</div>
<div class="fontclass">#wdicon-qrcode</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-chanpin"></use>
</svg>
<div class="name">产品</div>
<div class="fontclass">#wdicon-chanpin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-duanxin"></use>
</svg>
<div class="name">短信</div>
<div class="fontclass">#wdicon-duanxin</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-kefuzhichi"></use>
</svg>
<div class="name">客服支持</div>
<div class="fontclass">#wdicon-kefuzhichi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xitongcanshushezhi"></use>
</svg>
<div class="name">系统参数设置</div>
<div class="fontclass">#wdicon-xitongcanshushezhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xitongpeizhi"></use>
</svg>
<div class="name">系统配置</div>
<div class="fontclass">#wdicon-xitongpeizhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-ZHicon_"></use>
</svg>
<div class="name">审核</div>
<div class="fontclass">#wdicon-ZHicon_</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-daoru"></use>
</svg>
<div class="name">导入</div>
<div class="fontclass">#wdicon-daoru</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanbi"></use>
</svg>
<div class="name">关闭</div>
<div class="fontclass">#wdicon-guanbi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-guanlian"></use>
</svg>
<div class="name">关联</div>
<div class="fontclass">#wdicon-guanlian</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-daochu"></use>
</svg>
<div class="name">导出</div>
<div class="fontclass">#wdicon-daochu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-rili"></use>
</svg>
<div class="name">日历</div>
<div class="fontclass">#wdicon-rili</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-queren"></use>
</svg>
<div class="name">确认</div>
<div class="fontclass">#wdicon-queren</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shanchu1"></use>
</svg>
<div class="name">删除</div>
<div class="fontclass">#wdicon-shanchu1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shuaxin1"></use>
</svg>
<div class="name">刷新</div>
<div class="fontclass">#wdicon-shuaxin1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shezhi"></use>
</svg>
<div class="name">设置</div>
<div class="fontclass">#wdicon-shezhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-tongbu"></use>
</svg>
<div class="name">同步</div>
<div class="fontclass">#wdicon-tongbu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiangshang_jiantou"></use>
</svg>
<div class="name">向上_箭头</div>
<div class="fontclass">#wdicon-xiangshang_jiantou</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiangxiajiantou"></use>
</svg>
<div class="name">向下箭头</div>
<div class="fontclass">#wdicon-xiangxiajiantou</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiangzuojiantou"></use>
</svg>
<div class="name">向左箭头</div>
<div class="fontclass">#wdicon-xiangzuojiantou</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xinzeng"></use>
</svg>
<div class="name">新增</div>
<div class="fontclass">#wdicon-xinzeng</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiangyoujiantou"></use>
</svg>
<div class="name">向右箭头</div>
<div class="fontclass">#wdicon-xiangyoujiantou</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-xiaoxi"></use>
</svg>
<div class="name">消息</div>
<div class="fontclass">#wdicon-xiaoxi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-W"></use>
</svg>
<div class="name">W</div>
<div class="fontclass">#wdicon-W</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-module"></use>
</svg>
<div class="name">模块</div>
<div class="fontclass">#wdicon-module</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-cry"></use>
</svg>
<div class="name">哭泣</div>
<div class="fontclass">#wdicon-cry</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-smile"></use>
</svg>
<div class="name">微笑</div>
<div class="fontclass">#wdicon-smile</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-Smile"></use>
</svg>
<div class="name">微笑</div>
<div class="fontclass">#wdicon-Smile</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shouye-shouye"></use>
</svg>
<div class="name">首页-首页</div>
<div class="fontclass">#wdicon-shouye-shouye</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-icon-test"></use>
</svg>
<div class="name">关于</div>
<div class="fontclass">#wdicon-icon-test</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-module1"></use>
</svg>
<div class="name">模型</div>
<div class="fontclass">#wdicon-module1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shujuchuanshu_l"></use>
</svg>
<div class="name">数据传输_l</div>
<div class="fontclass">#wdicon-shujuchuanshu_l</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shujuchuanshu_f"></use>
</svg>
<div class="name">数据传输_f</div>
<div class="fontclass">#wdicon-shujuchuanshu_f</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shangchuantupian_l"></use>
</svg>
<div class="name">上传图片_l</div>
<div class="fontclass">#wdicon-shangchuantupian_l</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-shenhe2"></use>
</svg>
<div class="name">审核</div>
<div class="fontclass">#wdicon-shenhe2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-wangzhanguanli1"></use>
</svg>
<div class="name">网站管理</div>
<div class="fontclass">#wdicon-wangzhanguanli1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#wdicon-nenglimoxing"></use>
</svg>
<div class="name">能力模型</div>
<div class="fontclass">#wdicon-nenglimoxing</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">"#wdicon-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>