<template>
|
<!--
|
作者：4948286@qq.com
|
时间：2019-12-24
|
描述：字体图标
|
-->
|
<div class="fonticon-wrap">
|
<h1 class="tc">字体图标汇总</h1>
|
<ul class="icon_lists dib-box">
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-bangdingshujuyuan"></use>
|
</svg>
|
<div class="name">绑定数据源</div>
|
<div class="code-name">#icon-bangdingshujuyuan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-caiwu"></use>
|
</svg>
|
<div class="name">财务</div>
|
<div class="code-name">#icon-caiwu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-iconset0250"></use>
|
</svg>
|
<div class="name">电池</div>
|
<div class="code-name">#icon-iconset0250</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-iconset0335"></use>
|
</svg>
|
<div class="name">页面</div>
|
<div class="code-name">#icon-iconset0335</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-jifen"></use>
|
</svg>
|
<div class="name">积分</div>
|
<div class="code-name">#icon-jifen</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-icon1"></use>
|
</svg>
|
<div class="name">支付</div>
|
<div class="code-name">#icon-icon1</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-geren5"></use>
|
</svg>
|
<div class="name">个人 (5)</div>
|
<div class="code-name">#icon-geren5</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-geren9"></use>
|
</svg>
|
<div class="name">个人 (9)</div>
|
<div class="code-name">#icon-geren9</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-tuichu4"></use>
|
</svg>
|
<div class="name">退出 (4)</div>
|
<div class="code-name">#icon-tuichu4</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-mima"></use>
|
</svg>
|
<div class="name">密码</div>
|
<div class="code-name">#icon-mima</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-chakantieziguanzhu"></use>
|
</svg>
|
<div class="name">关注</div>
|
<div class="code-name">#icon-chakantieziguanzhu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-dianpu"></use>
|
</svg>
|
<div class="name">店铺</div>
|
<div class="code-name">#icon-dianpu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-Invitation"></use>
|
</svg>
|
<div class="name">邀请</div>
|
<div class="code-name">#icon-Invitation</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-application"></use>
|
</svg>
|
<div class="name">应用</div>
|
<div class="code-name">#icon-application</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-huiyuan"></use>
|
</svg>
|
<div class="name">会员</div>
|
<div class="code-name">#icon-huiyuan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-mendian"></use>
|
</svg>
|
<div class="name">门店</div>
|
<div class="code-name">#icon-mendian</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-dazhuanpan"></use>
|
</svg>
|
<div class="name">大转盘</div>
|
<div class="code-name">#icon-dazhuanpan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiaoxi"></use>
|
</svg>
|
<div class="name">消息</div>
|
<div class="code-name">#icon-xiaoxi</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-kanjia"></use>
|
</svg>
|
<div class="name">砍价</div>
|
<div class="code-name">#icon-kanjia</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-home"></use>
|
</svg>
|
<div class="name">home</div>
|
<div class="code-name">#icon-home</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-chajian1"></use>
|
</svg>
|
<div class="name">插件</div>
|
<div class="code-name">#icon-chajian1</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiaoxi1"></use>
|
</svg>
|
<div class="name">消息</div>
|
<div class="code-name">#icon-xiaoxi1</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-zhekou"></use>
|
</svg>
|
<div class="name"> 折扣</div>
|
<div class="code-name">#icon-zhekou</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-gengduopintuan"></use>
|
</svg>
|
<div class="name">更多拼团</div>
|
<div class="code-name">#icon-gengduopintuan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-qiandao"></use>
|
</svg>
|
<div class="name">签到</div>
|
<div class="code-name">#icon-qiandao</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-pingjia-tianchong"></use>
|
</svg>
|
<div class="name">评价</div>
|
<div class="code-name">#icon-pingjia-tianchong</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-tongji"></use>
|
</svg>
|
<div class="name">统计</div>
|
<div class="code-name">#icon-tongji</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-collection"></use>
|
</svg>
|
<div class="name">收藏</div>
|
<div class="code-name">#icon-collection</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-fenxiao"></use>
|
</svg>
|
<div class="name">分销</div>
|
<div class="code-name">#icon-fenxiao</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-tubiaozhizuomoban-"></use>
|
</svg>
|
<div class="name">商城</div>
|
<div class="code-name">#icon-tubiaozhizuomoban-</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-manjian"></use>
|
</svg>
|
<div class="name">满减</div>
|
<div class="code-name">#icon-manjian</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-libao"></use>
|
</svg>
|
<div class="name">礼包</div>
|
<div class="code-name">#icon-libao</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-authority"></use>
|
</svg>
|
<div class="name">权限</div>
|
<div class="code-name">#icon-authority</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-wifi"></use>
|
</svg>
|
<div class="name">wifi</div>
|
<div class="code-name">#icon-wifi</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-chajian"></use>
|
</svg>
|
<div class="name">插件</div>
|
<div class="code-name">#icon-chajian</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-shangping"></use>
|
</svg>
|
<div class="name">商品</div>
|
<div class="code-name">#icon-shangping</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xinhao"></use>
|
</svg>
|
<div class="name">信号</div>
|
<div class="code-name">#icon-xinhao</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-shangcheng"></use>
|
</svg>
|
<div class="name">商城</div>
|
<div class="code-name">#icon-shangcheng</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-gongzhonghao"></use>
|
</svg>
|
<div class="name">公众号</div>
|
<div class="code-name">#icon-gongzhonghao</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-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-tuisong"></use>
|
</svg>
|
<div class="name">推送</div>
|
<div class="code-name">#icon-tuisong</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-shanchu"></use>
|
</svg>
|
<div class="name">删除</div>
|
<div class="code-name">#icon-shanchu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-dingdan"></use>
|
</svg>
|
<div class="name">订单</div>
|
<div class="code-name">#icon-dingdan</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiaochengxu"></use>
|
</svg>
|
<div class="name">小程序</div>
|
<div class="code-name">#icon-xiaochengxu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-cedaohang-zhanghao"></use>
|
</svg>
|
<div class="name">账号</div>
|
<div class="code-name">#icon-cedaohang-zhanghao</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-tuichu"></use>
|
</svg>
|
<div class="name">退出</div>
|
<div class="code-name">#icon-tuichu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-jiutuhaibaoicon"></use>
|
</svg>
|
<div class="name">九图海报icon</div>
|
<div class="code-name">#icon-jiutuhaibaoicon</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-icon-test"></use>
|
</svg>
|
<div class="name">order</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">setting</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">region</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">calculator</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-icon-test4"></use>
|
</svg>
|
<div class="name">email</div>
|
<div class="code-name">#icon-icon-test4</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiaoxi2"></use>
|
</svg>
|
<div class="name">消息</div>
|
<div class="code-name">#icon-xiaoxi2</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xinzengyonghu"></use>
|
</svg>
|
<div class="name">新增用户</div>
|
<div class="code-name">#icon-xinzengyonghu</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-16"></use>
|
</svg>
|
<div class="name">文章</div>
|
<div class="code-name">#icon-16</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-miaosha"></use>
|
</svg>
|
<div class="name">秒杀</div>
|
<div class="code-name">#icon-miaosha</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-xiaoshou"></use>
|
</svg>
|
<div class="name">销售</div>
|
<div class="code-name">#icon-xiaoshou</div>
|
</li>
|
|
<li class="dib">
|
<svg class="icon svg-icon" aria-hidden="true">
|
<use xlink:href="#icon-piliangxiadan"></use>
|
</svg>
|
<div class="name">批量下单</div>
|
<div class="code-name">#icon-piliangxiadan</div>
|
</li>
|
</ul>
|
</div>
|
</template>
|
|
<script></script>
|
|
<style>
|
.fonticon-wrap {
|
padding: 30px;
|
}
|
.fonticon-wrap .icon_lists {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.fonticon-wrap .dib {
|
margin: 10px;
|
display: flex;
|
flex-flow: column;
|
align-items: center;
|
justify-content: center;
|
width: 100px;
|
height: 140px;
|
}
|
.fonticon-wrap .svg-icon {
|
width: 30px;
|
height: 30px;
|
}
|
</style>
|
