• 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
    
  • refresh2
    
  • sun
    
  • refresh
    
  • 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=1776676168680') 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"。

  • 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
  • refresh2
    .icon-refresh2
  • sun
    .icon-sun
  • refresh
    .icon-refresh
  • 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"。

  • 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
  • refresh2
    #icon-refresh2
  • sun
    #icon-sun
  • refresh
    #icon-refresh
  • 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>