• 
  • 恢复
    
  • 用户
    
  • 会员
    
  • 评分
    
  • 罗盘_compass83
    
  • 图形外阴影
    
  • 校正线
    
  • 版本
    
  • 隐私
    
  • 淘宝
    
  • 太阳
    
  • 月亮
    
  • 用户协议
    
  • 劵优惠
    
  • 粘贴
    
  • 历史记录
    
  • 隐私
    
  • 隐私协议
    
  • 版本
    
  • 关于
    
  • 优惠券
    
  • 优惠券
    
  • 首页-限时抢购
    
  • 首页(线性)
    
  • 首页
    
  • 首页
    
  • 101home-fill
    
  • home
    
  • home
    
  • home
    
  • 首页
    
  • home
    
  • home
    
  • 首页
    
  • home_fill
    
  • 首页
    
  • home
    
  • home
    
  • account
    
  • account-filling
    
  • Account
    
  • account
    
  • 搜索
    
  • 搜索
    
  • 品牌
    
  • 品牌
    
  • 品牌列表
    
  • 品牌专享
    
  • 品牌热卖
    
  • 品牌
    
  • 品牌
    
  • 品牌
    
  • 品牌馆
    
  • 品牌
    
  • 底部-抢购
    
  • 抢购-fill
    
  • 抢购-2
    
  • 在线抢购
    
  • 限时抢购1
    
  • 抢购
    
  • 拼团-选中
    
  • 拼团
    
  • 拼团
    
  • enter
    
  • browse_fill
    
  • browse
    
  • empty
    
  • empty_fill
    
  • homepage_fill
    
  • homepage
    
  • mine
    
  • mine_fill
    
  • people_fill
    
  • people
    
  • refresh
    
  • return
    
  • setup_fill
    
  • setup
    
  • success_fill
    
  • success
    
  • search
    
  • search fill
    
  • packup
    
  • unfold
    
  • 分享
    
  • 置顶
    
  • 关闭1
    
  • 关闭2-fill
    
  • 提示-fill
    
  • 提示
    
  • 订单
    
  • 反馈
    
  • 分享
    
  • 更多
    
  • 购物车-fill
    
  • 购物车
    
  • 设置
    
  • 首页
    
  • 搜索类目-fill
    
  • 通知-fill
    
  • 通知
    
  • 喜欢-fill
    
  • 喜欢
    
  • 刷新
    
  • 手机淘宝
    
  • sale-fill
    
  • sale
    
  • Android更多
    
  • 类目
    
  • 菜单
    
  • 购物车
    
  • 设置
    
  • 搜索
    
  • 我的订单
    
  • 我的反馈
    
  • 眼睛
    
  • 意见反馈
    
  • 单品
    
  • 户外
    
  • 居家
    
  • 裤子
    
  • 母婴
    
  • 男装
    
  • 内衣
    
  • 女装
    
  • 品牌
    
  • 箱包
    
  • 已售出
    
  • account
    
  • search
    
  • browse
    

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"。

  • .icon-iconset0114
  • 恢复
    .icon-huifu
  • 用户
    .icon-yonghu
  • 会员
    .icon-huiyuan
  • 评分
    .icon-pingfen
  • 罗盘_compass83
    .icon-luopan_compass
  • 图形外阴影
    .icon-tuxingwaiyinying
  • 校正线
    .icon-jiuzhengxian
  • 版本
    .icon-banben1
  • 隐私
    .icon-yinsi2
  • 淘宝
    .icon-taobao
  • 太阳
    .icon-taiyang
  • 月亮
    .icon-yueliang
  • 用户协议
    .icon-yonghuxieyi
  • 劵优惠
    .icon-juanyouhui
  • 粘贴
    .icon-icon-test
  • 历史记录
    .icon-lishijilu
  • 隐私
    .icon-yinsi
  • 隐私协议
    .icon-yinsi1
  • 版本
    .icon-banben
  • 关于
    .icon-guanyu
  • 优惠券
    .icon-youhuiquan
  • 优惠券
    .icon-youhuiquan1
  • 首页-限时抢购
    .icon-shouye-xianshiqianggou
  • 首页(线性)
    .icon-shouye4
  • 首页
    .icon-shouye5
  • 首页
    .icon-shouye6
  • 101home-fill
    .icon-home-fill
  • home
    .icon-552cc4e8ebefe
  • home
    .icon-i-home
  • home
    .icon-home
  • 首页
    .icon-shouye1
  • home
    .icon-home1
  • home
    .icon-home2
  • 首页
    .icon-shouye2
  • home_fill
    .icon-home-
  • 首页
    .icon-shouye3
  • home
    .icon-home3
  • home
    .icon-home4
  • account
    .icon-account2
  • account-filling
    .icon-account-filling
  • Account
    .icon-Account
  • account
    .icon-account1
  • 搜索
    .icon-sousuo1
  • 搜索
    .icon-sousuo-tianchong
  • 品牌
    .icon-pinpai7
  • 品牌
    .icon-pinpai8
  • 品牌列表
    .icon-pinpailiebiao
  • 品牌专享
    .icon-pinpaizhuanxiang
  • 品牌热卖
    .icon-pinpai3
  • 品牌
    .icon-pinpai4
  • 品牌
    .icon-pinpai5
  • 品牌
    .icon-pinpai2
  • 品牌馆
    .icon-pinpaiguan
  • 品牌
    .icon-pinpai1
  • 底部-抢购
    .icon-mall
  • 抢购-fill
    .icon-qianggou-fill
  • 抢购-2
    .icon-qianggou-
  • 在线抢购
    .icon-zaixianqianggou
  • 限时抢购1
    .icon-xianshiqianggou1
  • 抢购
    .icon-qianggou
  • 拼团-选中
    .icon-pintuanxuanzhong
  • 拼团
    .icon-pintuan
  • 拼团
    .icon-pintuan1
  • enter
    .icon-enter
  • browse_fill
    .icon-browse_fill
  • browse
    .icon-browse1
  • empty
    .icon-empty
  • empty_fill
    .icon-empty_fill
  • homepage_fill
    .icon-homepage_fill
  • homepage
    .icon-homepage
  • mine
    .icon-mine
  • mine_fill
    .icon-mine_fill
  • people_fill
    .icon-people_fill
  • people
    .icon-people
  • refresh
    .icon-refresh
  • return
    .icon-return
  • setup_fill
    .icon-setup_fill
  • setup
    .icon-setup
  • success_fill
    .icon-success_fill
  • success
    .icon-success
  • search
    .icon-search1
  • search fill
    .icon-searchfill
  • packup
    .icon-packup
  • unfold
    .icon-unfold
  • 分享
    .icon-fenxiang1
  • 置顶
    .icon-zhiding
  • 关闭1
    .icon-guanbi1
  • 关闭2-fill
    .icon-guanbi2fill
  • 提示-fill
    .icon-tishifill
  • 提示
    .icon-tishi
  • 订单
    .icon-dingdan
  • 反馈
    .icon-fankui
  • 分享
    .icon-fenxiang
  • 更多
    .icon-gengduo
  • 购物车-fill
    .icon-gouwuchefill
  • 购物车
    .icon-gouwuche
  • 设置
    .icon-shezhi
  • 首页
    .icon-shouye
  • 搜索类目-fill
    .icon-sousuoleimufill
  • 通知-fill
    .icon-tongzhifill
  • 通知
    .icon-tongzhi
  • 喜欢-fill
    .icon-xihuanfill
  • 喜欢
    .icon-xihuan
  • 刷新
    .icon-shuaxin
  • 手机淘宝
    .icon-shoujitaobao
  • sale-fill
    .icon-salefill
  • sale
    .icon-sale
  • Android更多
    .icon-androidgengduo
  • 类目
    .icon-leimu
  • 菜单
    .icon-caidan
  • 购物车
    .icon-gouwuche1
  • 设置
    .icon-shezhi1
  • 搜索
    .icon-sousuo
  • 我的订单
    .icon-wodedingdan
  • 我的反馈
    .icon-wodefankui
  • 眼睛
    .icon-yanjing
  • 意见反馈
    .icon-yijianfankui
  • 单品
    .icon-danpin
  • 户外
    .icon-huwai
  • 居家
    .icon-jujia
  • 裤子
    .icon-kuzi
  • 母婴
    .icon-muying
  • 男装
    .icon-nanzhuang
  • 内衣
    .icon-neiyi
  • 女装
    .icon-nvzhuang
  • 品牌
    .icon-pinpai
  • 箱包
    .icon-xiangbao
  • 已售出
    .icon-yishouchu
  • account
    .icon-account
  • search
    .icon-search
  • browse
    .icon-browse

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont icon-xxx"></span>

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

  • #icon-iconset0114
  • 恢复
    #icon-huifu
  • 用户
    #icon-yonghu
  • 会员
    #icon-huiyuan
  • 评分
    #icon-pingfen
  • 罗盘_compass83
    #icon-luopan_compass
  • 图形外阴影
    #icon-tuxingwaiyinying
  • 校正线
    #icon-jiuzhengxian
  • 版本
    #icon-banben1
  • 隐私
    #icon-yinsi2
  • 淘宝
    #icon-taobao
  • 太阳
    #icon-taiyang
  • 月亮
    #icon-yueliang
  • 用户协议
    #icon-yonghuxieyi
  • 劵优惠
    #icon-juanyouhui
  • 粘贴
    #icon-icon-test
  • 历史记录
    #icon-lishijilu
  • 隐私
    #icon-yinsi
  • 隐私协议
    #icon-yinsi1
  • 版本
    #icon-banben
  • 关于
    #icon-guanyu
  • 优惠券
    #icon-youhuiquan
  • 优惠券
    #icon-youhuiquan1
  • 首页-限时抢购
    #icon-shouye-xianshiqianggou
  • 首页(线性)
    #icon-shouye4
  • 首页
    #icon-shouye5
  • 首页
    #icon-shouye6
  • 101home-fill
    #icon-home-fill
  • home
    #icon-552cc4e8ebefe
  • home
    #icon-i-home
  • home
    #icon-home
  • 首页
    #icon-shouye1
  • home
    #icon-home1
  • home
    #icon-home2
  • 首页
    #icon-shouye2
  • home_fill
    #icon-home-
  • 首页
    #icon-shouye3
  • home
    #icon-home3
  • home
    #icon-home4
  • account
    #icon-account2
  • account-filling
    #icon-account-filling
  • Account
    #icon-Account
  • account
    #icon-account1
  • 搜索
    #icon-sousuo1
  • 搜索
    #icon-sousuo-tianchong
  • 品牌
    #icon-pinpai7
  • 品牌
    #icon-pinpai8
  • 品牌列表
    #icon-pinpailiebiao
  • 品牌专享
    #icon-pinpaizhuanxiang
  • 品牌热卖
    #icon-pinpai3
  • 品牌
    #icon-pinpai4
  • 品牌
    #icon-pinpai5
  • 品牌
    #icon-pinpai2
  • 品牌馆
    #icon-pinpaiguan
  • 品牌
    #icon-pinpai1
  • 底部-抢购
    #icon-mall
  • 抢购-fill
    #icon-qianggou-fill
  • 抢购-2
    #icon-qianggou-
  • 在线抢购
    #icon-zaixianqianggou
  • 限时抢购1
    #icon-xianshiqianggou1
  • 抢购
    #icon-qianggou
  • 拼团-选中
    #icon-pintuanxuanzhong
  • 拼团
    #icon-pintuan
  • 拼团
    #icon-pintuan1
  • enter
    #icon-enter
  • browse_fill
    #icon-browse_fill
  • browse
    #icon-browse1
  • empty
    #icon-empty
  • empty_fill
    #icon-empty_fill
  • homepage_fill
    #icon-homepage_fill
  • homepage
    #icon-homepage
  • mine
    #icon-mine
  • mine_fill
    #icon-mine_fill
  • people_fill
    #icon-people_fill
  • people
    #icon-people
  • refresh
    #icon-refresh
  • return
    #icon-return
  • setup_fill
    #icon-setup_fill
  • setup
    #icon-setup
  • success_fill
    #icon-success_fill
  • success
    #icon-success
  • search
    #icon-search1
  • search fill
    #icon-searchfill
  • packup
    #icon-packup
  • unfold
    #icon-unfold
  • 分享
    #icon-fenxiang1
  • 置顶
    #icon-zhiding
  • 关闭1
    #icon-guanbi1
  • 关闭2-fill
    #icon-guanbi2fill
  • 提示-fill
    #icon-tishifill
  • 提示
    #icon-tishi
  • 订单
    #icon-dingdan
  • 反馈
    #icon-fankui
  • 分享
    #icon-fenxiang
  • 更多
    #icon-gengduo
  • 购物车-fill
    #icon-gouwuchefill
  • 购物车
    #icon-gouwuche
  • 设置
    #icon-shezhi
  • 首页
    #icon-shouye
  • 搜索类目-fill
    #icon-sousuoleimufill
  • 通知-fill
    #icon-tongzhifill
  • 通知
    #icon-tongzhi
  • 喜欢-fill
    #icon-xihuanfill
  • 喜欢
    #icon-xihuan
  • 刷新
    #icon-shuaxin
  • 手机淘宝
    #icon-shoujitaobao
  • sale-fill
    #icon-salefill
  • sale
    #icon-sale
  • Android更多
    #icon-androidgengduo
  • 类目
    #icon-leimu
  • 菜单
    #icon-caidan
  • 购物车
    #icon-gouwuche1
  • 设置
    #icon-shezhi1
  • 搜索
    #icon-sousuo
  • 我的订单
    #icon-wodedingdan
  • 我的反馈
    #icon-wodefankui
  • 眼睛
    #icon-yanjing
  • 意见反馈
    #icon-yijianfankui
  • 单品
    #icon-danpin
  • 户外
    #icon-huwai
  • 居家
    #icon-jujia
  • 裤子
    #icon-kuzi
  • 母婴
    #icon-muying
  • 男装
    #icon-nanzhuang
  • 内衣
    #icon-neiyi
  • 女装
    #icon-nvzhuang
  • 品牌
    #icon-pinpai
  • 箱包
    #icon-xiangbao
  • 已售出
    #icon-yishouchu
  • account
    #icon-account
  • search
    #icon-search
  • browse
    #icon-browse

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>