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

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

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