|
|
@@ -1,999 +0,0 @@
|
|
|
-
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
- <meta charset="utf-8"/>
|
|
|
- <title>IconFont</title>
|
|
|
- <link rel="stylesheet" href="demo.css">
|
|
|
- <script src="iconfont.js"></script>
|
|
|
-
|
|
|
- <style type="text/css">
|
|
|
- .icon {
|
|
|
- /* 通过设置 font-size 来改变图标大小 */
|
|
|
- width: 1em; height: 1em;
|
|
|
- /* 图标和文字相邻时,垂直对齐 */
|
|
|
- vertical-align: -0.15em;
|
|
|
- /* 通过设置 color 来改变 SVG 的颜色/fill */
|
|
|
- fill: currentColor;
|
|
|
- /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
|
|
- normalize.css 中也包含这行 */
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="main markdown">
|
|
|
- <h1>IconFont 图标</h1>
|
|
|
- <ul class="icon_lists clear">
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shanchu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">删除</div>
|
|
|
- <div class="fontclass">#icon-shanchu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-wodezichan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">我的资产</div>
|
|
|
- <div class="fontclass">#icon-wodezichan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiaojiantou"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">小箭头</div>
|
|
|
- <div class="fontclass">#icon-xiaojiantou</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-ttpodicon"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">设置</div>
|
|
|
- <div class="fontclass">#icon-ttpodicon</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-llrefundmessageicon"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">退款</div>
|
|
|
- <div class="fontclass">#icon-llrefundmessageicon</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-gouwuche1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">购物车</div>
|
|
|
- <div class="fontclass">#icon-gouwuche1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shoucang3"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">收藏</div>
|
|
|
- <div class="fontclass">#icon-shoucang3</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daipingjia"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">待评价</div>
|
|
|
- <div class="fontclass">#icon-daipingjia</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shoucang"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">收藏</div>
|
|
|
- <div class="fontclass">#icon-shoucang</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiaoxi"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">消息</div>
|
|
|
- <div class="fontclass">#icon-xiaoxi</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-share"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分享</div>
|
|
|
- <div class="fontclass">#icon-share</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-zhifu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">支付宝</div>
|
|
|
- <div class="fontclass">#icon-zhifu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jia"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">加</div>
|
|
|
- <div class="fontclass">#icon-jia</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jian"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">减</div>
|
|
|
- <div class="fontclass">#icon-jian</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-wodezichan1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">我的资产</div>
|
|
|
- <div class="fontclass">#icon-wodezichan1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-tuikuantuihuo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">3.1退款退货</div>
|
|
|
- <div class="fontclass">#icon-tuikuantuihuo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-31shuaxin"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">3.1-刷新</div>
|
|
|
- <div class="fontclass">#icon-31shuaxin</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-31huidaodingbu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">3.1回到顶部</div>
|
|
|
- <div class="fontclass">#icon-31huidaodingbu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shape3"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">定位</div>
|
|
|
- <div class="fontclass">#icon-shape3</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-weixinzhifu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">微信支付</div>
|
|
|
- <div class="fontclass">#icon-weixinzhifu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-iconxiaoyuhao"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">icon_小于号</div>
|
|
|
- <div class="fontclass">#icon-iconxiaoyuhao</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-wodedingdan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">我的订单</div>
|
|
|
- <div class="fontclass">#icon-wodedingdan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dianpuhuodong2"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">店铺活动</div>
|
|
|
- <div class="fontclass">#icon-dianpuhuodong2</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shouye2"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">首页</div>
|
|
|
- <div class="fontclass">#icon-shouye2</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-p-wait-assess"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">待评价</div>
|
|
|
- <div class="fontclass">#icon-p-wait-assess</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-qiandao"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">签到</div>
|
|
|
- <div class="fontclass">#icon-qiandao</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-baocun"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">保存</div>
|
|
|
- <div class="fontclass">#icon-baocun</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-gou"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">勾</div>
|
|
|
- <div class="fontclass">#icon-gou</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-vip"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">vip</div>
|
|
|
- <div class="fontclass">#icon-vip</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fenleiguanli"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分类管理</div>
|
|
|
- <div class="fontclass">#icon-fenleiguanli</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-weibiaoti1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">首页</div>
|
|
|
- <div class="fontclass">#icon-weibiaoti1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-sanjiaoxingxiala"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">三角形下拉</div>
|
|
|
- <div class="fontclass">#icon-sanjiaoxingxiala</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fenlei-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分类</div>
|
|
|
- <div class="fontclass">#icon-fenlei-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-leimupinleifenleileibie2"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">类目 品类 分类 类别.2</div>
|
|
|
- <div class="fontclass">#icon-leimupinleifenleileibie2</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-103"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">预存款</div>
|
|
|
- <div class="fontclass">#icon-103</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-icondayu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">大于</div>
|
|
|
- <div class="fontclass">#icon-icondayu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dianpuzhuye"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">店铺首页</div>
|
|
|
- <div class="fontclass">#icon-dianpuzhuye</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fenlei"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分类</div>
|
|
|
- <div class="fontclass">#icon-fenlei</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dianpujie"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">店铺街</div>
|
|
|
- <div class="fontclass">#icon-dianpujie</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-unie644"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">三点</div>
|
|
|
- <div class="fontclass">#icon-unie644</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-zhoubiandianpu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">周边店铺</div>
|
|
|
- <div class="fontclass">#icon-zhoubiandianpu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-wode1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">我的</div>
|
|
|
- <div class="fontclass">#icon-wode1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-quanbushangpin"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">全部商品</div>
|
|
|
- <div class="fontclass">#icon-quanbushangpin</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shangpinmiaoshujiazaishibai"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">商品描述_加载失败</div>
|
|
|
- <div class="fontclass">#icon-shangpinmiaoshujiazaishibai</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daijinquan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">代金券</div>
|
|
|
- <div class="fontclass">#icon-daijinquan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-iconfontzhizuobiaozhun08"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">我的</div>
|
|
|
- <div class="fontclass">#icon-iconfontzhizuobiaozhun08</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daifahuo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">待发货</div>
|
|
|
- <div class="fontclass">#icon-daifahuo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-che"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">车</div>
|
|
|
- <div class="fontclass">#icon-che</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shangpinxiaoshou"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">商品销售</div>
|
|
|
- <div class="fontclass">#icon-shangpinxiaoshou</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fapiao"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">发票</div>
|
|
|
- <div class="fontclass">#icon-fapiao</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-hongbao"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">红包</div>
|
|
|
- <div class="fontclass">#icon-hongbao</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daifukuan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">待付款</div>
|
|
|
- <div class="fontclass">#icon-daifukuan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiaotubiao01"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">发货中</div>
|
|
|
- <div class="fontclass">#icon-xiaotubiao01</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fenlei1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分类</div>
|
|
|
- <div class="fontclass">#icon-fenlei1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-weixuanze"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">-_未选择</div>
|
|
|
- <div class="fontclass">#icon-weixuanze</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiala-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">下拉</div>
|
|
|
- <div class="fontclass">#icon-xiala-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-kefu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">客服</div>
|
|
|
- <div class="fontclass">#icon-kefu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-zuji2222"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">足迹 - 2222</div>
|
|
|
- <div class="fontclass">#icon-zuji2222</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-information"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">消息</div>
|
|
|
- <div class="fontclass">#icon-information</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-weibo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">微博</div>
|
|
|
- <div class="fontclass">#icon-weibo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-weixin"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">微信</div>
|
|
|
- <div class="fontclass">#icon-weixin</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daifukuan1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">代付款</div>
|
|
|
- <div class="fontclass">#icon-daifukuan1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-pinglun"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">评论</div>
|
|
|
- <div class="fontclass">#icon-pinglun</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dianpu"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">店铺</div>
|
|
|
- <div class="fontclass">#icon-dianpu</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-cart_light"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">cart_light</div>
|
|
|
- <div class="fontclass">#icon-cart_light</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-cart_fill_light"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">cart_fill_light</div>
|
|
|
- <div class="fontclass">#icon-cart_fill_light</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-sousuo-sousuo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">搜索-搜索</div>
|
|
|
- <div class="fontclass">#icon-sousuo-sousuo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-heart"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">爱心</div>
|
|
|
- <div class="fontclass">#icon-heart</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shangxia"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">上下</div>
|
|
|
- <div class="fontclass">#icon-shangxia</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daishouhuo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">待收货</div>
|
|
|
- <div class="fontclass">#icon-daishouhuo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiaoxi1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">消息</div>
|
|
|
- <div class="fontclass">#icon-xiaoxi1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-chongzhiqiachongzhi"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">充值卡充值</div>
|
|
|
- <div class="fontclass">#icon-chongzhiqiachongzhi</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dingdan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">订单</div>
|
|
|
- <div class="fontclass">#icon-dingdan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-wodeshangcheng1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">我的商城03</div>
|
|
|
- <div class="fontclass">#icon-wodeshangcheng1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-sousuo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">搜索</div>
|
|
|
- <div class="fontclass">#icon-sousuo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-caichan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">财产</div>
|
|
|
- <div class="fontclass">#icon-caichan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fenxiang"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分享</div>
|
|
|
- <div class="fontclass">#icon-fenxiang</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-qq"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">QQ</div>
|
|
|
- <div class="fontclass">#icon-qq</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-yucunkuan"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">预存款</div>
|
|
|
- <div class="fontclass">#icon-yucunkuan</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shangchuanzhaopian"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">上传照片</div>
|
|
|
- <div class="fontclass">#icon-shangchuanzhaopian</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dingwei"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">定位</div>
|
|
|
- <div class="fontclass">#icon-dingwei</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-daiziti"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">待自提</div>
|
|
|
- <div class="fontclass">#icon-daiziti</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fanhui"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">返回</div>
|
|
|
- <div class="fontclass">#icon-fanhui</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-QQ"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">QQ</div>
|
|
|
- <div class="fontclass">#icon-QQ</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dianpushangxin"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">店铺上新</div>
|
|
|
- <div class="fontclass">#icon-dianpushangxin</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fanhui2"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">返回</div>
|
|
|
- <div class="fontclass">#icon-fanhui2</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xuanze"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">选择</div>
|
|
|
- <div class="fontclass">#icon-xuanze</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jifen"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">积分</div>
|
|
|
- <div class="fontclass">#icon-jifen</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jifendingdan-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">积分订单</div>
|
|
|
- <div class="fontclass">#icon-jifendingdan-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-tuijiandianpu-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">推荐店铺</div>
|
|
|
- <div class="fontclass">#icon-tuijiandianpu-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shangjia-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">商家</div>
|
|
|
- <div class="fontclass">#icon-shangjia-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-12-copy-copy-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">设置</div>
|
|
|
- <div class="fontclass">#icon-12-copy-copy-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-vip-card-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">vip-card</div>
|
|
|
- <div class="fontclass">#icon-vip-card-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shouji-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">申请</div>
|
|
|
- <div class="fontclass">#icon-shouji-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-gerenziliao-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">个人资料</div>
|
|
|
- <div class="fontclass">#icon-gerenziliao-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-unie6441"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">三点</div>
|
|
|
- <div class="fontclass">#icon-unie6441</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-guanbi"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">关闭</div>
|
|
|
- <div class="fontclass">#icon-guanbi</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shoujihao"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">手机号</div>
|
|
|
- <div class="fontclass">#icon-shoujihao</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shanchu1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">删 除</div>
|
|
|
- <div class="fontclass">#icon-shanchu1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-qianbao"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">钱包</div>
|
|
|
- <div class="fontclass">#icon-qianbao</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shoucang1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">收 藏</div>
|
|
|
- <div class="fontclass">#icon-shoucang1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shoucang2"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">收 藏(我的)</div>
|
|
|
- <div class="fontclass">#icon-shoucang2</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-richscan_icon"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">扫一扫</div>
|
|
|
- <div class="fontclass">#icon-richscan_icon</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jiantoushang"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">箭头 上</div>
|
|
|
- <div class="fontclass">#icon-jiantoushang</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jiantoushang1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">箭头 上</div>
|
|
|
- <div class="fontclass">#icon-jiantoushang1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jiantouyou"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">箭头 右</div>
|
|
|
- <div class="fontclass">#icon-jiantouyou</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-jiantouxia"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">箭头 下</div>
|
|
|
- <div class="fontclass">#icon-jiantouxia</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-icon-test"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">地址管理</div>
|
|
|
- <div class="fontclass">#icon-icon-test</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiangyoudejiantou"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">向右的箭头</div>
|
|
|
- <div class="fontclass">#icon-xiangyoudejiantou</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-xiala-copy-copy"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">下 拉</div>
|
|
|
- <div class="fontclass">#icon-xiala-copy-copy</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dingdan1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">订单</div>
|
|
|
- <div class="fontclass">#icon-dingdan1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-soushuo"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">搜索--1</div>
|
|
|
- <div class="fontclass">#icon-soushuo</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-dingwei1"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">定位</div>
|
|
|
- <div class="fontclass">#icon-dingwei1</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-gouwuche"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">购物车</div>
|
|
|
- <div class="fontclass">#icon-gouwuche</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-toDown"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">下 拉</div>
|
|
|
- <div class="fontclass">#icon-toDown</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-fenxiang2"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">分 享</div>
|
|
|
- <div class="fontclass">#icon-fenxiang2</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li>
|
|
|
- <svg class="icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-yonghushezhi"></use>
|
|
|
- </svg>
|
|
|
- <div class="name">用户设置</div>
|
|
|
- <div class="fontclass">#icon-yonghushezhi</div>
|
|
|
- </li>
|
|
|
-
|
|
|
- </ul>
|
|
|
-
|
|
|
-
|
|
|
- <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="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
|
|
|
- <h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3>
|
|
|
- <pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
|
|
|
-.icon {
|
|
|
- width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
|
|
|
- vertical-align: <span class="hljs-number">-0.15</span>em;
|
|
|
- fill: currentColor;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-<<span class="hljs-regexp">/style></span></code></pre>
|
|
|
- <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
|
|
|
- <pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
|
|
|
- <<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
|
|
|
-</span><<span class="hljs-regexp">/svg>
|
|
|
- </span></code></pre>
|
|
|
- </div>
|
|
|
-</body>
|
|
|
-</html>
|