• 添加-方框-填充
    
  • 扫码
    
  • 删除
    
  • 110导航、地址、位置
    
  • 编辑
    
  • 微信
    
  • 解除绑定
    
  • 地址
    
  • 个人中心-地址管理
    
  • tijiaodingdan-youhuiquan
    
  • tijiaodingdan-weixin
    
  • weigouxuan
    
  • tijiaodingdan-yu e
    
  • tuanzhanggongzuotai
    
  • daijiesuanyongjin
    
  • daifukuan
    
  • wodeyouhuiquan
    
  • wodekefu
    
  • tuanzhangxinxi
    
  • gouxuan
    
  • jifen
    
  • gouwuche-shanchu
    
  • huiyuan
    
  • kefu
    
  • juxing
    
  • lingquanzhongxin
    
  • liebiao
    
  • pingjiazhongxin
    
  • peisongzhong
    
  • pingjiaxingxing
    
  • qiandai
    
  • shangpinxiangqing-fenxiang
    
  • shangpinxiangqing-jifen
    
  • shangpinxiangqing-gouwuche
    
  • shangpinxiangqing-baozhuang
    
  • shangpinxiangqing-guanbi
    
  • shangpinxiangqing-dianpu
    
  • shangpinxiangqing-kefu
    
  • shangpinxiangqing-qian
    
  • shangpinxiangqing-shixiao
    
  • tihuodianhoutai
    
  • shezhi
    
  • shouhou
    
  • tijiaodingdan-manjian
    
  • shenqingchengshihehuoren
    
  • shenqingtuanzhang
    
  • tijiaodingdan-dizhi
    
  • tijiaodingdan-haoyou
    
  • dingdanxiangqing-peisongzhong
    
  • dingdanxiangqing-yiwancheng
    
  • tijiaodingdan-gouxuan
    
  • weipingjiaxingxing
    
  • gouwuche
    
  • dingdanxiangqing-wuliu
    
  • dianhua
    
  • fenxiaogouxuan
    
  • dingdanxiangqing-daifahuo
    
  • ziyuanruzhu
    
  • dingdanxiangqing-dizhi
    
  • fenxiaodingdan
    
  • daitihuo
    
  • bofang
    
  • dizhiguanli
    
  • dingdanxiangqing-daitihuo
    
  • charutupian
    
  • gouwuche-jian
    
  • tijiaodingdan-youhuiquan-guanbi
    
  • fenxiao
    
  • fenxiaokehu
    
  • shangpinxiangqing-zuanshi
    
  • dingdanxiangqing-yiguanbi
    
  • fenxiaoma
    
  • dingdanxiangqing-daifukuan
    
  • dingdanxiangqing-liuyan
    
  • dingdanxiangqing-daipingjia
    
  • gouwuche-jia
    
  • pc-pingjiaxingxing
    
  • gouwuche1
    
  • tihuodianhoutai-shouhoudingdan
    
  • tihuodianhoutai-dingdanhexiao
    
  • tihuodianhoutai-peisongshezhi
    
  • tuanzhanggongzuotaijinbi
    
  • tihuodianhoutai-tuanzhangxinxi
    
  • tihuodianhoutai-qianshoudan
    
  • tuanzhanggongzuitai-tishi
    
  • tihuodianhoutai-yongjin
    
  • bigeguanlitai-yunxingzhong
    
  • bigeguanlitai-fuwuqi
    
  • bigeguanlitai-yiguanbi
    
  • tihuodianhoutai-dingdanhexiao
    
  • bigeguanlitai-CDN
    
  • bigeguanlitai-jinrifangke
    
  • bigeguanlitai-jinridingdan
    
  • bigeguanlitai-jinrichengjiaoe
    
  • PC-tishi1
    
  • PC-shijian
    
  • PC-bianji
    
  • PC-tishi
    
  • PC-beizhu
    
  • PC-shouhougongdan-xiangqing-cangkuchulizhong
    
  • PC-shouhougongdan-xiangqing-yiwancheng
    
  • PC-shangpinguanli-shuxingmoban-shanchu
    
  • PC-shouhougongdan-xiangqing-paisongzhong
    
  • PC-yichang
    
  • tihuodianhoutai-saosao
    
  • bigeguanlitai-daifukuandingdanshu
    
  • tihuodianhoutai-shouhoudingdan
    
  • tihuodianhoutai-tuanzhangxinxi
    
  • PC-shouhougongdan-xiangqing-peisongzhong
    
  • tihuodianhoutai-peisongshezhi
    
  • shangchuanpingzheng
    
  • PC-yibeizhu
    
  • wodeshezhi
    
  • delete,删除,清除,清理
    

Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

