• 分享
    
  • 朋友圈
    
  • 爱心
    
  • check
    
  • 信息列表
    
  • 设置 [转换]
    
  • 爱心
    
  • back
    
  • 暂无数据
    
  • bl 109checked
    
  • 链接
    
  • share
    
  • QQ
    
  • 待发货
    
  • add
    
  • 已抢光
    
  • next
    
  • 老师
    
  • 已领取
    
  • 售后
    
  • 商务合作
    
  • 微博
    
  • 地址
    
  • 上拉
    
  • 金币
    
  • 微信
    
  • circle
    
  • 待付款
    
  • 手机
    
  • 帮助
    
  • hot 角標8
    
  • Parent_Clear
    
  • Minus
    
  • Plus
    
  • wechat payment
    
  • 金币
    
  • 暂无数据
    
  • 列表切换02-01
    
  • Add to download
    
  • ali-pay
    
  • 微信登录
    
  • cancle
    
  • 省略号
    
  • 限时
    
  • delete
    
  • 微信朋友圈
    
  • icon_like
    
  • icon_ Training
    
  • icon_Business district
    
  • icon_Order
    
  • icon_activity
    
  • icon_shoping cart
    
  • icon_my
    
  • icon_heat
    
  • icon_ Message
    
  • icon_Sale
    
  • icon_Physical store
    
  • icon_my store
    
  • icon_Logistics
    
  • icon_vip
    
  • icon_list
    
  • icon_raiders
    
  • icon_sort
    
  • icon_news
    
  • icon_Open shop
    
  • icon_new
    
  • icon_up
    
  • icon_down
    

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

  • 分享
    .iconicon_share_2
  • 朋友圈
    .iconicon_wx_circle
  • 爱心
    .iconicon_favorite_selected
  • check
    .iconicon_check_circle
  • 信息列表
    .iconicon_list_normal
  • 设置 [转换]
    .iconicon_setting
  • 爱心
    .iconicon_favorite
  • back
    .iconicon_back
  • 暂无数据
    .iconicon_no_data
  • bl 109checked
    .iconicon_check
  • 链接
    .iconicon_link
  • share
    .iconicon_share
  • QQ
    .iconicon_qq
  • 待发货
    .iconicon_pre_deliver
  • add
    .iconicon_add
  • 已抢光
    .iconyiqiangguang
  • next
    .iconicon_next
  • 老师
    .iconicon_tutor
  • 已领取
    .iconicon_coupon_received
  • 售后
    .iconicon_after_sale
  • 商务合作
    .iconicon_business_cooperation
  • 微博
    .iconicon_sina
  • 地址
    .iconicon_address
  • 上拉
    .iconicon_pull_up
  • 金币
    .iconicon_balance_pay
  • 微信
    .iconicon_we_chat
  • circle
    .iconicon_circle
  • 待付款
    .iconicon_pre_pay
  • 手机
    .iconicon_login_phone
  • 帮助
    .iconicon_help
  • hot 角標8
    .iconicon_hot
  • Parent_Clear
    .iconicon_clear
  • Minus
    .iconicon_minus
  • Plus
    .iconicon_plus
  • wechat payment
    .iconicon_pay_wechat
  • 金币
    .iconicon_coin
  • 暂无数据
    .iconicon_no_data_search
  • 列表切换02-01
    .iconicon_list_collection
  • Add to download
    .iconicon_download
  • ali-pay
    .iconicon_pay_alipay
  • 微信登录
    .iconicon_login_wechat
  • cancle
    .iconicon_cancle_circle
  • 省略号
    .iconicon_ellipsis
  • 限时
    .iconicon_time_limit
  • delete
    .iconicon_delete
  • 微信朋友圈
    .iconicon_we_chat_circle
  • icon_like
    .iconicon_like
  • icon_ Training
    .iconicon_training
  • icon_Business district
    .iconicon_business_district
  • icon_Order
    .iconicon_order
  • icon_activity
    .iconicon_activity
  • icon_shoping cart
    .iconicon_shopcart
  • icon_my
    .iconicon_user
  • icon_heat
    .iconicon_fire
  • icon_ Message
    .iconicon_voice
  • icon_Sale
    .iconicon_sale
  • icon_Physical store
    .iconicon_physical_store
  • icon_my store
    .iconicon_my_store
  • icon_Logistics
    .iconicon_logistics
  • icon_vip
    .iconicon_vip
  • icon_list
    .iconicon_list
  • icon_raiders
    .iconicon_raiders
  • icon_sort
    .iconicon_classify
  • icon_news
    .iconicon_message
  • icon_Open shop
    .iconicon_open_shop
  • icon_new
    .iconicon_new
  • icon_up
    .iconicon_top
  • icon_down
    .iconicon_down

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

  • 分享
    #iconicon_share_2
  • 朋友圈
    #iconicon_wx_circle
  • 爱心
    #iconicon_favorite_selected
  • check
    #iconicon_check_circle
  • 信息列表
    #iconicon_list_normal
  • 设置 [转换]
    #iconicon_setting
  • 爱心
    #iconicon_favorite
  • back
    #iconicon_back
  • 暂无数据
    #iconicon_no_data
  • bl 109checked
    #iconicon_check
  • 链接
    #iconicon_link
  • share
    #iconicon_share
  • QQ
    #iconicon_qq
  • 待发货
    #iconicon_pre_deliver
  • add
    #iconicon_add
  • 已抢光
    #iconyiqiangguang
  • next
    #iconicon_next
  • 老师
    #iconicon_tutor
  • 已领取
    #iconicon_coupon_received
  • 售后
    #iconicon_after_sale
  • 商务合作
    #iconicon_business_cooperation
  • 微博
    #iconicon_sina
  • 地址
    #iconicon_address
  • 上拉
    #iconicon_pull_up
  • 金币
    #iconicon_balance_pay
  • 微信
    #iconicon_we_chat
  • circle
    #iconicon_circle
  • 待付款
    #iconicon_pre_pay
  • 手机
    #iconicon_login_phone
  • 帮助
    #iconicon_help
  • hot 角標8
    #iconicon_hot
  • Parent_Clear
    #iconicon_clear
  • Minus
    #iconicon_minus
  • Plus
    #iconicon_plus
  • wechat payment
    #iconicon_pay_wechat
  • 金币
    #iconicon_coin
  • 暂无数据
    #iconicon_no_data_search
  • 列表切换02-01
    #iconicon_list_collection
  • Add to download
    #iconicon_download
  • ali-pay
    #iconicon_pay_alipay
  • 微信登录
    #iconicon_login_wechat
  • cancle
    #iconicon_cancle_circle
  • 省略号
    #iconicon_ellipsis
  • 限时
    #iconicon_time_limit
  • delete
    #iconicon_delete
  • 微信朋友圈
    #iconicon_we_chat_circle
  • icon_like
    #iconicon_like
  • icon_ Training
    #iconicon_training
  • icon_Business district
    #iconicon_business_district
  • icon_Order
    #iconicon_order
  • icon_activity
    #iconicon_activity
  • icon_shoping cart
    #iconicon_shopcart
  • icon_my
    #iconicon_user
  • icon_heat
    #iconicon_fire
  • icon_ Message
    #iconicon_voice
  • icon_Sale
    #iconicon_sale
  • icon_Physical store
    #iconicon_physical_store
  • icon_my store
    #iconicon_my_store
  • icon_Logistics
    #iconicon_logistics
  • icon_vip
    #iconicon_vip
  • icon_list
    #iconicon_list
  • icon_raiders
    #iconicon_raiders
  • icon_sort
    #iconicon_classify
  • icon_news
    #iconicon_message
  • icon_Open shop
    #iconicon_open_shop
  • icon_new
    #iconicon_new
  • icon_up
    #iconicon_top
  • icon_down
    #iconicon_down

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>