• abc
    
  • ABC-underline
    
  • pen-draw
    
  • more-vert
    
  • more-horiz
    
  • iconify-material-symbols_check-rounded
    
  • grid
    
  • grid-o
    
  • mood-empty
    
  • loading
    
  • task-o
    
  • refresh
    
  • keyboard-arrow-up
    
  • start-a
    
  • draw-o
    
  • ABC-list
    
  • font-size
    
  • two-columns
    
  • back-rounde
    
  • keyboard-arrow-down
    
  • square-half
    
  • home-o
    
  • home
    
  • setting
    
  • round-star-o
    
  • plus
    
  • star
    
  • minus
    
  • round-star
    
  • star-o
    
  • about-o
    
  • feedback-o
    
  • feedback
    
  • about
    
  • heart-o
    
  • heart
    
  • print
    
  • family
    
  • search-plus
    
  • search
    
  • clock-o
    
  • clock
    
  • search-minus
    
  • setting-o
    
  • line-share
    
  • arrow-up
    
  • arrow-right
    
  • arrow-down
    
  • arrow-left
    
  • success
    
  • moon
    
  • evernote
    
  • sun
    
  • refresh-two
    
  • clear
    
  • guide
    
  • dustbin-o
    
  • editor-o
    
  • close
    
  • download
    
  • error-o
    
  • close-bold
    
  • translate
    
  • share-o
    
  • share
    
  • wechat-o
    

Unicode 引用


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

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
       url('iconfont.ttf?t=1779261979431') format('truetype');
}

第二步:定义使用 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"。

  • abc
    .icon-abc
  • ABC-underline
    .icon-ABC-underline
  • pen-draw
    .icon-pen-draw
  • more-vert
    .icon-more-vert
  • more-horiz
    .icon-more-horiz
  • iconify-material-symbols_check-rounded
    .icon-iconify-material-symbols_check-rounded
  • grid
    .icon-grid
  • grid-o
    .icon-grid-o
  • mood-empty
    .icon-mood-empty
  • loading
    .icon-loading
  • task-o
    .icon-task-o
  • refresh
    .icon-refresh
  • keyboard-arrow-up
    .icon-keyboard-arrow-up
  • start-a
    .icon-start-a
  • draw-o
    .icon-draw-o
  • ABC-list
    .icon-ABC-list
  • font-size
    .icon-font-size
  • two-columns
    .icon-two-columns
  • back-rounde
    .icon-back-rounde
  • keyboard-arrow-down
    .icon-keyboard-arrow-down
  • square-half
    .icon-square-half
  • home-o
    .icon-home-o
  • home
    .icon-home
  • setting
    .icon-setting
  • round-star-o
    .icon-round-star-o
  • plus
    .icon-plus
  • star
    .icon-star
  • minus
    .icon-minus
  • round-star
    .icon-round-star
  • star-o
    .icon-star-o
  • about-o
    .icon-about-o
  • feedback-o
    .icon-feedback-o
  • feedback
    .icon-feedback
  • about
    .icon-about
  • heart-o
    .icon-heart-o
  • heart
    .icon-heart
  • print
    .icon-print
  • family
    .icon-family
  • search-plus
    .icon-search-plus
  • search
    .icon-search
  • clock-o
    .icon-clock-o
  • clock
    .icon-clock
  • search-minus
    .icon-search-minus
  • setting-o
    .icon-setting-o
  • line-share
    .icon-line-share
  • arrow-up
    .icon-arrow-up
  • arrow-right
    .icon-arrow-right
  • arrow-down
    .icon-arrow-down
  • arrow-left
    .icon-arrow-left
  • success
    .icon-success
  • moon
    .icon-moon
  • evernote
    .icon-evernote
  • sun
    .icon-sun
  • refresh-two
    .icon-refresh-two
  • clear
    .icon-clear
  • guide
    .icon-guide
  • dustbin-o
    .icon-dustbin-o
  • editor-o
    .icon-editor-o
  • close
    .icon-close
  • download
    .icon-download
  • error-o
    .icon-error-o
  • close-bold
    .icon-close-bold
  • translate
    .icon-translate
  • share-o
    .icon-share-o
  • share
    .icon-share
  • wechat-o
    .icon-wechat-o

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

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

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

  • abc
    #icon-abc
  • ABC-underline
    #icon-ABC-underline
  • pen-draw
    #icon-pen-draw
  • more-vert
    #icon-more-vert
  • more-horiz
    #icon-more-horiz
  • iconify-material-symbols_check-rounded
    #icon-iconify-material-symbols_check-rounded
  • grid
    #icon-grid
  • grid-o
    #icon-grid-o
  • mood-empty
    #icon-mood-empty
  • loading
    #icon-loading
  • task-o
    #icon-task-o
  • refresh
    #icon-refresh
  • keyboard-arrow-up
    #icon-keyboard-arrow-up
  • start-a
    #icon-start-a
  • draw-o
    #icon-draw-o
  • ABC-list
    #icon-ABC-list
  • font-size
    #icon-font-size
  • two-columns
    #icon-two-columns
  • back-rounde
    #icon-back-rounde
  • keyboard-arrow-down
    #icon-keyboard-arrow-down
  • square-half
    #icon-square-half
  • home-o
    #icon-home-o
  • home
    #icon-home
  • setting
    #icon-setting
  • round-star-o
    #icon-round-star-o
  • plus
    #icon-plus
  • star
    #icon-star
  • minus
    #icon-minus
  • round-star
    #icon-round-star
  • star-o
    #icon-star-o
  • about-o
    #icon-about-o
  • feedback-o
    #icon-feedback-o
  • feedback
    #icon-feedback
  • about
    #icon-about
  • heart-o
    #icon-heart-o
  • heart
    #icon-heart
  • print
    #icon-print
  • family
    #icon-family
  • search-plus
    #icon-search-plus
  • search
    #icon-search
  • clock-o
    #icon-clock-o
  • clock
    #icon-clock
  • search-minus
    #icon-search-minus
  • setting-o
    #icon-setting-o
  • line-share
    #icon-line-share
  • arrow-up
    #icon-arrow-up
  • arrow-right
    #icon-arrow-right
  • arrow-down
    #icon-arrow-down
  • arrow-left
    #icon-arrow-left
  • success
    #icon-success
  • moon
    #icon-moon
  • evernote
    #icon-evernote
  • sun
    #icon-sun
  • refresh-two
    #icon-refresh-two
  • clear
    #icon-clear
  • guide
    #icon-guide
  • dustbin-o
    #icon-dustbin-o
  • editor-o
    #icon-editor-o
  • close
    #icon-close
  • download
    #icon-download
  • error-o
    #icon-error-o
  • close-bold
    #icon-close-bold
  • translate
    #icon-translate
  • share-o
    #icon-share-o
  • share
    #icon-share
  • wechat-o
    #icon-wechat-o

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>