• arrow-down
    
  • pushpin
    
  • history
    
  • bug
    
  • bug
    
  • arrow-up
    
  • folder
    
  • pull-request
    
  • anchor
    
  • analyze-分析
    
  • run
    
  • Star
    
  • coding
    
  • logout
    
  • safty
    
  • save
    
  • fonts-safty
    
  • web__API权限
    
  • addition_fill
    
  • addition
    
  • addpeople_fill
    
  • addpeople
    
  • brush
    
  • brush_fill
    
  • computer_fill
    
  • computer
    
  • empty
    
  • empty_fill
    
  • flag_fill
    
  • flag
    
  • flashlight
    
  • flashlight_fill
    
  • homepage_fill
    
  • homepage
    
  • label
    
  • label_fill
    
  • lock_fill
    
  • lock
    
  • mail
    
  • mail_fill
    
  • mine
    
  • mine_fill
    
  • people_fill
    
  • people
    
  • prompt_fill
    
  • prompt
    
  • remind_fill
    
  • remind
    
  • send
    
  • setup_fill
    
  • setup
    
  • tailor
    
  • release
    
  • release
    
  • tech
    
  • workbench-o
    
  • workbench
    
  • CodeSandbox
    
  • AK-ZY日历
    
  • 创新思维
    
  • attachment
    
  • export
    
  • import
    
  • product
    
  • radar
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

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

  • arrow-down
    .icon-arrowdown
  • pushpin
    .icon-pushpin
  • history
    .icon-history
  • bug
    .icon-bug
  • bug
    .icon-bug_fill
  • arrow-up
    .icon-arrowup
  • folder
    .icon-folder
  • pull-request
    .icon-request
  • anchor
    .icon-anchor
  • analyze-分析
    .icon-analyze
  • run
    .icon-run
  • Star
    .icon-star
  • coding
    .icon-coding
  • logout
    .icon-logout
  • safty
    .icon-safty
  • save
    .icon-save
  • fonts-safty
    .icon-safty_fill
  • web__API权限
    .icon-auth
  • addition_fill
    .icon-addition_fill
  • addition
    .icon-addition
  • addpeople_fill
    .icon-addpeople_fill
  • addpeople
    .icon-addpeople
  • brush
    .icon-brush
  • brush_fill
    .icon-brush_fill
  • computer_fill
    .icon-computer_fill
  • computer
    .icon-computer
  • empty
    .icon-empty
  • empty_fill
    .icon-empty_fill
  • flag_fill
    .icon-flag_fill
  • flag
    .icon-flag
  • flashlight
    .icon-flashlight
  • flashlight_fill
    .icon-flashlight_fill
  • homepage_fill
    .icon-homepage_fill
  • homepage
    .icon-homepage
  • label
    .icon-label
  • label_fill
    .icon-label_fill
  • lock_fill
    .icon-lock_fill
  • lock
    .icon-lock
  • mail
    .icon-mail
  • mail_fill
    .icon-mail_fill
  • mine
    .icon-mine
  • mine_fill
    .icon-mine_fill
  • people_fill
    .icon-people_fill
  • people
    .icon-people
  • prompt_fill
    .icon-prompt_fill
  • prompt
    .icon-prompt
  • remind_fill
    .icon-remind_fill
  • remind
    .icon-remind
  • send
    .icon-send
  • setup_fill
    .icon-setup_fill
  • setup
    .icon-setup
  • tailor
    .icon-tailor
  • release
    .icon-release
  • release
    .icon-release_fill
  • tech
    .icon-tech
  • workbench-o
    .icon-workbench
  • workbench
    .icon-workbench_fill
  • CodeSandbox
    .icon-sandbox
  • AK-ZY日历
    .icon-calendar
  • 创新思维
    .icon-minder
  • attachment
    .icon-attachment
  • export
    .icon-export
  • import
    .icon-import
  • product
    .icon-icon-product
  • radar
    .icon-radar

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

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

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

  • arrow-down
    #icon-arrowdown
  • pushpin
    #icon-pushpin
  • history
    #icon-history
  • bug
    #icon-bug
  • bug
    #icon-bug_fill
  • arrow-up
    #icon-arrowup
  • folder
    #icon-folder
  • pull-request
    #icon-request
  • anchor
    #icon-anchor
  • analyze-分析
    #icon-analyze
  • run
    #icon-run
  • Star
    #icon-star
  • coding
    #icon-coding
  • logout
    #icon-logout
  • safty
    #icon-safty
  • save
    #icon-save
  • fonts-safty
    #icon-safty_fill
  • web__API权限
    #icon-auth
  • addition_fill
    #icon-addition_fill
  • addition
    #icon-addition
  • addpeople_fill
    #icon-addpeople_fill
  • addpeople
    #icon-addpeople
  • brush
    #icon-brush
  • brush_fill
    #icon-brush_fill
  • computer_fill
    #icon-computer_fill
  • computer
    #icon-computer
  • empty
    #icon-empty
  • empty_fill
    #icon-empty_fill
  • flag_fill
    #icon-flag_fill
  • flag
    #icon-flag
  • flashlight
    #icon-flashlight
  • flashlight_fill
    #icon-flashlight_fill
  • homepage_fill
    #icon-homepage_fill
  • homepage
    #icon-homepage
  • label
    #icon-label
  • label_fill
    #icon-label_fill
  • lock_fill
    #icon-lock_fill
  • lock
    #icon-lock
  • mail
    #icon-mail
  • mail_fill
    #icon-mail_fill
  • mine
    #icon-mine
  • mine_fill
    #icon-mine_fill
  • people_fill
    #icon-people_fill
  • people
    #icon-people
  • prompt_fill
    #icon-prompt_fill
  • prompt
    #icon-prompt
  • remind_fill
    #icon-remind_fill
  • remind
    #icon-remind
  • send
    #icon-send
  • setup_fill
    #icon-setup_fill
  • setup
    #icon-setup
  • tailor
    #icon-tailor
  • release
    #icon-release
  • release
    #icon-release_fill
  • tech
    #icon-tech
  • workbench-o
    #icon-workbench
  • workbench
    #icon-workbench_fill
  • CodeSandbox
    #icon-sandbox
  • AK-ZY日历
    #icon-calendar
  • 创新思维
    #icon-minder
  • attachment
    #icon-attachment
  • export
    #icon-export
  • import
    #icon-import
  • product
    #icon-icon-product
  • radar
    #icon-radar

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>