ugly-ui-vue
Version:
An ugly styled components for Vue.js
1,547 lines (1,339 loc) • 101 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1143428" 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">编辑2</div>
<div class="code-name">&#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">包包</div>
<div class="code-name">&#xe698;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">编辑</div>
<div class="code-name">&#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">便签</div>
<div class="code-name">&#xe69a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">标签2</div>
<div class="code-name">&#xe69b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">标签</div>
<div class="code-name">&#xe69c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">菜篮</div>
<div class="code-name">&#xe69d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">大楼</div>
<div class="code-name">&#xe69e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">表格1</div>
<div class="code-name">&#xe69f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">打印机</div>
<div class="code-name">&#xe6a0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">表单标签</div>
<div class="code-name">&#xe6a1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">地标</div>
<div class="code-name">&#xe6a2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">灯</div>
<div class="code-name">&#xe6a3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电脑</div>
<div class="code-name">&#xe6a4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">定位</div>
<div class="code-name">&#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">对话</div>
<div class="code-name">&#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">发送</div>
<div class="code-name">&#xe6a7;</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">耳机</div>
<div class="code-name">&#xe6a9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">二维码</div>
<div class="code-name">&#xe6aa;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">购物3</div>
<div class="code-name">&#xe6ab;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">分享</div>
<div class="code-name">&#xe6ac;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">公告1</div>
<div class="code-name">&#xe6ad;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">发现</div>
<div class="code-name">&#xe6ae;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">关闭</div>
<div class="code-name">&#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">关闭2</div>
<div class="code-name">&#xe6b0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">公告</div>
<div class="code-name">&#xe6b1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">盒子2</div>
<div class="code-name">&#xe6b2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电影</div>
<div class="code-name">&#xe6b3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">皇冠</div>
<div class="code-name">&#xe6b4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">盒子</div>
<div class="code-name">&#xe6b5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">个人3</div>
<div class="code-name">&#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">购物车</div>
<div class="code-name">&#xe6b7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">计时</div>
<div class="code-name">&#xe6b8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">购物袋</div>
<div class="code-name">&#xe6b9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">会员</div>
<div class="code-name">&#xe6ba;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">减少</div>
<div class="code-name">&#xe6bb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">举报</div>
<div class="code-name">&#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">卡片</div>
<div class="code-name">&#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">开始</div>
<div class="code-name">&#xe6be;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">火</div>
<div class="code-name">&#xe6bf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">开心</div>
<div class="code-name">&#xe6c0;</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">咖啡</div>
<div class="code-name">&#xe6c2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">礼包</div>
<div class="code-name">&#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">漏斗</div>
<div class="code-name">&#xe6c4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">聊天</div>
<div class="code-name">&#xe6c5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">密码</div>
<div class="code-name">&#xe6c6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">链接2</div>
<div class="code-name">&#xe6c7;</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">钱包</div>
<div class="code-name">&#xe6c9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">奶瓶</div>
<div class="code-name">&#xe6ca;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">钱包1</div>
<div class="code-name">&#xe6cb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">闹钟3</div>
<div class="code-name">&#xe6cc;</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">&#xe6ce;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">伤心</div>
<div class="code-name">&#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">裙子</div>
<div class="code-name">&#xe6d0;</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">&#xe6d2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">设置</div>
<div class="code-name">&#xe6d3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">设备名称</div>
<div class="code-name">&#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">视频</div>
<div class="code-name">&#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机1</div>
<div class="code-name">&#xe6d6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">摄像头</div>
<div class="code-name">&#xe6d7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">刷新2</div>
<div class="code-name">&#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">数据</div>
<div class="code-name">&#xe6d9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">全屏幕</div>
<div class="code-name">&#xe6da;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">书籍</div>
<div class="code-name">&#xe6db;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏</div>
<div class="code-name">&#xe6dc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">缩小</div>
<div class="code-name">&#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">搜索</div>
<div class="code-name">&#xe6de;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加</div>
<div class="code-name">&#xe6df;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加1</div>
<div class="code-name">&#xe6e0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">刷新</div>
<div class="code-name">&#xe6e1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">收藏1</div>
<div class="code-name">&#xe6e2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加设备</div>
<div class="code-name">&#xe6e3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">商店</div>
<div class="code-name">&#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">文件夹</div>
<div class="code-name">&#xe6e5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">问号</div>
<div class="code-name">&#xe6e6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">我的</div>
<div class="code-name">&#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">皇冠2</div>
<div class="code-name">&#xe6e8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">下载</div>
<div class="code-name">&#xe6e9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向上</div>
<div class="code-name">&#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向下</div>
<div class="code-name">&#xe6eb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加闹钟</div>
<div class="code-name">&#xe6ec;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">绘画</div>
<div class="code-name">&#xe6ed;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">添加聊天</div>
<div class="code-name">&#xe6ee;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手</div>
<div class="code-name">&#xe6ef;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">消息</div>
<div class="code-name">&#xe6f0;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向右</div>
<div class="code-name">&#xe6f1;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">统计</div>
<div class="code-name">&#xe6f2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">统计3</div>
<div class="code-name">&#xe6f3;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">金币</div>
<div class="code-name">&#xe6f4;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">眼睛</div>
<div class="code-name">&#xe6f5;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">相机</div>
<div class="code-name">&#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">返回</div>
<div class="code-name">&#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">邮件</div>
<div class="code-name">&#xe6f8;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">云</div>
<div class="code-name">&#xe6f9;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">优惠券</div>
<div class="code-name">&#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">app</div>
<div class="code-name">&#xe6fb;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">学士帽</div>
<div class="code-name">&#xe6fc;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">眼睛1</div>
<div class="code-name">&#xe6fd;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">预防</div>
<div class="code-name">&#xe6fe;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">眼睛3</div>
<div class="code-name">&#xe6ff;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">循环</div>
<div class="code-name">&#xe700;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">鞋子</div>
<div class="code-name">&#xe701;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">支付</div>
<div class="code-name">&#xe702;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">信号</div>
<div class="code-name">&#xe703;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">圆规</div>
<div class="code-name">&#xe704;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">喜欢</div>
<div class="code-name">&#xe705;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">循环播放</div>
<div class="code-name">&#xe706;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">主页</div>
<div class="code-name">&#xe707;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">运动</div>
<div class="code-name">&#xe708;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">邮筒</div>
<div class="code-name">&#xe709;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">游戏</div>
<div class="code-name">&#xe70a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">语音</div>
<div class="code-name">&#xe70b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">眼睛4</div>
<div class="code-name">&#xe70c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">T恤</div>
<div class="code-name">&#xe70d;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
><span class="iconfont">&#x33;</span>
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-bianji"></span>
<div class="name">
编辑2
</div>
<div class="code-name">.icon-bianji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-baobao"></span>
<div class="name">
包包
</div>
<div class="code-name">.icon-baobao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianji1"></span>
<div class="name">
编辑
</div>
<div class="code-name">.icon-bianji1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianqian"></span>
<div class="name">
便签
</div>
<div class="code-name">.icon-bianqian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-biaoqian"></span>
<div class="name">
标签2
</div>
<div class="code-name">.icon-biaoqian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-biaoqian1"></span>
<div class="name">
标签
</div>
<div class="code-name">.icon-biaoqian1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-cailan"></span>
<div class="name">
菜篮
</div>
<div class="code-name">.icon-cailan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dalou"></span>
<div class="name">
大楼
</div>
<div class="code-name">.icon-dalou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-biaoge"></span>
<div class="name">
表格1
</div>
<div class="code-name">.icon-biaoge
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dayinji"></span>
<div class="name">
打印机
</div>
<div class="code-name">.icon-dayinji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-biaodanbiaoqian"></span>
<div class="name">
表单标签
</div>
<div class="code-name">.icon-biaodanbiaoqian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dibiao"></span>
<div class="name">
地标
</div>
<div class="code-name">.icon-dibiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-deng"></span>
<div class="name">
灯
</div>
<div class="code-name">.icon-deng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-diannao"></span>
<div class="name">
电脑
</div>
<div class="code-name">.icon-diannao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingwei"></span>
<div class="name">
定位
</div>
<div class="code-name">.icon-dingwei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duihua"></span>
<div class="name">
对话
</div>
<div class="code-name">.icon-duihua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fasong"></span>
<div class="name">
发送
</div>
<div class="code-name">.icon-fasong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-duoren"></span>
<div class="name">
多人
</div>
<div class="code-name">.icon-duoren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erji"></span>
<div class="name">
耳机
</div>
<div class="code-name">.icon-erji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-erweima"></span>
<div class="name">
二维码
</div>
<div class="code-name">.icon-erweima
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gouwu"></span>
<div class="name">
购物3
</div>
<div class="code-name">.icon-gouwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxiang"></span>
<div class="name">
分享
</div>
<div class="code-name">.icon-fenxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gonggao"></span>
<div class="name">
公告1
</div>
<div class="code-name">.icon-gonggao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-faxian"></span>
<div class="name">
发现
</div>
<div class="code-name">.icon-faxian
</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-guanbi1"></span>
<div class="name">
关闭2
</div>
<div class="code-name">.icon-guanbi1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gonggao1"></span>
<div class="name">
公告
</div>
<div class="code-name">.icon-gonggao1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hezi"></span>
<div class="name">
盒子2
</div>
<div class="code-name">.icon-hezi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianying"></span>
<div class="name">
电影
</div>
<div class="code-name">.icon-dianying
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huangguan"></span>
<div class="name">
皇冠
</div>
<div class="code-name">.icon-huangguan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-hezi1"></span>
<div class="name">
盒子
</div>
<div class="code-name">.icon-hezi1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-geren"></span>
<div class="name">
个人3
</div>
<div class="code-name">.icon-geren
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gouwuche"></span>
<div class="name">
购物车
</div>
<div class="code-name">.icon-gouwuche
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jishi"></span>
<div class="name">
计时
</div>
<div class="code-name">.icon-jishi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gouwudai"></span>
<div class="name">
购物袋
</div>
<div class="code-name">.icon-gouwudai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huiyuan"></span>
<div class="name">
会员
</div>
<div class="code-name">.icon-huiyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianshao"></span>
<div class="name">
减少
</div>
<div class="code-name">.icon-jianshao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jubao"></span>
<div class="name">
举报
</div>
<div class="code-name">.icon-jubao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qiapian"></span>
<div class="name">
卡片
</div>
<div class="code-name">.icon-qiapian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaishi"></span>
<div class="name">
开始
</div>
<div class="code-name">.icon-kaishi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huo"></span>
<div class="name">
火
</div>
<div class="code-name">.icon-huo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kaixin"></span>
<div class="name">
开心
</div>
<div class="code-name">.icon-kaixin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lihe"></span>
<div class="name">
礼盒
</div>
<div class="code-name">.icon-lihe
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kafei"></span>
<div class="name">
咖啡
</div>
<div class="code-name">.icon-kafei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-libao"></span>
<div class="name">
礼包
</div>
<div class="code-name">.icon-libao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-loudou"></span>
<div class="name">
漏斗
</div>
<div class="code-name">.icon-loudou
</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-mima"></span>
<div class="name">
密码
</div>
<div class="code-name">.icon-mima
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-lianjie"></span>
<div class="name">
链接2
</div>
<div class="code-name">.icon-lianjie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-naozhong"></span>
<div class="name">
闹钟
</div>
<div class="code-name">.icon-naozhong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianbao"></span>
<div class="name">
钱包
</div>
<div class="code-name">.icon-qianbao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-naiping"></span>
<div class="name">
奶瓶
</div>
<div class="code-name">.icon-naiping
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianbao1"></span>
<div class="name">
钱包1
</div>
<div class="code-name">.icon-qianbao1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-naozhong1"></span>
<div class="name">
闹钟3
</div>
<div class="code-name">.icon-naozhong1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-rili"></span>
<div class="name">
日历
</div>
<div class="code-name">.icon-rili
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-saoyisao"></span>
<div class="name">
扫一扫
</div>
<div class="code-name">.icon-saoyisao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangxin"></span>
<div class="name">
伤心
</div>
<div class="code-name">.icon-shangxin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qunzi"></span>
<div class="name">
裙子
</div>
<div class="code-name">.icon-qunzi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shanchu"></span>
<div class="name">
删除
</div>
<div class="code-name">.icon-shanchu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangchuan"></span>
<div class="name">
上传
</div>
<div class="code-name">.icon-shangchuan
</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-shebeimingcheng"></span>
<div class="name">
设备名称
</div>
<div class="code-name">.icon-shebeimingcheng
</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-shouji"></span>
<div class="name">
手机1
</div>
<div class="code-name">.icon-shouji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shexiangtou"></span>
<div class="name">
摄像头
</div>
<div class="code-name">.icon-shexiangtou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuaxin"></span>
<div class="name">
刷新2
</div>
<div class="code-name">.icon-shuaxin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuju"></span>
<div class="name">
数据
</div>
<div class="code-name">.icon-shuju
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanpingmu"></span>
<div class="name">
全屏幕
</div>
<div class="code-name">.icon-quanpingmu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuji"></span>
<div class="name">
书籍
</div>
<div class="code-name">.icon-shuji
</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-suoxiao"></span>
<div class="name">
缩小
</div>
<div class="code-name">.icon-suoxiao
</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-tianjia"></span>
<div class="name">
添加
</div>
<div class="code-name">.icon-tianjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tianjia1"></span>
<div class="name">
添加1
</div>
<div class="code-name">.icon-tianjia1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuaxin1"></span>
<div class="name">
刷新
</div>
<div class="code-name">.icon-shuaxin1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang1"></span>
<div class="name">
收藏1
</div>
<div class="code-name">.icon-shoucang1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tianjiashebei"></span>
<div class="name">
添加设备
</div>
<div class="code-name">.icon-tianjiashebei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangdian"></span>
<div class="name">
商店
</div>
<div class="code-name">.icon-shangdian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenjianjia"></span>
<div class="name">
文件夹
</div>
<div class="code-name">.icon-wenjianjia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wenhao"></span>
<div class="name">
问号
</div>
<div class="code-name">.icon-wenhao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wode"></span>
<div class="name">
我的
</div>
<div class="code-name">.icon-wode
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huangguan1"></span>
<div class="name">
皇冠2
</div>
<div class="code-name">.icon-huangguan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiazai"></span>
<div class="name">
下载
</div>
<div class="code-name">.icon-xiazai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangshang"></span>
<div class="name">