• add
    
  • search
    
  • member-fill
    
  • advertisement-fill
    
  • sign in
    
  • task
    
  • coin
    
  • set
    
  • arrow-right
    
  • member
    
  • set
    
  • crown
    
  • ad
    
  • 收藏
    
  • more
    
  • wechat
    
  • 朋友圈
    
  • love2
    
  • pencil
    
  • book
    
  • share
    
  • more read
    
  • comment
    
  • bookmark
    
  • love
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: 
       url('data:font/ttf;charset=utf-8;base64,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') 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"。

  • add
    .icon-add
  • search
    .icon-search
  • member-fill
    .icon-member-fill
  • advertisement-fill
    .icon-advertisement-fill
  • sign in
    .icon-signin
  • task
    .icon-task
  • coin
    .icon-yue
  • set
    .icon-set1
  • arrow-right
    .icon-arrow-right
  • member
    .icon-member
  • set
    .icon-set
  • crown
    .icon-crown
  • ad
    .icon-ad
  • 收藏
    .icon-favorite
  • more
    .icon-more1
  • wechat
    .icon-wechat
  • 朋友圈
    .icon-moments
  • love2
    .icon-love-selected
  • pencil
    .icon-pencil
  • book
    .icon-book
  • share
    .icon-share
  • more read
    .icon-more
  • comment
    .icon-comment
  • bookmark
    .icon-bookmark
  • love
    .icon-love

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

  • add
    #icon-add
  • search
    #icon-search
  • member-fill
    #icon-member-fill
  • advertisement-fill
    #icon-advertisement-fill
  • sign in
    #icon-signin
  • task
    #icon-task
  • coin
    #icon-yue
  • set
    #icon-set1
  • arrow-right
    #icon-arrow-right
  • member
    #icon-member
  • set
    #icon-set
  • crown
    #icon-crown
  • ad
    #icon-ad
  • 收藏
    #icon-favorite
  • more
    #icon-more1
  • wechat
    #icon-wechat
  • 朋友圈
    #icon-moments
  • love2
    #icon-love-selected
  • pencil
    #icon-pencil
  • book
    #icon-book
  • share
    #icon-share
  • more read
    #icon-more
  • comment
    #icon-comment
  • bookmark
    #icon-bookmark
  • love
    #icon-love

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>