<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.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=1097833" 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">点赞</div>
<div class="code-name">&#xe683;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">锁</div>
<div class="code-name">&#xe6a8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">timeout</div>
<div class="code-name">&#xe6a2;</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">&#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">28体积、空间</div>
<div class="code-name">&#xe89f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">204首页</div>
<div class="code-name">&#xe8b9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">224用户</div>
<div class="code-name">&#xe8c8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">all</div>
<div class="code-name">&#xe6ef;</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">&#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">闹钟</div>
<div class="code-name">&#xe685;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">gengduo</div>
<div class="code-name">&#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">alipay</div>
<div class="code-name">&#xe684;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">朋友圈icon</div>
<div class="code-name">&#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">引导箭头</div>
<div class="code-name">&#xe72e;</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">&#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">&#xe67e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">企业</div>
<div class="code-name">&#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">25-竞赛</div>
<div class="code-name">&#xe67f;</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">我的-纯色</div>
<div class="code-name">&#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">我的-线性</div>
<div class="code-name">&#xe666;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">学习-线性</div>
<div class="code-name">&#xe665;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">学习-纯色</div>
<div class="code-name">&#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分类-纯色</div>
<div class="code-name">&#xe678;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分类-线性</div>
<div class="code-name">&#xe677;</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">&#xe66f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">密码</div>
<div class="code-name">&#xe6cd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机</div>
<div class="code-name">&#xe66d;</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">眼睛</div>
<div class="code-name">&#xe667;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">眼睛</div>
<div class="code-name">&#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">点赞</div>
<div class="code-name">&#xec7f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">点赞_块</div>
<div class="code-name">&#xec8c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">花呗</div>
<div class="code-name">&#xe78c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">微信支付</div>
<div class="code-name">&#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">薯条</div>
<div class="code-name">&#xe675;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">冰箱</div>
<div class="code-name">&#xe674;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">耳机</div>
<div class="code-name">&#xe65f;</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">&#xe63c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">茶</div>
<div class="code-name">&#xe67a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">拉面</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">&#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">搜索</div>
<div class="code-name">&#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">消息</div>
<div class="code-name">&#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">错误</div>
<div class="code-name">&#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除</div>
<div class="code-name">&#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加</div>
<div class="code-name">&#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">设置</div>
<div class="code-name">&#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提醒</div>
<div class="code-name">&#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向右</div>
<div class="code-name">&#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">个人中心</div>
<div class="code-name">&#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向下</div>
<div class="code-name">&#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">左</div>
<div class="code-name">&#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">右</div>
<div class="code-name">&#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">右</div>
<div class="code-name">&#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">后退</div>
<div class="code-name">&#xe614;</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">向上</div>
<div class="code-name">&#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">列表</div>
<div class="code-name">&#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">扫描</div>
<div class="code-name">&#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">个人中心</div>
<div class="code-name">&#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">时间</div>
<div class="code-name">&#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">问题</div>
<div class="code-name">&#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">暂停</div>
<div class="code-name">&#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">清单</div>
<div class="code-name">&#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">交换</div>
<div class="code-name">&#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">输入</div>
<div class="code-name">&#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">日期</div>
<div class="code-name">&#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">下载</div>
<div class="code-name">&#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">输出</div>
<div class="code-name">&#xe623;</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">&#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">客服</div>
<div class="code-name">&#xe626;</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">&#xe630;</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">&#xe638;</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">笑脸</div>
<div class="code-name">&#xe63b;</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">文档</div>
<div class="code-name">&#xe63e;</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">&#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">上一页</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">&#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">暂停</div>
<div class="code-name">&#xe64d;</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">&#xe64f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">退出</div>
<div class="code-name">&#xe651;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">错误</div>
<div class="code-name">&#xe652;</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">向下</div>
<div class="code-name">&#xe654;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向上</div>
<div class="code-name">&#xe655;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除</div>
<div class="code-name">&#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向左</div>
<div class="code-name">&#xe657;</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">&#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">删除</div>
<div class="code-name">&#xe65a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提示</div>
<div class="code-name">&#xe65b;</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">右箭头</div>
<div class="code-name">&#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">左箭头</div>
<div class="code-name">&#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">表情</div>
<div class="code-name">&#xe660;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">表情</div>
<div class="code-name">&#xe661;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe663;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe664;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">下一个</div>
<div class="code-name">&#xe66a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">上一个</div>
<div class="code-name">&#xe66b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">消息</div>
<div class="code-name">&#xe66c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">无线wifi</div>
<div class="code-name">&#xe670;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">静音</div>
<div class="code-name">&#xe671;</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">&#xe676;</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 icondianzan1"></span>
<div class="name">
点赞
</div>
<div class="code-name">.icondianzan1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconRectangleCopy1"></span>
<div class="name">
锁
</div>
<div class="code-name">.iconRectangleCopy1
</div>
</li>
<li class="dib">
<span class="icon iconfont icontimeout"></span>
<div class="name">
timeout
</div>
<div class="code-name">.icontimeout
</div>
</li>
<li class="dib">
<span class="icon iconfont iconRectangleCopy"></span>
<div class="name">
完成
</div>
<div class="code-name">.iconRectangleCopy
</div>
</li>
<li class="dib">
<span class="icon iconfont iconRectangleCopy4"></span>
<div class="name">
用户
</div>
<div class="code-name">.iconRectangleCopy4
</div>
</li>
<li class="dib">
<span class="icon iconfont icontijikongjian"></span>
<div class="name">
28体积、空间
</div>
<div class="code-name">.icontijikongjian
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouye"></span>
<div class="name">
204首页
</div>
<div class="code-name">.iconshouye
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyonghu"></span>
<div class="name">
224用户
</div>
<div class="code-name">.iconyonghu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconall"></span>
<div class="name">
all
</div>
<div class="code-name">.iconall
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbofangyedianzan"></span>
<div class="name">
播放页点赞
</div>
<div class="code-name">.iconbofangyedianzan
</div>
</li>
<li class="dib">
<span class="icon iconfont iconbofang"></span>
<div class="name">
播放
</div>
<div class="code-name">.iconbofang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon04"></span>
<div class="name">
闹钟
</div>
<div class="code-name">.icon04
</div>
</li>
<li class="dib">
<span class="icon iconfont icongengduo"></span>
<div class="name">
gengduo
</div>
<div class="code-name">.icongengduo
</div>
</li>
<li class="dib">
<span class="icon iconfont iconalipay"></span>
<div class="name">
alipay
</div>
<div class="code-name">.iconalipay
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpengyouquaniconx"></span>
<div class="name">
朋友圈icon
</div>
<div class="code-name">.iconpengyouquaniconx
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyindao"></span>
<div class="name">
引导箭头
</div>
<div class="code-name">.iconyindao
</div>
</li>
<li class="dib">
<span class="icon iconfont iconss_empty"></span>
<div class="name">
空状态
</div>
<div class="code-name">.iconss_empty
</div>
</li>
<li class="dib">
<span class="icon iconfont iconcelluar"></span>
<div class="name">
正在直播
</div>
<div class="code-name">.iconcelluar
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhanghu_jiangjin"></span>
<div class="name">
账户_奖金
</div>
<div class="code-name">.iconzhanghu_jiangjin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhaopin"></span>
<div class="name">
招聘
</div>
<div class="code-name">.iconzhaopin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconqiye1"></span>
<div class="name">
企业
</div>
<div class="code-name">.iconqiye1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jingsai"></span>
<div class="name">
25-竞赛
</div>
<div class="code-name">.icon-jingsai
</div>
</li>
<li class="dib">
<span class="icon iconfont icongouwuche-xianxing"></span>
<div class="name">
购物车-线性
</div>
<div class="code-name">.icongouwuche-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwode-chunse"></span>
<div class="name">
我的-纯色
</div>
<div class="code-name">.iconwode-chunse
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwode-xianxing"></span>
<div class="name">
我的-线性
</div>
<div class="code-name">.iconwode-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxuexi-xianxing"></span>
<div class="name">
学习-线性
</div>
<div class="code-name">.iconxuexi-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconxuexi-chunse"></span>
<div class="name">
学习-纯色
</div>
<div class="code-name">.iconxuexi-chunse
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfenlei-chunse"></span>
<div class="name">
分类-纯色
</div>
<div class="code-name">.iconfenlei-chunse
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfenlei-xianxing"></span>
<div class="name">
分类-线性
</div>
<div class="code-name">.iconfenlei-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouye-xianxing"></span>
<div class="name">
首页-线性
</div>
<div class="code-name">.iconshouye-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouye1"></span>
<div class="name">
首页
</div>
<div class="code-name">.iconshouye1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconmima"></span>
<div class="name">
密码
</div>
<div class="code-name">.iconmima
</div>
</li>
<li class="dib">
<span class="icon iconfont iconshouji"></span>
<div class="name">
手机
</div>
<div class="code-name">.iconshouji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconduanxin"></span>
<div class="name">
短信
</div>
<div class="code-name">.iconduanxin
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyanjing"></span>
<div class="name">
眼睛
</div>
<div class="code-name">.iconyanjing
</div>
</li>
<li class="dib">
<span class="icon iconfont iconpwd-hidden"></span>
<div class="name">
眼睛
</div>
<div class="code-name">.iconpwd-hidden
</div>
</li>
<li class="dib">
<span class="icon iconfont icondianzan"></span>
<div class="name">
点赞
</div>
<div class="code-name">.icondianzan
</div>
</li>
<li class="dib">
<span class="icon iconfont icondianzan_kuai"></span>
<div class="name">
点赞_块
</div>
<div class="code-name">.icondianzan_kuai
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhuabei"></span>
<div class="name">
花呗
</div>
<div class="code-name">.iconhuabei
</div>
</li>
<li class="dib">
<span class="icon iconfont iconweixinzhifu"></span>
<div class="name">
微信支付
</div>
<div class="code-name">.iconweixinzhifu
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfrench_fries"></span>
<div class="name">
薯条
</div>
<div class="code-name">.iconfrench_fries
</div>
</li>
<li class="dib">
<span class="icon iconfont iconfridge"></span>
<div class="name">
冰箱
</div>
<div class="code-name">.iconfridge
</div>
</li>
<li class="dib">
<span class="icon iconfont iconerji"></span>
<div class="name">
耳机
</div>
<div class="code-name">.iconerji
</div>
</li>
<li class="dib">
<span class="icon iconfont iconremen"></span>
<div class="name">
热门
</div>
<div class="code-name">.iconremen
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyouhuiquan"></span>
<div class="name">
优惠券
</div>
<div class="code-name">.iconyouhuiquan
</div>
</li>
<li class="dib">
<span class="icon iconfont icontea"></span>
<div class="name">
茶
</div>
<div class="code-name">.icontea
</div>
</li>
<li class="dib">
<span class="icon iconfont iconramen"></span>
<div class="name">
拉面
</div>
<div class="code-name">.iconramen
</div>
</li>
<li class="dib">
<span class="icon iconfont iconhoney"></span>
<div class="name">
蜂蜜
</div>
<div class="code-name">.iconhoney
</div>
</li>
<li class="dib">
<span class="icon iconfont iconzhong"></span>
<div class="name">
闹钟
</div>
<div class="code-name">.iconzhong
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-"></span>
<div class="name">
搜索
</div>
<div class="code-name">.iconiconfront-
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-1"></span>
<div class="name">
消息
</div>
<div class="code-name">.iconiconfront-1
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-2"></span>
<div class="name">
错误
</div>
<div class="code-name">.iconiconfront-2
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-4"></span>
<div class="name">
收藏
</div>
<div class="code-name">.iconiconfront-4
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-5"></span>
<div class="name">
删除
</div>
<div class="code-name">.iconiconfront-5
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-6"></span>
<div class="name">
添加
</div>
<div class="code-name">.iconiconfront-6
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-7"></span>
<div class="name">
设置
</div>
<div class="code-name">.iconiconfront-7
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-8"></span>
<div class="name">
提醒
</div>
<div class="code-name">.iconiconfront-8
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-9"></span>
<div class="name">
向右
</div>
<div class="code-name">.iconiconfront-9
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-10"></span>
<div class="name">
个人中心
</div>
<div class="code-name">.iconiconfront-10
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-11"></span>
<div class="name">
向下
</div>
<div class="code-name">.iconiconfront-11
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-12"></span>
<div class="name">
左
</div>
<div class="code-name">.iconiconfront-12
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-13"></span>
<div class="name">
右
</div>
<div class="code-name">.iconiconfront-13
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-14"></span>
<div class="name">
右
</div>
<div class="code-name">.iconiconfront-14
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-15"></span>
<div class="name">
后退
</div>
<div class="code-name">.iconiconfront-15
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-16"></span>
<div class="name">
功能
</div>
<div class="code-name">.iconiconfront-16
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-17"></span>
<div class="name">
向上
</div>
<div class="code-name">.iconiconfront-17
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-18"></span>
<div class="name">
列表
</div>
<div class="code-name">.iconiconfront-18
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-19"></span>
<div class="name">
扫描
</div>
<div class="code-name">.iconiconfront-19
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-20"></span>
<div class="name">
个人中心
</div>
<div class="code-name">.iconiconfront-20
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-21"></span>
<div class="name">
时间
</div>
<div class="code-name">.iconiconfront-21
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-22"></span>
<div class="name">
问题
</div>
<div class="code-name">.iconiconfront-22
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-23"></span>
<div class="name">
暂停
</div>
<div class="code-name">.iconiconfront-23
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-24"></span>
<div class="name">
清单
</div>
<div class="code-name">.iconiconfront-24
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-25"></span>
<div class="name">
交换
</div>
<div class="code-name">.iconiconfront-25
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-26"></span>
<div class="name">
输入
</div>
<div class="code-name">.iconiconfront-26
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-27"></span>
<div class="name">
日期
</div>
<div class="code-name">.iconiconfront-27
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-28"></span>
<div class="name">
收藏
</div>
<div class="code-name">.iconiconfront-28
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-29"></span>
<div class="name">
下载
</div>
<div class="code-name">.iconiconfront-29
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-30"></span>
<div class="name">
输出
</div>
<div class="code-name">.iconiconfront-30
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-31"></span>
<div class="name">
上传
</div>
<div class="code-name">.iconiconfront-31
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-32"></span>
<div class="name">
刷新
</div>
<div class="code-name">.iconiconfront-32
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-33"></span>
<div class="name">
客服
</div>
<div class="code-name">.iconiconfront-33
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-34"></span>
<div class="name">
记事本
</div>
<div class="code-name">.iconiconfront-34
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-35"></span>
<div class="name">
下一页
</div>
<div class="code-name">.iconiconfront-35
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-36"></span>
<div class="name">
返回
</div>
<div class="code-name">.iconiconfront-36
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-37"></span>
<div class="name">
无线
</div>
<div class="code-name">.iconiconfront-37
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-38"></span>
<div class="name">
放大
</div>
<div class="code-name">.iconiconfront-38
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-39"></span>
<div class="name">
音量
</div>
<div class="code-name">.iconiconfront-39
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-40"></span>
<div class="name">
扩大
</div>
<div class="code-name">.iconiconfront-40
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-41"></span>
<div class="name">
静音
</div>
<div class="code-name">.iconiconfront-41
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-42"></span>
<div class="name">
写
</div>
<div class="code-name">.iconiconfront-42
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-43"></span>
<div class="name">
往左
</div>
<div class="code-name">.iconiconfront-43
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-44"></span>
<div class="name">
收缩
</div>
<div class="code-name">.iconiconfront-44
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-45"></span>
<div class="name">
循环
</div>
<div class="code-name">.iconiconfront-45
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-46"></span>
<div class="name">
左
</div>
<div class="code-name">.iconiconfront-46
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-47"></span>
<div class="name">
标签
</div>
<div class="code-name">.iconiconfront-47
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-48"></span>
<div class="name">
商铺
</div>
<div class="code-name">.iconiconfront-48
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-49"></span>
<div class="name">
红包
</div>
<div class="code-name">.iconiconfront-49
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-50"></span>
<div class="name">
位置
</div>
<div class="code-name">.iconiconfront-50
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-51"></span>
<div class="name">
休息
</div>
<div class="code-name">.iconiconfront-51
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-52"></span>
<div class="name">
礼物
</div>
<div class="code-name">.iconiconfront-52
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-53"></span>
<div class="name">
二维码
</div>
<div class="code-name">.iconiconfront-53
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-54"></span>
<div class="name">
笑脸
</div>
<div class="code-name">.iconiconfront-54
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-56"></span>
<div class="name">
垃圾桶
</div>
<div class="code-name">.iconiconfront-56
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-57"></span>
<div class="name">
文档
</div>
<div class="code-name">.iconiconfront-57
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-58"></span>
<div class="name">
安全
</div>
<div class="code-name">.iconiconfront-58
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-59"></span>
<div class="name">
文件搜索
</div>
<div class="code-name">.iconiconfront-59
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-60"></span>
<div class="name">
表情
</div>
<div class="code-name">.iconiconfront-60
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-63"></span>
<div class="name">
列表
</div>
<div class="code-name">.iconiconfront-63
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-64"></span>
<div class="name">
文档设置
</div>
<div class="code-name">.iconiconfront-64
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-65"></span>
<div class="name">
添加
</div>
<div class="code-name">.iconiconfront-65
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-66"></span>
<div class="name">
减少
</div>
<div class="code-name">.iconiconfront-66
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-67"></span>
<div class="name">
禁用
</div>
<div class="code-name">.iconiconfront-67
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-68"></span>
<div class="name">
上一页
</div>
<div class="code-name">.iconiconfront-68
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-69"></span>
<div class="name">
向下
</div>
<div class="code-name">.iconiconfront-69
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-70"></span>
<div class="name">
下一页
</div>
<div class="code-name">.iconiconfront-70
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-71"></span>
<div class="name">
向上
</div>
<div class="code-name">.iconiconfront-71
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-72"></span>
<div class="name">
暂停
</div>
<div class="code-name">.iconiconfront-72
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-73"></span>
<div class="name">
正确
</div>
<div class="code-name">.iconiconfront-73
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-74"></span>
<div class="name">
锁
</div>
<div class="code-name">.iconiconfront-74
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-76"></span>
<div class="name">
退出
</div>
<div class="code-name">.iconiconfront-76
</div>
</li>
<li class="dib">
<span class="icon iconfont iconiconfront-77"></span>
<div class="name">
错误
</div>
<div class="code-name">.iconiconfront-77
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-"></span>
<div class="name">
向右
</div>
<div class="code-name">.icondanseshixintubiao-
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-1"></span>
<div class="name">
向下
</div>
<div class="code-name">.icondanseshixintubiao-1
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-2"></span>
<div class="name">
向上
</div>
<div class="code-name">.icondanseshixintubiao-2
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-3"></span>
<div class="name">
删除
</div>
<div class="code-name">.icondanseshixintubiao-3
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-4"></span>
<div class="name">
向左
</div>
<div class="code-name">.icondanseshixintubiao-4
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-5"></span>
<div class="name">
正确
</div>
<div class="code-name">.icondanseshixintubiao-5
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-6"></span>
<div class="name">
添加
</div>
<div class="code-name">.icondanseshixintubiao-6
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-7"></span>
<div class="name">
删除
</div>
<div class="code-name">.icondanseshixintubiao-7
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-8"></span>
<div class="name">
提示
</div>
<div class="code-name">.icondanseshixintubiao-8
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-9"></span>
<div class="name">
暂停
</div>
<div class="code-name">.icondanseshixintubiao-9
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-10"></span>
<div class="name">
右箭头
</div>
<div class="code-name">.icondanseshixintubiao-10
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-11"></span>
<div class="name">
左箭头
</div>
<div class="code-name">.icondanseshixintubiao-11
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-13"></span>
<div class="name">
表情
</div>
<div class="code-name">.icondanseshixintubiao-13
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-14"></span>
<div class="name">
表情
</div>
<div class="code-name">.icondanseshixintubiao-14
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-16"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icondanseshixintubiao-16
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-17"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icondanseshixintubiao-17
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-23"></span>
<div class="name">
下一个
</div>
<div class="code-name">.icondanseshixintubiao-23
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-24"></span>
<div class="name">
上一个
</div>
<div class="code-name">.icondanseshixintubiao-24
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-25"></span>
<div class="name">
消息
</div>
<div class="code-name">.icondanseshixintubiao-25
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-29"></span>
<div class="name">
无线wifi
</div>
<div class="code-name">.icondanseshixintubiao-29
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-30"></span>
<div class="name">
静音
</div>
<div class="code-name">.icondanseshixintubiao-30
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-32"></span>
<div class="name">
音量
</div>
<div class="code-name">.icondanseshixintubiao-32
</div>
</li>
<li class="dib">
<span class="icon iconfont icondanseshixintubiao-35"></span>
<div class="name">
二维码
</div>
<div class="code-name">.icondanseshixintubiao-35
</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 iconxxx"></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="#icondianzan1"></use>
</svg>
<div class="name">点赞</div>
<div class="code-name">#icondianzan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconRectangleCopy1"></use>
</svg>
<div class="name">锁</div>
<div class="code-name">#iconRectangleCopy1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontimeout"></use>
</svg>
<div class="name">timeout</div>
<div class="code-name">#icontimeout</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconRectangleCopy"></use>
</svg>
<div class="name">完成</div>
<div class="code-name">#iconRectangleCopy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconRectangleCopy4"></use>
</svg>
<div class="name">用户</div>
<div class="code-name">#iconRectangleCopy4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontijikongjian"></use>
</svg>
<div class="name">28体积、空间</div>
<div class="code-name">#icontijikongjian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouye"></use>
</svg>
<div class="name">204首页</div>
<div class="code-name">#iconshouye</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyonghu"></use>
</svg>
<div class="name">224用户</div>
<div class="code-name">#iconyonghu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconall"></use>
</svg>
<div class="name">all</div>
<div class="code-name">#iconall</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbofangyedianzan"></use>
</svg>
<div class="name">播放页点赞</div>
<div class="code-name">#iconbofangyedianzan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconbofang"></use>
</svg>
<div class="name">播放</div>
<div class="code-name">#iconbofang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon04"></use>
</svg>
<div class="name">闹钟</div>
<div class="code-name">#icon04</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icongengduo"></use>
</svg>
<div class="name">gengduo</div>
<div class="code-name">#icongengduo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconalipay"></use>
</svg>
<div class="name">alipay</div>
<div class="code-name">#iconalipay</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpengyouquaniconx"></use>
</svg>
<div class="name">朋友圈icon</div>
<div class="code-name">#iconpengyouquaniconx</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyindao"></use>
</svg>
<div class="name">引导箭头</div>
<div class="code-name">#iconyindao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconss_empty"></use>
</svg>
<div class="name">空状态</div>
<div class="code-name">#iconss_empty</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconcelluar"></use>
</svg>
<div class="name">正在直播</div>
<div class="code-name">#iconcelluar</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhanghu_jiangjin"></use>
</svg>
<div class="name">账户_奖金</div>
<div class="code-name">#iconzhanghu_jiangjin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhaopin"></use>
</svg>
<div class="name">招聘</div>
<div class="code-name">#iconzhaopin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconqiye1"></use>
</svg>
<div class="name">企业</div>
<div class="code-name">#iconqiye1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jingsai"></use>
</svg>
<div class="name">25-竞赛</div>
<div class="code-name">#icon-jingsai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icongouwuche-xianxing"></use>
</svg>
<div class="name">购物车-线性</div>
<div class="code-name">#icongouwuche-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwode-chunse"></use>
</svg>
<div class="name">我的-纯色</div>
<div class="code-name">#iconwode-chunse</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwode-xianxing"></use>
</svg>
<div class="name">我的-线性</div>
<div class="code-name">#iconwode-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxuexi-xianxing"></use>
</svg>
<div class="name">学习-线性</div>
<div class="code-name">#iconxuexi-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconxuexi-chunse"></use>
</svg>
<div class="name">学习-纯色</div>
<div class="code-name">#iconxuexi-chunse</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfenlei-chunse"></use>
</svg>
<div class="name">分类-纯色</div>
<div class="code-name">#iconfenlei-chunse</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfenlei-xianxing"></use>
</svg>
<div class="name">分类-线性</div>
<div class="code-name">#iconfenlei-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouye-xianxing"></use>
</svg>
<div class="name">首页-线性</div>
<div class="code-name">#iconshouye-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouye1"></use>
</svg>
<div class="name">首页</div>
<div class="code-name">#iconshouye1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconmima"></use>
</svg>
<div class="name">密码</div>
<div class="code-name">#iconmima</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconshouji"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#iconshouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconduanxin"></use>
</svg>
<div class="name">短信</div>
<div class="code-name">#iconduanxin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyanjing"></use>
</svg>
<div class="name">眼睛</div>
<div class="code-name">#iconyanjing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconpwd-hidden"></use>
</svg>
<div class="name">眼睛</div>
<div class="code-name">#iconpwd-hidden</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondianzan"></use>
</svg>
<div class="name">点赞</div>
<div class="code-name">#icondianzan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondianzan_kuai"></use>
</svg>
<div class="name">点赞_块</div>
<div class="code-name">#icondianzan_kuai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhuabei"></use>
</svg>
<div class="name">花呗</div>
<div class="code-name">#iconhuabei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconweixinzhifu"></use>
</svg>
<div class="name">微信支付</div>
<div class="code-name">#iconweixinzhifu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfrench_fries"></use>
</svg>
<div class="name">薯条</div>
<div class="code-name">#iconfrench_fries</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconfridge"></use>
</svg>
<div class="name">冰箱</div>
<div class="code-name">#iconfridge</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconerji"></use>
</svg>
<div class="name">耳机</div>
<div class="code-name">#iconerji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconremen"></use>
</svg>
<div class="name">热门</div>
<div class="code-name">#iconremen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyouhuiquan"></use>
</svg>
<div class="name">优惠券</div>
<div class="code-name">#iconyouhuiquan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icontea"></use>
</svg>
<div class="name">茶</div>
<div class="code-name">#icontea</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconramen"></use>
</svg>
<div class="name">拉面</div>
<div class="code-name">#iconramen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconhoney"></use>
</svg>
<div class="name">蜂蜜</div>
<div class="code-name">#iconhoney</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhong"></use>
</svg>
<div class="name">闹钟</div>
<div class="code-name">#iconzhong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#iconiconfront-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-1"></use>
</svg>
<div class="name">消息</div>
<div class="code-name">#iconiconfront-1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-2"></use>
</svg>
<div class="name">错误</div>
<div class="code-name">#iconiconfront-2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-4"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#iconiconfront-4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-5"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#iconiconfront-5</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-6"></use>
</svg>
<div class="name">添加</div>
<div class="code-name">#iconiconfront-6</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-7"></use>
</svg>
<div class="name">设置</div>
<div class="code-name">#iconiconfront-7</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-8"></use>
</svg>
<div class="name">提醒</div>
<div class="code-name">#iconiconfront-8</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-9"></use>
</svg>
<div class="name">向右</div>
<div class="code-name">#iconiconfront-9</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-10"></use>
</svg>
<div class="name">个人中心</div>
<div class="code-name">#iconiconfront-10</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-11"></use>
</svg>
<div class="name">向下</div>
<div class="code-name">#iconiconfront-11</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-12"></use>
</svg>
<div class="name">左</div>
<div class="code-name">#iconiconfront-12</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-13"></use>
</svg>
<div class="name">右</div>
<div class="code-name">#iconiconfront-13</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-14"></use>
</svg>
<div class="name">右</div>
<div class="code-name">#iconiconfront-14</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-15"></use>
</svg>
<div class="name">后退</div>
<div class="code-name">#iconiconfront-15</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-16"></use>
</svg>
<div class="name">功能</div>
<div class="code-name">#iconiconfront-16</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-17"></use>
</svg>
<div class="name">向上</div>
<div class="code-name">#iconiconfront-17</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-18"></use>
</svg>
<div class="name">列表</div>
<div class="code-name">#iconiconfront-18</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-19"></use>
</svg>
<div class="name">扫描</div>
<div class="code-name">#iconiconfront-19</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-20"></use>
</svg>
<div class="name">个人中心</div>
<div class="code-name">#iconiconfront-20</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-21"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#iconiconfront-21</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-22"></use>
</svg>
<div class="name">问题</div>
<div class="code-name">#iconiconfront-22</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-23"></use>
</svg>
<div class="name">暂停</div>
<div class="code-name">#iconiconfront-23</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-24"></use>
</svg>
<div class="name">清单</div>
<div class="code-name">#iconiconfront-24</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-25"></use>
</svg>
<div class="name">交换</div>
<div class="code-name">#iconiconfront-25</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-26"></use>
</svg>
<div class="name">输入</div>
<div class="code-name">#iconiconfront-26</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-27"></use>
</svg>
<div class="name">日期</div>
<div class="code-name">#iconiconfront-27</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-28"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#iconiconfront-28</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-29"></use>
</svg>
<div class="name">下载</div>
<div class="code-name">#iconiconfront-29</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-30"></use>
</svg>
<div class="name">输出</div>
<div class="code-name">#iconiconfront-30</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-31"></use>
</svg>
<div class="name">上传</div>
<div class="code-name">#iconiconfront-31</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-32"></use>
</svg>
<div class="name">刷新</div>
<div class="code-name">#iconiconfront-32</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-33"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#iconiconfront-33</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-34"></use>
</svg>
<div class="name">记事本</div>
<div class="code-name">#iconiconfront-34</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-35"></use>
</svg>
<div class="name">下一页</div>
<div class="code-name">#iconiconfront-35</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-36"></use>
</svg>
<div class="name">返回</div>
<div class="code-name">#iconiconfront-36</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-37"></use>
</svg>
<div class="name">无线</div>
<div class="code-name">#iconiconfront-37</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-38"></use>
</svg>
<div class="name">放大</div>
<div class="code-name">#iconiconfront-38</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-39"></use>
</svg>
<div class="name">音量</div>
<div class="code-name">#iconiconfront-39</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-40"></use>
</svg>
<div class="name">扩大</div>
<div class="code-name">#iconiconfront-40</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-41"></use>
</svg>
<div class="name">静音</div>
<div class="code-name">#iconiconfront-41</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-42"></use>
</svg>
<div class="name">写</div>
<div class="code-name">#iconiconfront-42</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-43"></use>
</svg>
<div class="name">往左</div>
<div class="code-name">#iconiconfront-43</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-44"></use>
</svg>
<div class="name">收缩</div>
<div class="code-name">#iconiconfront-44</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-45"></use>
</svg>
<div class="name">循环</div>
<div class="code-name">#iconiconfront-45</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-46"></use>
</svg>
<div class="name">左</div>
<div class="code-name">#iconiconfront-46</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-47"></use>
</svg>
<div class="name">标签</div>
<div class="code-name">#iconiconfront-47</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-48"></use>
</svg>
<div class="name">商铺</div>
<div class="code-name">#iconiconfront-48</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-49"></use>
</svg>
<div class="name">红包</div>
<div class="code-name">#iconiconfront-49</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-50"></use>
</svg>
<div class="name">位置</div>
<div class="code-name">#iconiconfront-50</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-51"></use>
</svg>
<div class="name">休息</div>
<div class="code-name">#iconiconfront-51</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-52"></use>
</svg>
<div class="name">礼物</div>
<div class="code-name">#iconiconfront-52</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-53"></use>
</svg>
<div class="name">二维码</div>
<div class="code-name">#iconiconfront-53</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-54"></use>
</svg>
<div class="name">笑脸</div>
<div class="code-name">#iconiconfront-54</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-56"></use>
</svg>
<div class="name">垃圾桶</div>
<div class="code-name">#iconiconfront-56</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-57"></use>
</svg>
<div class="name">文档</div>
<div class="code-name">#iconiconfront-57</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-58"></use>
</svg>
<div class="name">安全</div>
<div class="code-name">#iconiconfront-58</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-59"></use>
</svg>
<div class="name">文件搜索</div>
<div class="code-name">#iconiconfront-59</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-60"></use>
</svg>
<div class="name">表情</div>
<div class="code-name">#iconiconfront-60</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-63"></use>
</svg>
<div class="name">列表</div>
<div class="code-name">#iconiconfront-63</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-64"></use>
</svg>
<div class="name">文档设置</div>
<div class="code-name">#iconiconfront-64</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-65"></use>
</svg>
<div class="name">添加</div>
<div class="code-name">#iconiconfront-65</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-66"></use>
</svg>
<div class="name">减少</div>
<div class="code-name">#iconiconfront-66</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-67"></use>
</svg>
<div class="name">禁用</div>
<div class="code-name">#iconiconfront-67</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-68"></use>
</svg>
<div class="name">上一页</div>
<div class="code-name">#iconiconfront-68</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-69"></use>
</svg>
<div class="name">向下</div>
<div class="code-name">#iconiconfront-69</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-70"></use>
</svg>
<div class="name">下一页</div>
<div class="code-name">#iconiconfront-70</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-71"></use>
</svg>
<div class="name">向上</div>
<div class="code-name">#iconiconfront-71</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-72"></use>
</svg>
<div class="name">暂停</div>
<div class="code-name">#iconiconfront-72</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-73"></use>
</svg>
<div class="name">正确</div>
<div class="code-name">#iconiconfront-73</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-74"></use>
</svg>
<div class="name">锁</div>
<div class="code-name">#iconiconfront-74</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-76"></use>
</svg>
<div class="name">退出</div>
<div class="code-name">#iconiconfront-76</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconiconfront-77"></use>
</svg>
<div class="name">错误</div>
<div class="code-name">#iconiconfront-77</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-"></use>
</svg>
<div class="name">向右</div>
<div class="code-name">#icondanseshixintubiao-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-1"></use>
</svg>
<div class="name">向下</div>
<div class="code-name">#icondanseshixintubiao-1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-2"></use>
</svg>
<div class="name">向上</div>
<div class="code-name">#icondanseshixintubiao-2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-3"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#icondanseshixintubiao-3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-4"></use>
</svg>
<div class="name">向左</div>
<div class="code-name">#icondanseshixintubiao-4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-5"></use>
</svg>
<div class="name">正确</div>
<div class="code-name">#icondanseshixintubiao-5</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-6"></use>
</svg>
<div class="name">添加</div>
<div class="code-name">#icondanseshixintubiao-6</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-7"></use>
</svg>
<div class="name">删除</div>
<div class="code-name">#icondanseshixintubiao-7</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-8"></use>
</svg>
<div class="name">提示</div>
<div class="code-name">#icondanseshixintubiao-8</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-9"></use>
</svg>
<div class="name">暂停</div>
<div class="code-name">#icondanseshixintubiao-9</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-10"></use>
</svg>
<div class="name">右箭头</div>
<div class="code-name">#icondanseshixintubiao-10</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-11"></use>
</svg>
<div class="name">左箭头</div>
<div class="code-name">#icondanseshixintubiao-11</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-13"></use>
</svg>
<div class="name">表情</div>
<div class="code-name">#icondanseshixintubiao-13</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-14"></use>
</svg>
<div class="name">表情</div>
<div class="code-name">#icondanseshixintubiao-14</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-16"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icondanseshixintubiao-16</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-17"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icondanseshixintubiao-17</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-23"></use>
</svg>
<div class="name">下一个</div>
<div class="code-name">#icondanseshixintubiao-23</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-24"></use>
</svg>
<div class="name">上一个</div>
<div class="code-name">#icondanseshixintubiao-24</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-25"></use>
</svg>
<div class="name">消息</div>
<div class="code-name">#icondanseshixintubiao-25</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-29"></use>
</svg>
<div class="name">无线wifi</div>
<div class="code-name">#icondanseshixintubiao-29</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-30"></use>
</svg>
<div class="name">静音</div>
<div class="code-name">#icondanseshixintubiao-30</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-32"></use>
</svg>
<div class="name">音量</div>
<div class="code-name">#icondanseshixintubiao-32</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondanseshixintubiao-35"></use>
</svg>
<div class="name">二维码</div>
<div class="code-name">#icondanseshixintubiao-35</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>