第一步:拷贝项目下面生成的 @font-face

@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');
}

第二步:定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="iconfont">&#x33;</span>

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 添加-方框-填充
    .icontianjia-fangkuang-tianchong
  • 扫码
    .iconcode
  • 删除
    .iconshanchu
  • 110导航、地址、位置
    .icondaohangdizhiweizhi
  • 编辑
    .iconbianji
  • 微信
    .iconweixin
  • 解除绑定
    .iconjiechubangding
  • 地址
    .icondizhi
  • 个人中心-地址管理
    .icongerenzhongxin-dizhiguanli
  • tijiaodingdan-youhuiquan
    .icontijiaodingdan-youhuiquan
  • tijiaodingdan-weixin
    .icontijiaodingdan-weixin
  • weigouxuan
    .iconweigouxuan
  • tijiaodingdan-yu e
    .icontijiaodingdan-yue
  • tuanzhanggongzuotai
    .icontuanzhanggongzuotai
  • daijiesuanyongjin
    .icondaijiesuanyongjin
  • daifukuan
    .icondaifukuan
  • wodeyouhuiquan
    .iconwodeyouhuiquan
  • wodekefu
    .iconwodekefu
  • tuanzhangxinxi
    .icontuanzhangxinxi
  • gouxuan
    .icongouxuan
  • jifen
    .iconjifen
  • gouwuche-shanchu
    .icongouwuche-shanchu
  • huiyuan
    .iconhuiyuan
  • kefu
    .iconkefu
  • juxing
    .iconjuxing
  • lingquanzhongxin
    .iconlingquanzhongxin
  • liebiao
    .iconliebiao
  • pingjiazhongxin
    .iconpingjiazhongxin
  • peisongzhong
    .iconpeisongzhong
  • pingjiaxingxing
    .iconpingjiaxingxing
  • qiandai
    .iconqiandai
  • shangpinxiangqing-fenxiang
    .iconshangpinxiangqing-fenxiang
  • shangpinxiangqing-jifen
    .iconshangpinxiangqing-jifen
  • shangpinxiangqing-gouwuche
    .iconshangpinxiangqing-gouwuche
  • shangpinxiangqing-baozhuang
    .iconshangpinxiangqing-baozhuang
  • shangpinxiangqing-guanbi
    .iconshangpinxiangqing-guanbi
  • shangpinxiangqing-dianpu
    .iconshangpinxiangqing-dianpu
  • shangpinxiangqing-kefu
    .iconshangpinxiangqing-kefu
  • shangpinxiangqing-qian
    .iconshangpinxiangqing-qian
  • shangpinxiangqing-shixiao
    .iconshangpinxiangqing-shixiao
  • tihuodianhoutai
    .icontihuodianhoutai
  • shezhi
    .iconshezhi
  • shouhou
    .iconshouhou
  • tijiaodingdan-manjian
    .icontijiaodingdan-manjian
  • shenqingchengshihehuoren
    .iconshenqingchengshihehuoren
  • shenqingtuanzhang
    .iconshenqingtuanzhang
  • tijiaodingdan-dizhi
    .icontijiaodingdan-dizhi
  • tijiaodingdan-haoyou
    .icontijiaodingdan-haoyou
  • dingdanxiangqing-peisongzhong
    .icondingdanxiangqing-peisongzhong
  • dingdanxiangqing-yiwancheng
    .icondingdanxiangqing-yiwancheng
  • tijiaodingdan-gouxuan
    .icontijiaodingdan-gouxuan
  • weipingjiaxingxing
    .iconweipingjiaxingxing
  • gouwuche
    .icongouwuche
  • dingdanxiangqing-wuliu
    .icondingdanxiangqing-wuliu
  • dianhua
    .icondianhua
  • fenxiaogouxuan
    .iconfenxiaogouxuan
  • dingdanxiangqing-daifahuo
    .icondingdanxiangqing-daifahuo
  • ziyuanruzhu
    .iconziyuanruzhu
  • dingdanxiangqing-dizhi
    .icondingdanxiangqing-dizhi
  • fenxiaodingdan
    .iconfenxiaodingdan
  • daitihuo
    .icondaitihuo
  • bofang
    .iconbofang
  • dizhiguanli
    .icondizhiguanli
  • dingdanxiangqing-daitihuo
    .icondingdanxiangqing-daitihuo
  • charutupian
    .iconcharutupian
  • gouwuche-jian
    .icongouwuche-jian
  • tijiaodingdan-youhuiquan-guanbi
    .icontijiaodingdan-youhuiquan-guanbi
  • fenxiao
    .iconfenxiao
  • fenxiaokehu
    .iconfenxiaokehu
  • shangpinxiangqing-zuanshi
    .iconshangpinxiangqing-zuanshi
  • dingdanxiangqing-yiguanbi
    .icondingdanxiangqing-yiguanbi
  • fenxiaoma
    .iconfenxiaoma
  • dingdanxiangqing-daifukuan
    .icondingdanxiangqing-daifukuan
  • dingdanxiangqing-liuyan
    .icondingdanxiangqing-liuyan
  • dingdanxiangqing-daipingjia
    .icondingdanxiangqing-daipingjia
  • gouwuche-jia
    .icongouwuche-jia
  • pc-pingjiaxingxing
    .iconpc-pingjiaxingxing
  • gouwuche1
    .icongouwuche1
  • tihuodianhoutai-shouhoudingdan
    .icontihuodianhoutai-shouhoudingdan
  • tihuodianhoutai-dingdanhexiao
    .icontihuodianhoutai-dingdanhexiao
  • tihuodianhoutai-peisongshezhi
    .icontihuodianhoutai-peisongshezhi
  • tuanzhanggongzuotaijinbi
    .icontuanzhanggongzuotaijinbi
  • tihuodianhoutai-tuanzhangxinxi
    .icontihuodianhoutai-tuanzhangxinxi
  • tihuodianhoutai-qianshoudan
    .icontihuodianhoutai-qianshoudan
  • tuanzhanggongzuitai-tishi
    .icontuanzhanggongzuitai-tishi
  • tihuodianhoutai-yongjin
    .icontihuodianhoutai-yongjin
  • bigeguanlitai-yunxingzhong
    .iconbigeguanlitai-yunxingzhong
  • bigeguanlitai-fuwuqi
    .iconbigeguanlitai-fuwuqi
  • bigeguanlitai-yiguanbi
    .iconbigeguanlitai-yiguanbi
  • tihuodianhoutai-dingdanhexiao
    .icontihuodianhoutai-dingdanhexiao1
  • bigeguanlitai-CDN
    .iconbigeguanlitai-CDN
  • bigeguanlitai-jinrifangke
    .iconbigeguanlitai-jinrifangke
  • bigeguanlitai-jinridingdan
    .iconbigeguanlitai-jinridingdan
  • bigeguanlitai-jinrichengjiaoe
    .iconbigeguanlitai-jinrichengjiaoe
  • PC-tishi1
    .iconPC-tishi
  • PC-shijian
    .iconPC-shijian
  • PC-bianji
    .iconPC-bianji
  • PC-tishi
    .iconPC-tishi1
  • PC-beizhu
    .iconPC-beizhu
  • PC-shouhougongdan-xiangqing-cangkuchulizhong
    .iconPC-shouhougongdan-xiangqing-cangkuchulizhong
  • PC-shouhougongdan-xiangqing-yiwancheng
    .iconPC-shouhougongdan-xiangqing-yiwancheng
  • PC-shangpinguanli-shuxingmoban-shanchu
    .iconPC-shangpinguanli-shuxingmoban-shanchu
  • PC-shouhougongdan-xiangqing-paisongzhong
    .iconPC-shouhougongdan-xiangqing-paisongzhong
  • PC-yichang
    .iconPC-yichang
  • tihuodianhoutai-saosao
    .icontihuodianhoutai-saosao
  • bigeguanlitai-daifukuandingdanshu
    .iconbigeguanlitai-daifukuandingdanshu
  • tihuodianhoutai-shouhoudingdan
    .icontihuodianhoutai-shouhoudingdan1
  • tihuodianhoutai-tuanzhangxinxi
    .icontihuodianhoutai-tuanzhangxinxi1
  • PC-shouhougongdan-xiangqing-peisongzhong
    .iconPC-shouhougongdan-xiangqing-peisongzhong
  • tihuodianhoutai-peisongshezhi
    .icontihuodianhoutai-peisongshezhi1
  • shangchuanpingzheng
    .iconshangchuanpingzheng
  • PC-yibeizhu
    .iconPC-yibeizhu
  • wodeshezhi
    .iconwodeshezhi
  • delete,删除,清除,清理
    .icondelete

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont iconxxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 添加-方框-填充
    #icontianjia-fangkuang-tianchong
  • 扫码
    #iconcode
  • 删除
    #iconshanchu
  • 110导航、地址、位置
    #icondaohangdizhiweizhi
  • 编辑
    #iconbianji
  • 微信
    #iconweixin
  • 解除绑定
    #iconjiechubangding
  • 地址
    #icondizhi
  • 个人中心-地址管理
    #icongerenzhongxin-dizhiguanli
  • tijiaodingdan-youhuiquan
    #icontijiaodingdan-youhuiquan
  • tijiaodingdan-weixin
    #icontijiaodingdan-weixin
  • weigouxuan
    #iconweigouxuan
  • tijiaodingdan-yu e
    #icontijiaodingdan-yue
  • tuanzhanggongzuotai
    #icontuanzhanggongzuotai
  • daijiesuanyongjin
    #icondaijiesuanyongjin
  • daifukuan
    #icondaifukuan
  • wodeyouhuiquan
    #iconwodeyouhuiquan
  • wodekefu
    #iconwodekefu
  • tuanzhangxinxi
    #icontuanzhangxinxi
  • gouxuan
    #icongouxuan
  • jifen
    #iconjifen
  • gouwuche-shanchu
    #icongouwuche-shanchu
  • huiyuan
    #iconhuiyuan
  • kefu
    #iconkefu
  • juxing
    #iconjuxing
  • lingquanzhongxin
    #iconlingquanzhongxin
  • liebiao
    #iconliebiao
  • pingjiazhongxin
    #iconpingjiazhongxin
  • peisongzhong
    #iconpeisongzhong
  • pingjiaxingxing
    #iconpingjiaxingxing
  • qiandai
    #iconqiandai
  • shangpinxiangqing-fenxiang
    #iconshangpinxiangqing-fenxiang
  • shangpinxiangqing-jifen
    #iconshangpinxiangqing-jifen
  • shangpinxiangqing-gouwuche
    #iconshangpinxiangqing-gouwuche
  • shangpinxiangqing-baozhuang
    #iconshangpinxiangqing-baozhuang
  • shangpinxiangqing-guanbi
    #iconshangpinxiangqing-guanbi
  • shangpinxiangqing-dianpu
    #iconshangpinxiangqing-dianpu
  • shangpinxiangqing-kefu
    #iconshangpinxiangqing-kefu
  • shangpinxiangqing-qian
    #iconshangpinxiangqing-qian
  • shangpinxiangqing-shixiao
    #iconshangpinxiangqing-shixiao
  • tihuodianhoutai
    #icontihuodianhoutai
  • shezhi
    #iconshezhi
  • shouhou
    #iconshouhou
  • tijiaodingdan-manjian
    #icontijiaodingdan-manjian
  • shenqingchengshihehuoren
    #iconshenqingchengshihehuoren
  • shenqingtuanzhang
    #iconshenqingtuanzhang
  • tijiaodingdan-dizhi
    #icontijiaodingdan-dizhi
  • tijiaodingdan-haoyou
    #icontijiaodingdan-haoyou
  • dingdanxiangqing-peisongzhong
    #icondingdanxiangqing-peisongzhong
  • dingdanxiangqing-yiwancheng
    #icondingdanxiangqing-yiwancheng
  • tijiaodingdan-gouxuan
    #icontijiaodingdan-gouxuan
  • weipingjiaxingxing
    #iconweipingjiaxingxing
  • gouwuche
    #icongouwuche
  • dingdanxiangqing-wuliu
    #icondingdanxiangqing-wuliu
  • dianhua
    #icondianhua
  • fenxiaogouxuan
    #iconfenxiaogouxuan
  • dingdanxiangqing-daifahuo
    #icondingdanxiangqing-daifahuo
  • ziyuanruzhu
    #iconziyuanruzhu
  • dingdanxiangqing-dizhi
    #icondingdanxiangqing-dizhi
  • fenxiaodingdan
    #iconfenxiaodingdan
  • daitihuo
    #icondaitihuo
  • bofang
    #iconbofang
  • dizhiguanli
    #icondizhiguanli
  • dingdanxiangqing-daitihuo
    #icondingdanxiangqing-daitihuo
  • charutupian
    #iconcharutupian
  • gouwuche-jian
    #icongouwuche-jian
  • tijiaodingdan-youhuiquan-guanbi
    #icontijiaodingdan-youhuiquan-guanbi
  • fenxiao
    #iconfenxiao
  • fenxiaokehu
    #iconfenxiaokehu
  • shangpinxiangqing-zuanshi
    #iconshangpinxiangqing-zuanshi
  • dingdanxiangqing-yiguanbi
    #icondingdanxiangqing-yiguanbi
  • fenxiaoma
    #iconfenxiaoma
  • dingdanxiangqing-daifukuan
    #icondingdanxiangqing-daifukuan
  • dingdanxiangqing-liuyan
    #icondingdanxiangqing-liuyan
  • dingdanxiangqing-daipingjia
    #icondingdanxiangqing-daipingjia
  • gouwuche-jia
    #icongouwuche-jia
  • pc-pingjiaxingxing
    #iconpc-pingjiaxingxing
  • gouwuche1
    #icongouwuche1
  • tihuodianhoutai-shouhoudingdan
    #icontihuodianhoutai-shouhoudingdan
  • tihuodianhoutai-dingdanhexiao
    #icontihuodianhoutai-dingdanhexiao
  • tihuodianhoutai-peisongshezhi
    #icontihuodianhoutai-peisongshezhi
  • tuanzhanggongzuotaijinbi
    #icontuanzhanggongzuotaijinbi
  • tihuodianhoutai-tuanzhangxinxi
    #icontihuodianhoutai-tuanzhangxinxi
  • tihuodianhoutai-qianshoudan
    #icontihuodianhoutai-qianshoudan
  • tuanzhanggongzuitai-tishi
    #icontuanzhanggongzuitai-tishi
  • tihuodianhoutai-yongjin
    #icontihuodianhoutai-yongjin
  • bigeguanlitai-yunxingzhong
    #iconbigeguanlitai-yunxingzhong
  • bigeguanlitai-fuwuqi
    #iconbigeguanlitai-fuwuqi
  • bigeguanlitai-yiguanbi
    #iconbigeguanlitai-yiguanbi
  • tihuodianhoutai-dingdanhexiao
    #icontihuodianhoutai-dingdanhexiao1
  • bigeguanlitai-CDN
    #iconbigeguanlitai-CDN
  • bigeguanlitai-jinrifangke
    #iconbigeguanlitai-jinrifangke
  • bigeguanlitai-jinridingdan
    #iconbigeguanlitai-jinridingdan
  • bigeguanlitai-jinrichengjiaoe
    #iconbigeguanlitai-jinrichengjiaoe
  • PC-tishi1
    #iconPC-tishi
  • PC-shijian
    #iconPC-shijian
  • PC-bianji
    #iconPC-bianji
  • PC-tishi
    #iconPC-tishi1
  • PC-beizhu
    #iconPC-beizhu
  • PC-shouhougongdan-xiangqing-cangkuchulizhong
    #iconPC-shouhougongdan-xiangqing-cangkuchulizhong
  • PC-shouhougongdan-xiangqing-yiwancheng
    #iconPC-shouhougongdan-xiangqing-yiwancheng
  • PC-shangpinguanli-shuxingmoban-shanchu
    #iconPC-shangpinguanli-shuxingmoban-shanchu
  • PC-shouhougongdan-xiangqing-paisongzhong
    #iconPC-shouhougongdan-xiangqing-paisongzhong
  • PC-yichang
    #iconPC-yichang
  • tihuodianhoutai-saosao
    #icontihuodianhoutai-saosao
  • bigeguanlitai-daifukuandingdanshu
    #iconbigeguanlitai-daifukuandingdanshu
  • tihuodianhoutai-shouhoudingdan
    #icontihuodianhoutai-shouhoudingdan1
  • tihuodianhoutai-tuanzhangxinxi
    #icontihuodianhoutai-tuanzhangxinxi1
  • PC-shouhougongdan-xiangqing-peisongzhong
    #iconPC-shouhougongdan-xiangqing-peisongzhong
  • tihuodianhoutai-peisongshezhi
    #icontihuodianhoutai-peisongshezhi1
  • shangchuanpingzheng
    #iconshangchuanpingzheng
  • PC-yibeizhu
    #iconPC-yibeizhu
  • wodeshezhi
    #iconwodeshezhi
  • delete,删除,清除,清理
    #icondelete

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./iconfont.js"></script>

第二步:加入通用 CSS 代码(引入一次就行):

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>