File: /www/wwwroot/q.autos58.cn/wp-content/themes/kong20/css/fonts/demo_index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<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>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</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=4791951" 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">&#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">图片</div>
<div class="code-name">&#xe7b3;</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">&#xe633;</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">&#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">&#xe631;</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">&#xe7cb;</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">&#xe662;</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">&#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">域名</div>
<div class="code-name">&#xe744;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">安装</div>
<div class="code-name">&#xe70d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">bug</div>
<div class="code-name">&#xe628;</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">238图片</div>
<div class="code-name">&#xe8d3;</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">&#xe6cd;</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">&#xe678;</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">&#xe635;</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">&#xe636;</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">24gl-bubbles4</div>
<div class="code-name">&#xe93e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">24gl-bubblesDots4</div>
<div class="code-name">&#xe940;</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">消息点击</div>
<div class="code-name">&#xe634;</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">&#xe64a;</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">&#xe6c1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">圈圈门店-b</div>
<div class="code-name">&#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">圈2</div>
<div class="code-name">&#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">叉号</div>
<div class="code-name">&#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">叉号</div>
<div class="code-name">&#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分类1</div>
<div class="code-name">&#xe622;</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">&#xe7e9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">金币</div>
<div class="code-name">&#xe6c8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">3.1 评论</div>
<div class="code-name">&#xe61e;</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">&#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提醒</div>
<div class="code-name">&#xe716;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">提醒-填充</div>
<div class="code-name">&#xe717;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">scan</div>
<div class="code-name">&#xe7d4;</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">&#xe69d;</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">&#xe650;</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">&#xe618;</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">&#xe623;</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">&#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">月亮-fill</div>
<div class="code-name">&#xe6c0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">聊天</div>
<div class="code-name">&#xe75e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向上</div>
<div class="code-name">&#xe6d1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">箭头_页面_向上</div>
<div class="code-name">&#xeb0a;</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">down</div>
<div class="code-name">&#xe7eb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">arrow-right</div>
<div class="code-name">&#xe840;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">arrow-left</div>
<div class="code-name">&#xe841;</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">&#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">操作-上传-download</div>
<div class="code-name">&#xe68e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">符号-html</div>
<div class="code-name">&#xe6a0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">播放2</div>
<div class="code-name">&#xe87e;</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">&#xe908;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">layers</div>
<div class="code-name">&#xe675;</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">&#xe64d;</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">09安全、保障-线性</div>
<div class="code-name">&#xe88c;</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">&#xe88f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">设置</div>
<div class="code-name">&#xe892;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向上占行</div>
<div class="code-name">&#xec0b;</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">&#xe607;</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">&#xe90c;</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">&#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">春节</div>
<div class="code-name">&#xe899;</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">售后1</div>
<div class="code-name">&#xe69d;</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">alipay</div>
<div class="code-name">&#xe87c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">taobao</div>
<div class="code-name">&#xe87d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">aliwangwang</div>
<div class="code-name">&#xe87f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">QQ</div>
<div class="code-name">&#xe882;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">taobao-circle-fill</div>
<div class="code-name">&#xe88a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">weibo-circle-fill</div>
<div class="code-name">&#xe88b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">优惠券</div>
<div class="code-name">&#xe8c0;</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">&#xe785;</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">&#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">心</div>
<div class="code-name">&#xe711;</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">&#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">关闭</div>
<div class="code-name">&#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">wordpress</div>
<div class="code-name">&#xe73e;</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">&#xe608;</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">&#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分享</div>
<div class="code-name">&#xe72f;</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">unlike</div>
<div class="code-name">&#xe7c9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">heart</div>
<div class="code-name">&#xe7df;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">error</div>
<div class="code-name">&#xe7e0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">star</div>
<div class="code-name">&#xe7e1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">attachment</div>
<div class="code-name">&#xe7e2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">link</div>
<div class="code-name">&#xe7e3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">phone</div>
<div class="code-name">&#xe7e5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">shake</div>
<div class="code-name">&#xe7e6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">tag</div>
<div class="code-name">&#xe7e7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">tags</div>
<div class="code-name">&#xe7e8;</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">&#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">3.1首页-选中</div>
<div class="code-name">&#xe601;</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">&#xe660;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">IOS</div>
<div class="code-name">&#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">安卓</div>
<div class="code-name">&#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">401位置</div>
<div class="code-name">&#xe8ff;</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">&#xe632;</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">&#xe651;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">fire</div>
<div class="code-name">&#xe842;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">wechat-fill</div>
<div class="code-name">&#xe883;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">alipay-circle-fill</div>
<div class="code-name">&#xe884;</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">&#xe6a4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">眼睛</div>
<div class="code-name">&#xe6cc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">时间</div>
<div class="code-name">&#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">like</div>
<div class="code-name">&#xe7c8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">notification</div>
<div class="code-name">&#xe7da;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">sound</div>
<div class="code-name">&#xe7db;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">搜索</div>
<div class="code-name">&#xe8b9;</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">&#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">arrow_up</div>
<div class="code-name">&#xe658;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">arrow_left</div>
<div class="code-name">&#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">arrow_down</div>
<div class="code-name">&#xe65a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">arrow_right</div>
<div class="code-name">&#xe65b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">select</div>
<div class="code-name">&#xe67e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">add</div>
<div class="code-name">&#xe767;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">move</div>
<div class="code-name">&#xe768;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG 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.woff2?t=1736402392823') format('woff2'),
url('iconfont.woff?t=1736402392823') format('woff'),
url('iconfont.ttf?t=1736402392823') format('truetype');
}
</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-shipin3"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tupian1"></span>
<div class="name">
图片
</div>
<div class="code-name">.icon-tupian1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shipin4"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin4
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei1"></span>
<div class="name">
分类
</div>
<div class="code-name">.icon-fenlei1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei2"></span>
<div class="name">
分类
</div>
<div class="code-name">.icon-fenlei2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuijian"></span>
<div class="name">
推荐
</div>
<div class="code-name">.icon-tuijian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei3"></span>
<div class="name">
分类
</div>
<div class="code-name">.icon-fenlei3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo"></span>
<div class="name">
更多
</div>
<div class="code-name">.icon-gengduo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo4"></span>
<div class="name">
更多
</div>
<div class="code-name">.icon-gengduo4
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengxin1"></span>
<div class="name">
更新
</div>
<div class="code-name">.icon-gengxin1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengxin2"></span>
<div class="name">
更新
</div>
<div class="code-name">.icon-gengxin2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuanchuang"></span>
<div class="name">
原创
</div>
<div class="code-name">.icon-yuanchuang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengxin"></span>
<div class="name">
更新
</div>
<div class="code-name">.icon-gengxin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fuwu1"></span>
<div class="name">
服务
</div>
<div class="code-name">.icon-fuwu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuming"></span>
<div class="name">
域名
</div>
<div class="code-name">.icon-yuming
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-web-icon-"></span>
<div class="name">
安装
</div>
<div class="code-name">.icon-web-icon-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bug"></span>
<div class="name">
bug
</div>
<div class="code-name">.icon-bug
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jishu"></span>
<div class="name">
技术支持 支持 智能客服 服务
</div>
<div class="code-name">.icon-jishu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tupian"></span>
<div class="name">
238图片
</div>
<div class="code-name">.icon-tupian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ic_saleperformance"></span>
<div class="name">
销售业绩
</div>
<div class="code-name">.icon-ic_saleperformance
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yumingguanli"></span>
<div class="name">
域名管理
</div>
<div class="code-name">.icon-yumingguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-suoxiao"></span>
<div class="name">
缩小
</div>
<div class="code-name">.icon-suoxiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yanse"></span>
<div class="name">
颜色
</div>
<div class="code-name">.icon-yanse
</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-gonggongmokuai"></span>
<div class="name">
公共模块
</div>
<div class="code-name">.icon-gonggongmokuai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-peizhi-yunweipeizhi"></span>
<div class="name">
配置-运维配置
</div>
<div class="code-name">.icon-peizhi-yunweipeizhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-houtaiguanli-houtaiguanli"></span>
<div class="name">
后台管理-后台管理
</div>
<div class="code-name">.icon-houtaiguanli-houtaiguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liaotian1"></span>
<div class="name">
聊天
</div>
<div class="code-name">.icon-liaotian1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-24gl-bubbles4"></span>
<div class="name">
24gl-bubbles4
</div>
<div class="code-name">.icon-24gl-bubbles4
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-24gl-bubblesDots4"></span>
<div class="name">
24gl-bubblesDots4
</div>
<div class="code-name">.icon-24gl-bubblesDots4
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liwu"></span>
<div class="name">
礼物
</div>
<div class="code-name">.icon-liwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconfontxiaoxidianji"></span>
<div class="name">
消息点击
</div>
<div class="code-name">.icon-iconfontxiaoxidianji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nv"></span>
<div class="name">
女
</div>
<div class="code-name">.icon-nv
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nan"></span>
<div class="name">
男
</div>
<div class="code-name">.icon-nan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiepinglun"></span>
<div class="name">
写评论
</div>
<div class="code-name">.icon-xiepinglun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quaner"></span>
<div class="name">
圈儿
</div>
<div class="code-name">.icon-quaner
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanquanmendianb"></span>
<div class="name">
圈圈门店-b
</div>
<div class="code-name">.icon-quanquanmendianb
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quan2"></span>
<div class="name">
圈2
</div>
<div class="code-name">.icon-quan2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chahao"></span>
<div class="name">
叉号
</div>
<div class="code-name">.icon-chahao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chahao2"></span>
<div class="name">
叉号
</div>
<div class="code-name">.icon-chahao2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei"></span>
<div class="name">
分类1
</div>
<div class="code-name">.icon-fenlei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-paixu"></span>
<div class="name">
排序
</div>
<div class="code-name">.icon-paixu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-paixu1"></span>
<div class="name">
排序
</div>
<div class="code-name">.icon-paixu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jinbi"></span>
<div class="name">
金币
</div>
<div class="code-name">.icon-jinbi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-31pinglun"></span>
<div class="name">
3.1 评论
</div>
<div class="code-name">.icon-31pinglun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pinglun"></span>
<div class="name">
评论
</div>
<div class="code-name">.icon-pinglun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuanshi"></span>
<div class="name">
钻石
</div>
<div class="code-name">.icon-zuanshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tixing"></span>
<div class="name">
提醒
</div>
<div class="code-name">.icon-tixing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tixing-tianchong"></span>
<div class="name">
提醒-填充
</div>
<div class="code-name">.icon-tixing-tianchong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-scan"></span>
<div class="name">
scan
</div>
<div class="code-name">.icon-scan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-suoding"></span>
<div class="name">
锁定
</div>
<div class="code-name">.icon-suoding
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiesuo"></span>
<div class="name">
解锁
</div>
<div class="code-name">.icon-jiesuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shengming"></span>
<div class="name">
声明
</div>
<div class="code-name">.icon-shengming
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quotes-after"></span>
<div class="name">
引号
</div>
<div class="code-name">.icon-quotes-after
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shipin"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shipin1"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shipin2"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left-line"></span>
<div class="name">
箭头
</div>
<div class="code-name">.icon-arrow-left-line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right-line"></span>
<div class="name">
箭头
</div>
<div class="code-name">.icon-arrow-right-line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou-youhua"></span>
<div class="name">
箭头-右滑
</div>
<div class="code-name">.icon-jiantou-youhua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou-zuohua"></span>
<div class="name">
箭头-左滑
</div>
<div class="code-name">.icon-jiantou-zuohua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-taiyang"></span>
<div class="name">
太阳
</div>
<div class="code-name">.icon-taiyang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-moon-fill"></span>
<div class="name">
月亮-fill
</div>
<div class="code-name">.icon-moon-fill
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liaotian"></span>
<div class="name">
聊天
</div>
<div class="code-name">.icon-liaotian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangshang"></span>
<div class="name">
向上
</div>
<div class="code-name">.icon-xiangshang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou_yemian_xiangshang"></span>
<div class="name">
箭头_页面_向上
</div>
<div class="code-name">.icon-jiantou_yemian_xiangshang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangshangyuanjiantoushangjiantouxiangshangmianxing"></span>
<div class="name">
向上圆箭头 上箭头 向上 面性
</div>
<div class="code-name">.icon-xiangshangyuanjiantoushangjiantouxiangshangmianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-down"></span>
<div class="name">
down
</div>
<div class="code-name">.icon-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right"></span>
<div class="name">
arrow-right
</div>
<div class="code-name">.icon-arrow-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left"></span>
<div class="name">
arrow-left
</div>
<div class="code-name">.icon-arrow-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-anzhuo1"></span>
<div class="name">
安卓
</div>
<div class="code-name">.icon-anzhuo1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-pingguo"></span>
<div class="name">
苹果
</div>
<div class="code-name">.icon-pingguo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiazai"></span>
<div class="name">
操作-上传-download
</div>
<div class="code-name">.icon-xiazai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-html"></span>
<div class="name">
符号-html
</div>
<div class="code-name">.icon-html
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bofang"></span>
<div class="name">
播放2
</div>
<div class="code-name">.icon-bofang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wendang"></span>
<div class="name">
文档
</div>
<div class="code-name">.icon-wendang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-youxiang"></span>
<div class="name">
邮箱
</div>
<div class="code-name">.icon-youxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-layers"></span>
<div class="name">
layers
</div>
<div class="code-name">.icon-layers
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yonghu1"></span>
<div class="name">
用户
</div>
<div class="code-name">.icon-yonghu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yonghu"></span>
<div class="name">
用户
</div>
<div class="code-name">.icon-yonghu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangyi"></span>
<div class="name">
响应式
</div>
<div class="code-name">.icon-xiangyi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-anquanbaozhang-xianxing"></span>
<div class="name">
09安全、保障-线性
</div>
<div class="code-name">.icon-anquanbaozhang-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaocheng"></span>
<div class="name">
教程
</div>
<div class="code-name">.icon-jiaocheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kefu1"></span>
<div class="name">
客服
</div>
<div class="code-name">.icon-kefu1
</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-xiangshangzhanhang"></span>
<div class="name">
向上占行
</div>
<div class="code-name">.icon-xiangshangzhanhang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duanlashuoming"></span>
<div class="name">
段落说明
</div>
<div class="code-name">.icon-duanlashuoming
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bangzhu"></span>
<div class="name">
帮助
</div>
<div class="code-name">.icon-bangzhu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chunjiehuijia"></span>
<div class="name">
春节回家
</div>
<div class="code-name">.icon-chunjiehuijia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chunjie"></span>
<div class="name">
春节
</div>
<div class="code-name">.icon-chunjie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-flag-fill"></span>
<div class="name">
旗帜
</div>
<div class="code-name">.icon-flag-fill
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuehua"></span>
<div class="name">
雪花
</div>
<div class="code-name">.icon-xuehua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chunjie1"></span>
<div class="name">
春节
</div>
<div class="code-name">.icon-chunjie1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duihaoxuanzhong"></span>
<div class="name">
对号选中
</div>
<div class="code-name">.icon-duihaoxuanzhong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouhou1"></span>
<div class="name">
售后1
</div>
<div class="code-name">.icon-shouhou1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fuwu"></span>
<div class="name">
服务
</div>
<div class="code-name">.icon-fuwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-alipay1"></span>
<div class="name">
alipay
</div>
<div class="code-name">.icon-alipay1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-taobao"></span>
<div class="name">
taobao
</div>
<div class="code-name">.icon-taobao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-aliwangwang"></span>
<div class="name">
aliwangwang
</div>
<div class="code-name">.icon-aliwangwang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-QQ"></span>
<div class="name">
QQ
</div>
<div class="code-name">.icon-QQ
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-taobao-circle-fill"></span>
<div class="name">
taobao-circle-fill
</div>
<div class="code-name">.icon-taobao-circle-fill
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weibo-circle-fill"></span>
<div class="name">
weibo-circle-fill
</div>
<div class="code-name">.icon-weibo-circle-fill
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-youhuiquan"></span>
<div class="name">
优惠券
</div>
<div class="code-name">.icon-youhuiquan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo1"></span>
<div class="name">
更多
</div>
<div class="code-name">.icon-gengduo1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo2"></span>
<div class="name">
更多
</div>
<div class="code-name">.icon-gengduo2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo3"></span>
<div class="name">
更多
</div>
<div class="code-name">.icon-gengduo3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xin"></span>
<div class="name">
心
</div>
<div class="code-name">.icon-xin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xin1"></span>
<div class="name">
心
</div>
<div class="code-name">.icon-xin1
</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-shoucang1"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icon-shoucang1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wxpay"></span>
<div class="name">
微信支付
</div>
<div class="code-name">.icon-wxpay
</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-wordpress"></span>
<div class="name">
wordpress
</div>
<div class="code-name">.icon-wordpress
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kefunv"></span>
<div class="name">
客服女
</div>
<div class="code-name">.icon-kefunv
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dian"></span>
<div class="name">
点
</div>
<div class="code-name">.icon-dian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianhuahover"></span>
<div class="name">
电话
</div>
<div class="code-name">.icon-dianhuahover
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shouji"></span>
<div class="name">
手机
</div>
<div class="code-name">.icon-shouji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxiang1"></span>
<div class="name">
分享
</div>
<div class="code-name">.icon-fenxiang1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxiang2"></span>
<div class="name">
分享
</div>
<div class="code-name">.icon-fenxiang2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-unlike"></span>
<div class="name">
unlike
</div>
<div class="code-name">.icon-unlike
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-heart"></span>
<div class="name">
heart
</div>
<div class="code-name">.icon-heart
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-error"></span>
<div class="name">
error
</div>
<div class="code-name">.icon-error
</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-attachment"></span>
<div class="name">
attachment
</div>
<div class="code-name">.icon-attachment
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-link"></span>
<div class="name">
link
</div>
<div class="code-name">.icon-link
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-phone"></span>
<div class="name">
phone
</div>
<div class="code-name">.icon-phone
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shake"></span>
<div class="name">
shake
</div>
<div class="code-name">.icon-shake
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tag"></span>
<div class="name">
tag
</div>
<div class="code-name">.icon-tag
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tags"></span>
<div class="name">
tags
</div>
<div class="code-name">.icon-tags
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fanhui"></span>
<div class="name">
返回
</div>
<div class="code-name">.icon-fanhui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yxiazai"></span>
<div class="name">
云下载
</div>
<div class="code-name">.icon-yxiazai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home"></span>
<div class="name">
3.1首页-选中
</div>
<div class="code-name">.icon-home
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xyjt"></span>
<div class="name">
向右箭头
</div>
<div class="code-name">.icon-xyjt
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xzjt"></span>
<div class="name">
向左箭头
</div>
<div class="code-name">.icon-xzjt
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-IOS"></span>
<div class="name">
IOS
</div>
<div class="code-name">.icon-IOS
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-anzhuo"></span>
<div class="name">
安卓
</div>
<div class="code-name">.icon-anzhuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weizhi"></span>
<div class="name">
401位置
</div>
<div class="code-name">.icon-weizhi
</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-sousuo1"></span>
<div class="name">
搜索
</div>
<div class="code-name">.icon-sousuo1
</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-huiyuanlibao"></span>
<div class="name">
会员礼包
</div>
<div class="code-name">.icon-huiyuanlibao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fire"></span>
<div class="name">
fire
</div>
<div class="code-name">.icon-fire
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wechat"></span>
<div class="name">
wechat-fill
</div>
<div class="code-name">.icon-wechat
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-alipay"></span>
<div class="name">
alipay-circle-fill
</div>
<div class="code-name">.icon-alipay
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-saoma"></span>
<div class="name">
扫码
</div>
<div class="code-name">.icon-saoma
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-Rectangle"></span>
<div class="name">
下拉
</div>
<div class="code-name">.icon-Rectangle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yanjing"></span>
<div class="name">
眼睛
</div>
<div class="code-name">.icon-yanjing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shijian"></span>
<div class="name">
时间
</div>
<div class="code-name">.icon-shijian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-like"></span>
<div class="name">
like
</div>
<div class="code-name">.icon-like
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-notification"></span>
<div class="name">
notification
</div>
<div class="code-name">.icon-notification
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sound"></span>
<div class="name">
sound
</div>
<div class="code-name">.icon-sound
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo"></span>
<div class="name">
搜索
</div>
<div class="code-name">.icon-sousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jia"></span>
<div class="name">
加
</div>
<div class="code-name">.icon-jia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jian"></span>
<div class="name">
减
</div>
<div class="code-name">.icon-jian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test"></span>
<div class="name">
arrow_up
</div>
<div class="code-name">.icon-icon-test
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test1"></span>
<div class="name">
arrow_left
</div>
<div class="code-name">.icon-icon-test1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test2"></span>
<div class="name">
arrow_down
</div>
<div class="code-name">.icon-icon-test2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test3"></span>
<div class="name">
arrow_right
</div>
<div class="code-name">.icon-icon-test3
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-select"></span>
<div class="name">
select
</div>
<div class="code-name">.icon-select
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-add"></span>
<div class="name">
add
</div>
<div class="code-name">.icon-add
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-move"></span>
<div class="name">
move
</div>
<div class="code-name">.icon-move
</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>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</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-shipin3"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tupian1"></use>
</svg>
<div class="name">图片</div>
<div class="code-name">#icon-tupian1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipin4"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei1"></use>
</svg>
<div class="name">分类</div>
<div class="code-name">#icon-fenlei1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei2"></use>
</svg>
<div class="name">分类</div>
<div class="code-name">#icon-fenlei2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tuijian"></use>
</svg>
<div class="name">推荐</div>
<div class="code-name">#icon-tuijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei3"></use>
</svg>
<div class="name">分类</div>
<div class="code-name">#icon-fenlei3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#icon-gengduo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo4"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#icon-gengduo4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengxin1"></use>
</svg>
<div class="name">更新</div>
<div class="code-name">#icon-gengxin1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengxin2"></use>
</svg>
<div class="name">更新</div>
<div class="code-name">#icon-gengxin2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuanchuang"></use>
</svg>
<div class="name">原创</div>
<div class="code-name">#icon-yuanchuang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengxin"></use>
</svg>
<div class="name">更新</div>
<div class="code-name">#icon-gengxin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fuwu1"></use>
</svg>
<div class="name">服务</div>
<div class="code-name">#icon-fuwu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuming"></use>
</svg>
<div class="name">域名</div>
<div class="code-name">#icon-yuming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-web-icon-"></use>
</svg>
<div class="name">安装</div>
<div class="code-name">#icon-web-icon-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bug"></use>
</svg>
<div class="name">bug</div>
<div class="code-name">#icon-bug</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jishu"></use>
</svg>
<div class="name">技术支持 支持 智能客服 服务</div>
<div class="code-name">#icon-jishu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tupian"></use>
</svg>
<div class="name">238图片</div>
<div class="code-name">#icon-tupian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ic_saleperformance"></use>
</svg>
<div class="name">销售业绩</div>
<div class="code-name">#icon-ic_saleperformance</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yumingguanli"></use>
</svg>
<div class="name">域名管理</div>
<div class="code-name">#icon-yumingguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-suoxiao"></use>
</svg>
<div class="name">缩小</div>
<div class="code-name">#icon-suoxiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yanse"></use>
</svg>
<div class="name">颜色</div>
<div class="code-name">#icon-yanse</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-gonggongmokuai"></use>
</svg>
<div class="name">公共模块</div>
<div class="code-name">#icon-gonggongmokuai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-peizhi-yunweipeizhi"></use>
</svg>
<div class="name">配置-运维配置</div>
<div class="code-name">#icon-peizhi-yunweipeizhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-houtaiguanli-houtaiguanli"></use>
</svg>
<div class="name">后台管理-后台管理</div>
<div class="code-name">#icon-houtaiguanli-houtaiguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liaotian1"></use>
</svg>
<div class="name">聊天</div>
<div class="code-name">#icon-liaotian1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-24gl-bubbles4"></use>
</svg>
<div class="name">24gl-bubbles4</div>
<div class="code-name">#icon-24gl-bubbles4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-24gl-bubblesDots4"></use>
</svg>
<div class="name">24gl-bubblesDots4</div>
<div class="code-name">#icon-24gl-bubblesDots4</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liwu"></use>
</svg>
<div class="name">礼物</div>
<div class="code-name">#icon-liwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconfontxiaoxidianji"></use>
</svg>
<div class="name">消息点击</div>
<div class="code-name">#icon-iconfontxiaoxidianji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-nv"></use>
</svg>
<div class="name">女</div>
<div class="code-name">#icon-nv</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-nan"></use>
</svg>
<div class="name">男</div>
<div class="code-name">#icon-nan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiepinglun"></use>
</svg>
<div class="name">写评论</div>
<div class="code-name">#icon-xiepinglun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quaner"></use>
</svg>
<div class="name">圈儿</div>
<div class="code-name">#icon-quaner</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quanquanmendianb"></use>
</svg>
<div class="name">圈圈门店-b</div>
<div class="code-name">#icon-quanquanmendianb</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quan2"></use>
</svg>
<div class="name">圈2</div>
<div class="code-name">#icon-quan2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chahao"></use>
</svg>
<div class="name">叉号</div>
<div class="code-name">#icon-chahao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chahao2"></use>
</svg>
<div class="name">叉号</div>
<div class="code-name">#icon-chahao2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei"></use>
</svg>
<div class="name">分类1</div>
<div class="code-name">#icon-fenlei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-paixu"></use>
</svg>
<div class="name">排序</div>
<div class="code-name">#icon-paixu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-paixu1"></use>
</svg>
<div class="name">排序</div>
<div class="code-name">#icon-paixu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jinbi"></use>
</svg>
<div class="name">金币</div>
<div class="code-name">#icon-jinbi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-31pinglun"></use>
</svg>
<div class="name">3.1 评论</div>
<div class="code-name">#icon-31pinglun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pinglun"></use>
</svg>
<div class="name">评论</div>
<div class="code-name">#icon-pinglun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuanshi"></use>
</svg>
<div class="name">钻石</div>
<div class="code-name">#icon-zuanshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tixing"></use>
</svg>
<div class="name">提醒</div>
<div class="code-name">#icon-tixing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tixing-tianchong"></use>
</svg>
<div class="name">提醒-填充</div>
<div class="code-name">#icon-tixing-tianchong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-scan"></use>
</svg>
<div class="name">scan</div>
<div class="code-name">#icon-scan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-suoding"></use>
</svg>
<div class="name">锁定</div>
<div class="code-name">#icon-suoding</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiesuo"></use>
</svg>
<div class="name">解锁</div>
<div class="code-name">#icon-jiesuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shengming"></use>
</svg>
<div class="name">声明</div>
<div class="code-name">#icon-shengming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quotes-after"></use>
</svg>
<div class="name">引号</div>
<div class="code-name">#icon-quotes-after</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipin"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipin1"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipin2"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left-line"></use>
</svg>
<div class="name">箭头</div>
<div class="code-name">#icon-arrow-left-line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right-line"></use>
</svg>
<div class="name">箭头</div>
<div class="code-name">#icon-arrow-right-line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou-youhua"></use>
</svg>
<div class="name">箭头-右滑</div>
<div class="code-name">#icon-jiantou-youhua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou-zuohua"></use>
</svg>
<div class="name">箭头-左滑</div>
<div class="code-name">#icon-jiantou-zuohua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-taiyang"></use>
</svg>
<div class="name">太阳</div>
<div class="code-name">#icon-taiyang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-moon-fill"></use>
</svg>
<div class="name">月亮-fill</div>
<div class="code-name">#icon-moon-fill</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liaotian"></use>
</svg>
<div class="name">聊天</div>
<div class="code-name">#icon-liaotian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangshang"></use>
</svg>
<div class="name">向上</div>
<div class="code-name">#icon-xiangshang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou_yemian_xiangshang"></use>
</svg>
<div class="name">箭头_页面_向上</div>
<div class="code-name">#icon-jiantou_yemian_xiangshang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangshangyuanjiantoushangjiantouxiangshangmianxing"></use>
</svg>
<div class="name">向上圆箭头 上箭头 向上 面性</div>
<div class="code-name">#icon-xiangshangyuanjiantoushangjiantouxiangshangmianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-down"></use>
</svg>
<div class="name">down</div>
<div class="code-name">#icon-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right"></use>
</svg>
<div class="name">arrow-right</div>
<div class="code-name">#icon-arrow-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left"></use>
</svg>
<div class="name">arrow-left</div>
<div class="code-name">#icon-arrow-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-anzhuo1"></use>
</svg>
<div class="name">安卓</div>
<div class="code-name">#icon-anzhuo1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-pingguo"></use>
</svg>
<div class="name">苹果</div>
<div class="code-name">#icon-pingguo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiazai"></use>
</svg>
<div class="name">操作-上传-download</div>
<div class="code-name">#icon-xiazai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-html"></use>
</svg>
<div class="name">符号-html</div>
<div class="code-name">#icon-html</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bofang"></use>
</svg>
<div class="name">播放2</div>
<div class="code-name">#icon-bofang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wendang"></use>
</svg>
<div class="name">文档</div>
<div class="code-name">#icon-wendang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-youxiang"></use>
</svg>
<div class="name">邮箱</div>
<div class="code-name">#icon-youxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-layers"></use>
</svg>
<div class="name">layers</div>
<div class="code-name">#icon-layers</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yonghu1"></use>
</svg>
<div class="name">用户</div>
<div class="code-name">#icon-yonghu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yonghu"></use>
</svg>
<div class="name">用户</div>
<div class="code-name">#icon-yonghu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangyi"></use>
</svg>
<div class="name">响应式</div>
<div class="code-name">#icon-xiangyi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-anquanbaozhang-xianxing"></use>
</svg>
<div class="name">09安全、保障-线性</div>
<div class="code-name">#icon-anquanbaozhang-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaocheng"></use>
</svg>
<div class="name">教程</div>
<div class="code-name">#icon-jiaocheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kefu1"></use>
</svg>
<div class="name">客服</div>
<div class="code-name">#icon-kefu1</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-xiangshangzhanhang"></use>
</svg>
<div class="name">向上占行</div>
<div class="code-name">#icon-xiangshangzhanhang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duanlashuoming"></use>
</svg>
<div class="name">段落说明</div>
<div class="code-name">#icon-duanlashuoming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bangzhu"></use>
</svg>
<div class="name">帮助</div>
<div class="code-name">#icon-bangzhu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chunjiehuijia"></use>
</svg>
<div class="name">春节回家</div>
<div class="code-name">#icon-chunjiehuijia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chunjie"></use>
</svg>
<div class="name">春节</div>
<div class="code-name">#icon-chunjie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-flag-fill"></use>
</svg>
<div class="name">旗帜</div>
<div class="code-name">#icon-flag-fill</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuehua"></use>
</svg>
<div class="name">雪花</div>
<div class="code-name">#icon-xuehua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chunjie1"></use>
</svg>
<div class="name">春节</div>
<div class="code-name">#icon-chunjie1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-duihaoxuanzhong"></use>
</svg>
<div class="name">对号选中</div>
<div class="code-name">#icon-duihaoxuanzhong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouhou1"></use>
</svg>
<div class="name">售后1</div>
<div class="code-name">#icon-shouhou1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fuwu"></use>
</svg>
<div class="name">服务</div>
<div class="code-name">#icon-fuwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-alipay1"></use>
</svg>
<div class="name">alipay</div>
<div class="code-name">#icon-alipay1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-taobao"></use>
</svg>
<div class="name">taobao</div>
<div class="code-name">#icon-taobao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-aliwangwang"></use>
</svg>
<div class="name">aliwangwang</div>
<div class="code-name">#icon-aliwangwang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
<div class="name">QQ</div>
<div class="code-name">#icon-QQ</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-taobao-circle-fill"></use>
</svg>
<div class="name">taobao-circle-fill</div>
<div class="code-name">#icon-taobao-circle-fill</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weibo-circle-fill"></use>
</svg>
<div class="name">weibo-circle-fill</div>
<div class="code-name">#icon-weibo-circle-fill</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-youhuiquan"></use>
</svg>
<div class="name">优惠券</div>
<div class="code-name">#icon-youhuiquan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo1"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#icon-gengduo1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo2"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#icon-gengduo2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo3"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#icon-gengduo3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xin"></use>
</svg>
<div class="name">心</div>
<div class="code-name">#icon-xin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xin1"></use>
</svg>
<div class="name">心</div>
<div class="code-name">#icon-xin1</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-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-wxpay"></use>
</svg>
<div class="name">微信支付</div>
<div class="code-name">#icon-wxpay</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-wordpress"></use>
</svg>
<div class="name">wordpress</div>
<div class="code-name">#icon-wordpress</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kefunv"></use>
</svg>
<div class="name">客服女</div>
<div class="code-name">#icon-kefunv</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dian"></use>
</svg>
<div class="name">点</div>
<div class="code-name">#icon-dian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianhuahover"></use>
</svg>
<div class="name">电话</div>
<div class="code-name">#icon-dianhuahover</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shouji"></use>
</svg>
<div class="name">手机</div>
<div class="code-name">#icon-shouji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang1"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#icon-fenxiang1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang2"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#icon-fenxiang2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-unlike"></use>
</svg>
<div class="name">unlike</div>
<div class="code-name">#icon-unlike</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-heart"></use>
</svg>
<div class="name">heart</div>
<div class="code-name">#icon-heart</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-error"></use>
</svg>
<div class="name">error</div>
<div class="code-name">#icon-error</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-attachment"></use>
</svg>
<div class="name">attachment</div>
<div class="code-name">#icon-attachment</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-link"></use>
</svg>
<div class="name">link</div>
<div class="code-name">#icon-link</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-phone"></use>
</svg>
<div class="name">phone</div>
<div class="code-name">#icon-phone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shake"></use>
</svg>
<div class="name">shake</div>
<div class="code-name">#icon-shake</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tag"></use>
</svg>
<div class="name">tag</div>
<div class="code-name">#icon-tag</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tags"></use>
</svg>
<div class="name">tags</div>
<div class="code-name">#icon-tags</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fanhui"></use>
</svg>
<div class="name">返回</div>
<div class="code-name">#icon-fanhui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yxiazai"></use>
</svg>
<div class="name">云下载</div>
<div class="code-name">#icon-yxiazai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
<div class="name">3.1首页-选中</div>
<div class="code-name">#icon-home</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xyjt"></use>
</svg>
<div class="name">向右箭头</div>
<div class="code-name">#icon-xyjt</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xzjt"></use>
</svg>
<div class="name">向左箭头</div>
<div class="code-name">#icon-xzjt</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-IOS"></use>
</svg>
<div class="name">IOS</div>
<div class="code-name">#icon-IOS</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-anzhuo"></use>
</svg>
<div class="name">安卓</div>
<div class="code-name">#icon-anzhuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi"></use>
</svg>
<div class="name">401位置</div>
<div class="code-name">#icon-weizhi</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-sousuo1"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#icon-sousuo1</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-huiyuanlibao"></use>
</svg>
<div class="name">会员礼包</div>
<div class="code-name">#icon-huiyuanlibao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fire"></use>
</svg>
<div class="name">fire</div>
<div class="code-name">#icon-fire</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wechat"></use>
</svg>
<div class="name">wechat-fill</div>
<div class="code-name">#icon-wechat</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-alipay"></use>
</svg>
<div class="name">alipay-circle-fill</div>
<div class="code-name">#icon-alipay</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-saoma"></use>
</svg>
<div class="name">扫码</div>
<div class="code-name">#icon-saoma</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-Rectangle"></use>
</svg>
<div class="name">下拉</div>
<div class="code-name">#icon-Rectangle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yanjing"></use>
</svg>
<div class="name">眼睛</div>
<div class="code-name">#icon-yanjing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shijian"></use>
</svg>
<div class="name">时间</div>
<div class="code-name">#icon-shijian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-like"></use>
</svg>
<div class="name">like</div>
<div class="code-name">#icon-like</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-notification"></use>
</svg>
<div class="name">notification</div>
<div class="code-name">#icon-notification</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sound"></use>
</svg>
<div class="name">sound</div>
<div class="code-name">#icon-sound</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jia"></use>
</svg>
<div class="name">加</div>
<div class="code-name">#icon-jia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jian"></use>
</svg>
<div class="name">减</div>
<div class="code-name">#icon-jian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-test"></use>
</svg>
<div class="name">arrow_up</div>
<div class="code-name">#icon-icon-test</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-test1"></use>
</svg>
<div class="name">arrow_left</div>
<div class="code-name">#icon-icon-test1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-test2"></use>
</svg>
<div class="name">arrow_down</div>
<div class="code-name">#icon-icon-test2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-test3"></use>
</svg>
<div class="name">arrow_right</div>
<div class="code-name">#icon-icon-test3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-select"></use>
</svg>
<div class="name">select</div>
<div class="code-name">#icon-select</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-add"></use>
</svg>
<div class="name">add</div>
<div class="code-name">#icon-add</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-move"></use>
</svg>
<div class="name">move</div>
<div class="code-name">#icon-move</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>