• heart
    
  • heart
    
  • bottom
    
  • direction-down
    
  • direction-right
    
  • direction-up
    
  • direction-left
    
  • top
    
  • desktop
    
  • language
    
  • VIP
    
  • Call
    
  • folder-upload
    
  • folder-add
    
  • check
    
  • upload
    
  • left
    
  • right
    
  • ellipsis
    
  • smile
    
  • profile
    
  • icons8-mind_map
    
  • fly
    
  • markdown-line
    
  • robot
    
  • file
    
  • 公海管理
    
  • folder
    
  • clues
    
  • customer
    
  • details
    
  • down
    
  • top
    
  • move
    
  • add_col_after
    
  • add_col_before
    
  • add_row_after
    
  • bold
    
  • add_row_before
    
  • italic
    
  • delete_col
    
  • combine_cells
    
  • paragraph
    
  • quote
    
  • ol
    
  • delete_row
    
  • underline
    
  • image
    
  • delete_table
    
  • ul
    
  • redo
    
  • table
    
  • undo
    
  • link
    
  • hr
    
  • strike
    
  • code
    
  • merge-cells
    
  • edit
    
  • pause
    
  • book
    
  • code
    
  • bell
    
  • save
    
  • empty-box
    
  • tools
    
  • link
    
  • user
    
  • lock
    
  • magic-wand
    
  • thumbs-o-down
    
  • thumbs-o-up
    
  • gift
    
  • VIP
    
  • 个人认证
    
  • 企业认证
    
  • 认证
    
  • phone
    
  • 进行中
    
  • download
    
  • play
    
  • Refresh
    
  • warning
    
  • select
    
  • select_checkbox_pre
    
  • down
    
  • up
    
  • question
    
  • cny
    
  • star
    
  • copy
    
  • search
    
  • configIcon
    
  • chart
    
  • music
    
  • gift
    
  • share
    
  • users
    
  • sad
    
  • scan
    
  • pc
    
  • card
    
  • credit
    
  • description
    
  • flag
    
  • qr_code
    
  • sign
    
  • remove
    
  • filter
    
  • tag
    
  • time
    
  • angle-left
    
  • angle-up
    
  • angle2
    
  • angle-bottom
    
  • trash
    
  • checked
    
  • ios-close-outline
    
  • plus
    
  • zoom out
    
  • zoom in
    
  • image
    
  • phone
    
  • email
    
  • log-out
    
  • password
    
  • address
    
  • confirm
    
  • usered
    
  • home
    
  • category
    
  • cart
    
  • 完成
    
  • list
    
  • 物流
    
  • 付款
    
  • weibo
    
  • wechat
    
  • QQ
    
  • eye
    
  • 想去
    
  • 评论
    
  • list
    

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

  • heart
    .icon-heart
  • heart
    .icon-heart-alt
  • bottom
    .icon-bottom
  • direction-down
    .icon-direction-down
  • direction-right
    .icon-direction-right
  • direction-up
    .icon-direction-up
  • direction-left
    .icon-direction-left
  • top
    .icon-top1
  • desktop
    .icon-desktop
  • language
    .icon-language
  • VIP
    .icon-VIP
  • Call
    .icon-Call
  • folder-upload
    .icon-folder-upload
  • folder-add
    .icon-folder-add
  • check
    .icon-check
  • upload
    .icon-upload
  • left
    .icon-left
  • right
    .icon-right
  • ellipsis
    .icon-ellipsis2
  • smile
    .icon-smile
  • profile
    .icon-profile
  • icons8-mind_map
    .icon-icons-mind_map
  • fly
    .icon-fly
  • markdown-line
    .icon-markdown-line
  • robot
    .icon-robot
  • file
    .icon-fill222
  • 公海管理
    .icon-gonghaiguanli
  • folder
    .icon-folder
  • clues
    .icon-clues
  • customer
    .icon-customer
  • details
    .icon-details
  • down
    .icon-down1
  • top
    .icon-top
  • move
    .icon-move
  • add_col_after
    .icon-add_col_after
  • add_col_before
    .icon-add_col_before
  • add_row_after
    .icon-add_row_after
  • bold
    .icon-bold1
  • add_row_before
    .icon-add_row_before
  • italic
    .icon-italic1
  • delete_col
    .icon-delete_col
  • combine_cells
    .icon-combine_cells
  • paragraph
    .icon-paragraph
  • quote
    .icon-quote
  • ol
    .icon-ol
  • delete_row
    .icon-delete_row
  • underline
    .icon-underline1
  • image
    .icon-image1
  • delete_table
    .icon-delete_table
  • ul
    .icon-ul
  • redo
    .icon-redo1
  • table
    .icon-table
  • undo
    .icon-undo1
  • link
    .icon-link
  • hr
    .icon-hr
  • strike
    .icon-strike
  • code
    .icon-code1
  • merge-cells
    .icon-merge-cells
  • edit
    .icon-edit
  • pause
    .icon-pause1
  • book
    .icon-book
  • code
    .icon-code3
  • bell
    .icon-bell
  • save
    .icon-save1
  • empty-box
    .icon-emptybox
  • tools
    .icon-tools
  • link
    .icon-link2
  • user
    .icon-user
  • lock
    .icon-lock1
  • magic-wand
    .icon-magicwand
  • thumbs-o-down
    .icon-thumbsodown
  • thumbs-o-up
    .icon-thumbsoup
  • gift
    .icon-gift1
  • VIP
    .icon-vip1
  • 个人认证
    .icon-gerenrenzheng
  • 企业认证
    .icon-qiyerenzheng
  • 认证
    .icon-renzheng
  • phone
    .icon-1101dianhua
  • 进行中
    .icon-shouye
  • download
    .icon-download1
  • play
    .icon-play3
  • Refresh
    .icon-Refresh
  • warning
    .icon-weibiaoti2
  • select
    .icon-select
  • select_checkbox_pre
    .icon-selectcheckboxpre
  • down
    .icon-down
  • up
    .icon-up
  • question
    .icon-question2
  • cny
    .icon-cny1
  • star
    .icon-star-copy
  • copy
    .icon-copy
  • search
    .icon-search1
  • configIcon
    .icon-04
  • chart
    .icon-chart
  • music
    .icon-music1
  • gift
    .icon-gift
  • share
    .icon-share1
  • users
    .icon-users1
  • sad
    .icon-sad
  • scan
    .icon-scan1
  • pc
    .icon-pc
  • card
    .icon-cart1
  • credit
    .icon-credit1
  • description
    .icon-description1
  • flag
    .icon-flag1
  • qr_code
    .icon-qr_code
  • sign
    .icon-sign1
  • remove
    .icon-close
  • filter
    .icon-filter
  • tag
    .icon-tag
  • time
    .icon-time
  • angle-left
    .icon-angleleft
  • angle-up
    .icon-angle-up
  • angle2
    .icon-angle2
  • angle-bottom
    .icon-angle-bottom
  • trash
    .icon-trash
  • checked
    .icon-checked
  • ios-close-outline
    .icon-ioscloseoutline
  • plus
    .icon-plus1
  • zoom out
    .icon-zoomout
  • zoom in
    .icon-zoom-in
  • image
    .icon-image
  • phone
    .icon-phone
  • email
    .icon-email
  • log-out
    .icon-log-out
  • password
    .icon-password
  • address
    .icon-address
  • confirm
    .icon-confirm
  • usered
    .icon-usered
  • home
    .icon-home
  • category
    .icon-category
  • cart
    .icon-cart
  • 完成
    .icon-wancheng-alt
  • list
    .icon-list1
  • 物流
    .icon-wuliu
  • 付款
    .icon-fukuan
  • weibo
    .icon-weibo
  • wechat
    .icon-wechat
  • QQ
    .icon-qq-copy
  • eye
    .icon-eye1
  • 想去
    .icon-xiangqu
  • 评论
    .icon-pinglun
  • list
    .icon-list

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

  • heart
    #icon-heart
  • heart
    #icon-heart-alt
  • bottom
    #icon-bottom
  • direction-down
    #icon-direction-down
  • direction-right
    #icon-direction-right
  • direction-up
    #icon-direction-up
  • direction-left
    #icon-direction-left
  • top
    #icon-top1
  • desktop
    #icon-desktop
  • language
    #icon-language
  • VIP
    #icon-VIP
  • Call
    #icon-Call
  • folder-upload
    #icon-folder-upload
  • folder-add
    #icon-folder-add
  • check
    #icon-check
  • upload
    #icon-upload
  • left
    #icon-left
  • right
    #icon-right
  • ellipsis
    #icon-ellipsis2
  • smile
    #icon-smile
  • profile
    #icon-profile
  • icons8-mind_map
    #icon-icons-mind_map
  • fly
    #icon-fly
  • markdown-line
    #icon-markdown-line
  • robot
    #icon-robot
  • file
    #icon-fill222
  • 公海管理
    #icon-gonghaiguanli
  • folder
    #icon-folder
  • clues
    #icon-clues
  • customer
    #icon-customer
  • details
    #icon-details
  • down
    #icon-down1
  • top
    #icon-top
  • move
    #icon-move
  • add_col_after
    #icon-add_col_after
  • add_col_before
    #icon-add_col_before
  • add_row_after
    #icon-add_row_after
  • bold
    #icon-bold1
  • add_row_before
    #icon-add_row_before
  • italic
    #icon-italic1
  • delete_col
    #icon-delete_col
  • combine_cells
    #icon-combine_cells
  • paragraph
    #icon-paragraph
  • quote
    #icon-quote
  • ol
    #icon-ol
  • delete_row
    #icon-delete_row
  • underline
    #icon-underline1
  • image
    #icon-image1
  • delete_table
    #icon-delete_table
  • ul
    #icon-ul
  • redo
    #icon-redo1
  • table
    #icon-table
  • undo
    #icon-undo1
  • link
    #icon-link
  • hr
    #icon-hr
  • strike
    #icon-strike
  • code
    #icon-code1
  • merge-cells
    #icon-merge-cells
  • edit
    #icon-edit
  • pause
    #icon-pause1
  • book
    #icon-book
  • code
    #icon-code3
  • bell
    #icon-bell
  • save
    #icon-save1
  • empty-box
    #icon-emptybox
  • tools
    #icon-tools
  • link
    #icon-link2
  • user
    #icon-user
  • lock
    #icon-lock1
  • magic-wand
    #icon-magicwand
  • thumbs-o-down
    #icon-thumbsodown
  • thumbs-o-up
    #icon-thumbsoup
  • gift
    #icon-gift1
  • VIP
    #icon-vip1
  • 个人认证
    #icon-gerenrenzheng
  • 企业认证
    #icon-qiyerenzheng
  • 认证
    #icon-renzheng
  • phone
    #icon-1101dianhua
  • 进行中
    #icon-shouye
  • download
    #icon-download1
  • play
    #icon-play3
  • Refresh
    #icon-Refresh
  • warning
    #icon-weibiaoti2
  • select
    #icon-select
  • select_checkbox_pre
    #icon-selectcheckboxpre
  • down
    #icon-down
  • up
    #icon-up
  • question
    #icon-question2
  • cny
    #icon-cny1
  • star
    #icon-star-copy
  • copy
    #icon-copy
  • search
    #icon-search1
  • configIcon
    #icon-04
  • chart
    #icon-chart
  • music
    #icon-music1
  • gift
    #icon-gift
  • share
    #icon-share1
  • users
    #icon-users1
  • sad
    #icon-sad
  • scan
    #icon-scan1
  • pc
    #icon-pc
  • card
    #icon-cart1
  • credit
    #icon-credit1
  • description
    #icon-description1
  • flag
    #icon-flag1
  • qr_code
    #icon-qr_code
  • sign
    #icon-sign1
  • remove
    #icon-close
  • filter
    #icon-filter
  • tag
    #icon-tag
  • time
    #icon-time
  • angle-left
    #icon-angleleft
  • angle-up
    #icon-angle-up
  • angle2
    #icon-angle2
  • angle-bottom
    #icon-angle-bottom
  • trash
    #icon-trash
  • checked
    #icon-checked
  • ios-close-outline
    #icon-ioscloseoutline
  • plus
    #icon-plus1
  • zoom out
    #icon-zoomout
  • zoom in
    #icon-zoom-in
  • image
    #icon-image
  • phone
    #icon-phone
  • email
    #icon-email
  • log-out
    #icon-log-out
  • password
    #icon-password
  • address
    #icon-address
  • confirm
    #icon-confirm
  • usered
    #icon-usered
  • home
    #icon-home
  • category
    #icon-category
  • cart
    #icon-cart
  • 完成
    #icon-wancheng-alt
  • list
    #icon-list1
  • 物流
    #icon-wuliu
  • 付款
    #icon-fukuan
  • weibo
    #icon-weibo
  • wechat
    #icon-wechat
  • QQ
    #icon-qq-copy
  • eye
    #icon-eye1
  • 想去
    #icon-xiangqu
  • 评论
    #icon-pinglun
  • list
    #icon-list

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>