qkui-h5
Version:
Quick 框架组件
2,379 lines • 83.5 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1056664" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">eye</div>
<div class="code-name">&#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">payment</div>
<div class="code-name">&#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">yxx_wechat_pay_success</div>
<div class="code-name">&#xe657;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">clear</div>
<div class="code-name">&#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">放大</div>
<div class="code-name">&#xe63d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">star</div>
<div class="code-name">&#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">close_eye</div>
<div class="code-name">&#xe6e6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分享</div>
<div class="code-name">&#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">播放</div>
<div class="code-name">&#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">客服</div>
<div class="code-name">&#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">身份证</div>
<div class="code-name">&#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">全屏</div>
<div class="code-name">&#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">对勾</div>
<div class="code-name">&#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">说明</div>
<div class="code-name">&#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">暂停</div>
<div class="code-name">&#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">箭头 上</div>
<div class="code-name">&#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">箭头 右</div>
<div class="code-name">&#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">箭头 下</div>
<div class="code-name">&#xe632;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">扫一扫</div>
<div class="code-name">&#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">我的</div>
<div class="code-name">&#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">首页</div>
<div class="code-name">&#xe635;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分类</div>
<div class="code-name">&#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">消息</div>
<div class="code-name">&#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">置顶</div>
<div class="code-name">&#xe639;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">选中</div>
<div class="code-name">&#xe63a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">tab角标</div>
<div class="code-name">&#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">观演人</div>
<div class="code-name">&#xe63f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">订阅</div>
<div class="code-name">&#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">地址管理</div>
<div class="code-name">&#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">待付款</div>
<div class="code-name">&#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">待收货</div>
<div class="code-name">&#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">会员</div>
<div class="code-name">&#xe644;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">未使用</div>
<div class="code-name">&#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">评价</div>
<div class="code-name">&#xe646;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">签到</div>
<div class="code-name">&#xe647;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">演出日历</div>
<div class="code-name">&#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">常用购票人／编辑32</div>
<div class="code-name">&#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除</div>
<div class="code-name">&#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">订单</div>
<div class="code-name">&#xe64b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">加减组件 加号</div>
<div class="code-name">&#xe64e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">换一换</div>
<div class="code-name">&#xe653;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">time</div>
<div class="code-name">&#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">实名认证</div>
<div class="code-name">&#xe65c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">alipay</div>
<div class="code-name">&#xe70a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">编写</div>
<div class="code-name">&#xe67b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">wifi</div>
<div class="code-name">&#xe67c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">城市合伙人</div>
<div class="code-name">&#xe67d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">错误</div>
<div class="code-name">&#xe680;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">待付款</div>
<div class="code-name">&#xe681;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">待退货</div>
<div class="code-name">&#xe683;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">地址</div>
<div class="code-name">&#xe684;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电话</div>
<div class="code-name">&#xe682;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">定位</div>
<div class="code-name">&#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">对号</div>
<div class="code-name">&#xe687;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">发票信息</div>
<div class="code-name">&#xe688;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分享</div>
<div class="code-name">&#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">公告</div>
<div class="code-name">&#xe689;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">密码</div>
<div class="code-name">&#xe68e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">零售采购</div>
<div class="code-name">&#xe68f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">我</div>
<div class="code-name">&#xe690;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除</div>
<div class="code-name">&#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">日历</div>
<div class="code-name">&#xe692;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">商家</div>
<div class="code-name">&#xe693;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">群聊</div>
<div class="code-name">&#xe694;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">设置</div>
<div class="code-name">&#xe695;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">搜索1</div>
<div class="code-name">&#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">下箭头</div>
<div class="code-name">&#xe69a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">我的业绩</div>
<div class="code-name">&#xe69c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">消息</div>
<div class="code-name">&#xe69d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">新建地址</div>
<div class="code-name">&#xe69f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">新闻</div>
<div class="code-name">&#xe6a0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">新增商品</div>
<div class="code-name">&#xe6a1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">音乐</div>
<div class="code-name">&#xe6a2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">在线询价</div>
<div class="code-name">&#xe6a3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">左箭头</div>
<div class="code-name">&#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钱包</div>
<div class="code-name">&#xe6ad;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">供应商</div>
<div class="code-name">&#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">账户管理</div>
<div class="code-name">&#xe6b3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">关 闭</div>
<div class="code-name">&#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">直播服务</div>
<div class="code-name">&#xe658;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe66e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">reload</div>
<div class="code-name">&#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">qq_empty</div>
<div class="code-name">&#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">ticket_sub</div>
<div class="code-name">&#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">weixin_empty</div>
<div class="code-name">&#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">版本号</div>
<div class="code-name">&#xe672;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">扫一扫</div>
<div class="code-name">&#xe673;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">支付平台-银联</div>
<div class="code-name">&#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">33颁发</div>
<div class="code-name">&#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">地球</div>
<div class="code-name">&#xe698;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">徽章</div>
<div class="code-name">&#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">客服</div>
<div class="code-name">&#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">箭头</div>
<div class="code-name">&#xe63c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">点赞</div>
<div class="code-name">&#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">活动管理</div>
<div class="code-name">&#xe6a4;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
><span class="iconfont">&#x33;</span>
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-eye"></span>
<div class="name">
eye
</div>
<div class="code-name">.icon-eye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-payment"></span>
<div class="name">
payment
</div>
<div class="code-name">.icon-payment
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weixinzhifu"></span>
<div class="name">
yxx_wechat_pay_success
</div>
<div class="code-name">.icon-weixinzhifu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clear"></span>
<div class="name">
clear
</div>
<div class="code-name">.icon-clear
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fangda"></span>
<div class="name">
放大
</div>
<div class="code-name">.icon-fangda
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-star"></span>
<div class="name">
star
</div>
<div class="code-name">.icon-star
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close_eye"></span>
<div class="name">
close_eye
</div>
<div class="code-name">.icon-close_eye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxiang"></span>
<div class="name">
分享
</div>
<div class="code-name">.icon-fenxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bofang"></span>
<div class="name">
播放
</div>
<div class="code-name">.icon-bofang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kefur"></span>
<div class="name">
客服
</div>
<div class="code-name">.icon-kefur
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shenfenzheng"></span>
<div class="name">
身份证
</div>
<div class="code-name">.icon-shenfenzheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanping"></span>
<div class="name">
全屏
</div>
<div class="code-name">.icon-quanping
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duigou"></span>
<div class="name">
对勾
</div>
<div class="code-name">.icon-duigou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuoming"></span>
<div class="name">
说明
</div>
<div class="code-name">.icon-shuoming
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zanting"></span>
<div class="name">
暂停
</div>
<div class="code-name">.icon-zanting
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icon-shoucang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantoushang"></span>
<div class="name">
箭头 上
</div>
<div class="code-name">.icon-jiantoushang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantouyou"></span>
<div class="name">
箭头 右
</div>
<div class="code-name">.icon-jiantouyou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantouxia"></span>
<div class="name">
箭头 下
</div>
<div class="code-name">.icon-jiantouxia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-saoyisao"></span>
<div class="name">
扫一扫
</div>
<div class="code-name">.icon-saoyisao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wode"></span>
<div class="name">
我的
</div>
<div class="code-name">.icon-wode
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouye"></span>
<div class="name">
首页
</div>
<div class="code-name">.icon-shouye
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei"></span>
<div class="name">
分类
</div>
<div class="code-name">.icon-fenlei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tixin"></span>
<div class="name">
消息
</div>
<div class="code-name">.icon-tixin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhiding"></span>
<div class="name">
置顶
</div>
<div class="code-name">.icon-zhiding
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuanzhong"></span>
<div class="name">
选中
</div>
<div class="code-name">.icon-xuanzhong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tabguanbi"></span>
<div class="name">
tab角标
</div>
<div class="code-name">.icon-tabguanbi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guanyanren"></span>
<div class="name">
观演人
</div>
<div class="code-name">.icon-guanyanren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingyue"></span>
<div class="name">
订阅
</div>
<div class="code-name">.icon-dingyue
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dizhiguanli"></span>
<div class="name">
地址管理
</div>
<div class="code-name">.icon-dizhiguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daifukuan"></span>
<div class="name">
待付款
</div>
<div class="code-name">.icon-daifukuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daishouhuo"></span>
<div class="name">
待收货
</div>
<div class="code-name">.icon-daishouhuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huiyuan"></span>
<div class="name">
会员
</div>
<div class="code-name">.icon-huiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weishiyong"></span>
<div class="name">
未使用
</div>
<div class="code-name">.icon-weishiyong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pingjia"></span>
<div class="name">
评价
</div>
<div class="code-name">.icon-pingjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qiandao"></span>
<div class="name">
签到
</div>
<div class="code-name">.icon-qiandao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yanchurili"></span>
<div class="name">
演出日历
</div>
<div class="code-name">.icon-yanchurili
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-changyonggoupiaorenbianji"></span>
<div class="name">
常用购票人／编辑32
</div>
<div class="code-name">.icon-changyonggoupiaorenbianji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-changyonggoupiaorenshanchu"></span>
<div class="name">
删除
</div>
<div class="code-name">.icon-changyonggoupiaorenshanchu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingdan"></span>
<div class="name">
订单
</div>
<div class="code-name">.icon-dingdan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiajianzujianjiahao"></span>
<div class="name">
加减组件 加号
</div>
<div class="code-name">.icon-jiajianzujianjiahao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huanyihuan"></span>
<div class="name">
换一换
</div>
<div class="code-name">.icon-huanyihuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-time"></span>
<div class="name">
time
</div>
<div class="code-name">.icon-time
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shimingrenzheng"></span>
<div class="name">
实名认证
</div>
<div class="code-name">.icon-shimingrenzheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-alipay"></span>
<div class="name">
alipay
</div>
<div class="code-name">.icon-alipay
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianxie"></span>
<div class="name">
编写
</div>
<div class="code-name">.icon-bianxie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wifi"></span>
<div class="name">
wifi
</div>
<div class="code-name">.icon-wifi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chengshihehuoren"></span>
<div class="name">
城市合伙人
</div>
<div class="code-name">.icon-chengshihehuoren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cuowu"></span>
<div class="name">
错误
</div>
<div class="code-name">.icon-cuowu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dfk"></span>
<div class="name">
待付款
</div>
<div class="code-name">.icon-dfk
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daituihuo"></span>
<div class="name">
待退货
</div>
<div class="code-name">.icon-daituihuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dizhi"></span>
<div class="name">
地址
</div>
<div class="code-name">.icon-dizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianhua"></span>
<div class="name">
电话
</div>
<div class="code-name">.icon-dianhua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingwei"></span>
<div class="name">
定位
</div>
<div class="code-name">.icon-dingwei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duihao"></span>
<div class="name">
对号
</div>
<div class="code-name">.icon-duihao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fapiaoxinxi"></span>
<div class="name">
发票信息
</div>
<div class="code-name">.icon-fapiaoxinxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxiangr"></span>
<div class="name">
分享
</div>
<div class="code-name">.icon-fenxiangr
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gonggao"></span>
<div class="name">
公告
</div>
<div class="code-name">.icon-gonggao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mima"></span>
<div class="name">
密码
</div>
<div class="code-name">.icon-mima
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lingshoucaigou"></span>
<div class="name">
零售采购
</div>
<div class="code-name">.icon-lingshoucaigou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wo"></span>
<div class="name">
我
</div>
<div class="code-name">.icon-wo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shanchu"></span>
<div class="name">
删除
</div>
<div class="code-name">.icon-shanchu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-rili"></span>
<div class="name">
日历
</div>
<div class="code-name">.icon-rili
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangjia"></span>
<div class="name">
商家
</div>
<div class="code-name">.icon-shangjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qunliao"></span>
<div class="name">
群聊
</div>
<div class="code-name">.icon-qunliao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shezhi"></span>
<div class="name">
设置
</div>
<div class="code-name">.icon-shezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo"></span>
<div class="name">
搜索1
</div>
<div class="code-name">.icon-sousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiajiantou"></span>
<div class="name">
下箭头
</div>
<div class="code-name">.icon-xiajiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wodeyeji"></span>
<div class="name">
我的业绩
</div>
<div class="code-name">.icon-wodeyeji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiaoxi"></span>
<div class="name">
消息
</div>
<div class="code-name">.icon-xiaoxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinjiandizhi"></span>
<div class="name">
新建地址
</div>
<div class="code-name">.icon-xinjiandizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinwen"></span>
<div class="name">
新闻
</div>
<div class="code-name">.icon-xinwen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinzengshangpin"></span>
<div class="name">
新增商品
</div>
<div class="code-name">.icon-xinzengshangpin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinle"></span>
<div class="name">
音乐
</div>
<div class="code-name">.icon-yinle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zaixianxunjia"></span>
<div class="name">
在线询价
</div>
<div class="code-name">.icon-zaixianxunjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuojiantou"></span>
<div class="name">
左箭头
</div>
<div class="code-name">.icon-zuojiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianbao"></span>
<div class="name">
钱包
</div>
<div class="code-name">.icon-qianbao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyingshang"></span>
<div class="name">
供应商
</div>
<div class="code-name">.icon-gongyingshang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghuguanli"></span>
<div class="name">
账户管理
</div>
<div class="code-name">.icon-zhanghuguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guanbi"></span>
<div class="name">
关 闭
</div>
<div class="code-name">.icon-guanbi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhibofuwu"></span>
<div class="name">
直播服务
</div>
<div class="code-name">.icon-zhibofuwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang1"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icon-shoucang1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-reload"></span>
<div class="name">
reload
</div>
<div class="code-name">.icon-reload
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qq_empty"></span>
<div class="name">
qq_empty
</div>
<div class="code-name">.icon-qq_empty
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ticket_sub"></span>
<div class="name">
ticket_sub
</div>
<div class="code-name">.icon-ticket_sub
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weixin_empty"></span>
<div class="name">
weixin_empty
</div>
<div class="code-name">.icon-weixin_empty
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-banbenhao"></span>
<div class="name">
版本号
</div>
<div class="code-name">.icon-banbenhao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qrcode"></span>
<div class="name">
扫一扫
</div>
<div class="code-name">.icon-qrcode
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhifupingtai-yinlian"></span>
<div class="name">
支付平台-银联
</div>
<div class="code-name">.icon-zhifupingtai-yinlian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-banfa"></span>
<div class="name">
33颁发
</div>
<div class="code-name">.icon-banfa
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-diqiu"></span>
<div class="name">
地球
</div>
<div class="code-name">.icon-diqiu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huizhang"></span>
<div class="name">
徽章
</div>
<div class="code-name">.icon-huizhang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kefu"></span>
<div class="name">
客服
</div>
<div class="code-name">.icon-kefu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou"></span>
<div class="name">
箭头
</div>
<div class="code-name">.icon-jiantou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianzan"></span>
<div class="name">
点赞
</div>
<div class="code-name">.icon-dianzan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huodongguanli"></span>
<div class="name">
活动管理
</div>
<div class="code-name">.icon-huodongguanli
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-eye"></use>
</svg>
<div class="name">eye</div>
<div class="code-name">#icon-eye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-payment"></use>
</svg>
<div class="name">payment</div>
<div class="code-name">#icon-payment</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weixinzhifu"></use>
</svg>
<div class="name">yxx_wechat_pay_success</div>
<div class="code-name">#icon-weixinzhifu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clear"></use>
</svg>
<div class="name">clear</div>
<div class="code-name">#icon-clear</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fangda"></use>
</svg>
<div class="name">放大</div>
<div class="code-name">#icon-fangda</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-star"></use>
</svg>
<div class="name">star</div>
<div class="code-name">#icon-star</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close_eye"></use>
</svg>
<div class="name">close_eye</div>
<div class="code-name">#icon-close_eye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#icon-fenxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bofang"></use>
</svg>
<div class="name">播放</div>
<div class="code-name">#icon-bofang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kefur"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#icon-kefur</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shenfenzheng"></use>
</svg>
<div class="name">身份证</div>
<div class="code-name">#icon-shenfenzheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quanping"></use>
</svg>
<div class="name">全屏</div>
<div class="code-name">#icon-quanping</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duigou"></use>
</svg>
<div class="name">对勾</div>
<div class="code-name">#icon-duigou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuoming"></use>
</svg>
<div class="name">说明</div>
<div class="code-name">#icon-shuoming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zanting"></use>
</svg>
<div class="name">暂停</div>
<div class="code-name">#icon-zanting</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoucang"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icon-shoucang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantoushang"></use>
</svg>
<div class="name">箭头 上</div>
<div class="code-name">#icon-jiantoushang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantouyou"></use>
</svg>
<div class="name">箭头 右</div>
<div class="code-name">#icon-jiantouyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantouxia"></use>
</svg>
<div class="name">箭头 下</div>
<div class="code-name">#icon-jiantouxia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-saoyisao"></use>
</svg>
<div class="name">扫一扫</div>
<div class="code-name">#icon-saoyisao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wode"></use>
</svg>
<div class="name">我的</div>
<div class="code-name">#icon-wode</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouye"></use>
</svg>
<div class="name">首页</div>
<div class="code-name">#icon-shouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei"></use>
</svg>
<div class="name">分类</div>
<div class="code-name">#icon-fenlei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tixin"></use>
</svg>
<div class="name">消息</div>
<div class="code-name">#icon-tixin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhiding"></use>
</svg>
<div class="name">置顶</div>
<div class="code-name">#icon-zhiding</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanzhong"></use>
</svg>
<div class="name">选中</div>
<div class="code-name">#icon-xuanzhong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tabguanbi"></use>
</svg>
<div class="name">tab角标</div>
<div class="code-name">#icon-tabguanbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guanyanren"></use>
</svg>
<div class="name">观演人</div>
<div class="code-name">#icon-guanyanren</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingyue"></use>
</svg>
<div class="name">订阅</div>
<div class="code-name">#icon-dingyue</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dizhiguanli"></use>
</svg>
<div class="name">地址管理</div>
<div class="code-name">#icon-dizhiguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daifukuan"></use>
</svg>
<div class="name">待付款</div>
<div class="code-name">#icon-daifukuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daishouhuo"></use>
</svg>
<div class="name">待收货</div>
<div class="code-name">#icon-daishouhuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huiyuan"></use>
</svg>
<div class="name">会员</div>
<div class="code-name">#icon-huiyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weishiyong"></use>
</svg>
<div class="name">未使用</div>
<div class="code-name">#icon-weishiyong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pingjia"></use>
</svg>
<div class="name">评价</div>
<div class="code-name">#icon-pingjia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qiandao"></use>
</svg>
<div class="name">签到</div>
<div class="code-name">#icon-qiandao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yanchurili"></use>
</svg>
<div class="name">演出日历</div>
<div class="code-name">#icon-yanchurili</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-changyonggoupiaorenbianji"></use>
</svg>
<div class="name">常用购票人／编辑32</div>
<div class="code-name">#icon-changyonggoupiaorenbianji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-changyonggoupiaorenshanchu"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#icon-changyonggoupiaorenshanchu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingdan"></use>
</svg>
<div class="name">订单</div>
<div class="code-name">#icon-dingdan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiajianzujianjiahao"></use>
</svg>
<div class="name">加减组件 加号</div>
<div class="code-name">#icon-jiajianzujianjiahao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huanyihuan"></use>
</svg>
<div class="name">换一换</div>
<div class="code-name">#icon-huanyihuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-time"></use>
</svg>
<div class="name">time</div>
<div class="code-name">#icon-time</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shimingrenzheng"></use>
</svg>
<div class="name">实名认证</div>
<div class="code-name">#icon-shimingrenzheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-alipay"></use>
</svg>
<div class="name">alipay</div>
<div class="code-name">#icon-alipay</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bianxie"></use>
</svg>
<div class="name">编写</div>
<div class="code-name">#icon-bianxie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wifi"></use>
</svg>
<div class="name">wifi</div>
<div class="code-name">#icon-wifi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chengshihehuoren"></use>
</svg>
<div class="name">城市合伙人</div>
<div class="code-name">#icon-chengshihehuoren</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-cuowu"></use>
</svg>
<div class="name">错误</div>
<div class="code-name">#icon-cuowu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dfk"></use>
</svg>
<div class="name">待付款</div>
<div class="code-name">#icon-dfk</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daituihuo"></use>
</svg>
<div class="name">待退货</div>
<div class="code-name">#icon-daituihuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dizhi"></use>
</svg>
<div class="name">地址</div>
<div class="code-name">#icon-dizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#icon-dianhua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingwei"></use>
</svg>
<div class="name">定位</div>
<div class="code-name">#icon-dingwei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duihao"></use>
</svg>
<div class="name">对号</div>
<div class="code-name">#icon-duihao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fapiaoxinxi"></use>
</svg>
<div class="name">发票信息</div>
<div class="code-name">#icon-fapiaoxinxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxiangr"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#icon-fenxiangr</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gonggao"></use>
</svg>
<div class="name">公告</div>
<div class="code-name">#icon-gonggao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mima"></use>
</svg>
<div class="name">密码</div>
<div class="code-name">#icon-mima</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-lingshoucaigou"></use>
</svg>
<div class="name">零售采购</div>
<div class="code-name">#icon-lingshoucaigou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wo"></use>
</svg>
<div class="name">我</div>
<div class="code-name">#icon-wo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shanchu"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#icon-shanchu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-rili"></use>
</svg>
<div class="name">日历</div>
<div class="code-name">#icon-rili</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shangjia"></use>
</svg>
<div class="name">商家</div>
<div class="code-name">#icon-shangjia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qunliao"></use>
</svg>
<div class="name">群聊</div>
<div class="code-name">#icon-qunliao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shezhi"></use>
</svg>
<div class="name">设置</div>
<div class="code-name">#icon-shezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
<div class="name">搜索1</div>
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiajiantou"></use>
</svg>
<div class="name">下箭头</div>
<div class="code-name">#icon-xiajiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wodeyeji"></use>
</svg>
<div class="name">我的业绩</div>
<div class="code-name">#icon-wodeyeji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiaoxi"></use>
</svg>
<div class="name">消息</div>
<div class="code-name">#icon-xiaoxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinjiandizhi"></use>
</svg>
<div class="name">新建地址</div>
<div class="code-name">#icon-xinjiandizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinwen"></use>
</svg>
<div class="name">新闻</div>
<div class="code-name">#icon-xinwen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinzengshangpin"></use>
</svg>
<div class="name">新增商品</div>
<div class="code-name">#icon-xinzengshangpin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinle"></use>
</svg>
<div class="name">音乐</div>
<div class="code-name">#icon-yinle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zaixianxunjia"></use>
</svg>
<div class="name">在线询价</div>
<div class="code-name">#icon-zaixianxunjia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuojiantou"></use>
</svg>
<div class="name">左箭头</div>
<div class="code-name">#icon-zuojiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qianbao"></use>
</svg>
<div class="name">钱包</div>
<div class="code-name">#icon-qianbao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongyingshang"></use>
</svg>
<div class="name">供应商</div>
<div class="code-name">#icon-gongyingshang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhanghuguanli"></use>
</svg>
<div class="name">账户管理</div>
<div class="code-name">#icon-zhanghuguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guanbi"></use>
</svg>
<div class="name">关 闭</div>
<div class="code-name">#icon-guanbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhibofuwu"></use>
</svg>
<div class="name">直播服务</div>
<div class="code-name">#icon-zhibofuwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoucang1"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icon-shoucang1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-reload"></use>
</svg>
<div class="name">reload</div>
<div class="code-name">#icon-reload</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qq_empty"></use>
</svg>
<div class="name">qq_empty</div>
<div class="code-name">#icon-qq_empty</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ticket_sub"></use>
</svg>
<div class="name">ticket_sub</div>
<div class="code-name">#icon-ticket_sub</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weixin_empty"></use>
</svg>
<div class="name">weixin_empty</div>
<div class="code-name">#icon-weixin_empty</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-banbenhao"></use>
</svg>
<div class="name">版本号</div>
<div class="code-name">#icon-banbenhao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qrcode"></use>
</svg>
<div class="name">扫一扫</div>
<div class="code-name">#icon-qrcode</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhifupingtai-yinlian"></use>
</svg>
<div class="name">支付平台-银联</div>
<div class="code-name">#icon-zhifupingtai-yinlian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-banfa"></use>
</svg>
<div class="name">33颁发</div>
<div class="code-name">#icon-banfa</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-diqiu"></use>
</svg>
<div class="name">地球</div>
<div class="code-name">#icon-diqiu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huizhang"></use>
</svg>
<div class="name">徽章</div>
<div class="code-name">#icon-huizhang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kefu"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#icon-kefu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou"></use>
</svg>
<div class="name">箭头</div>
<div class="code-name">#icon-jiantou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianzan"></use>
</svg>
<div class="name">点赞</div>
<div class="code-name">#icon-dianzan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huodongguanli"></use>
</svg>
<div class="name">活动管理</div>
<div class="code-name">#icon-huodongguanli</div>
</li>
</ul>
<div class="article markdown">
<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="language-html"><script src="./iconfont.js"></script>
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html"><style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>