• 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=1778054314485') 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"。

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

  • 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>