• survey
    
  • pin
    
  • rollback
    
  • arrow
    
  • upload
    
  • loading
    
  • error
    
  • like-fill
    
  • unlike-fill
    
  • validCode
    
  • anq
    
  • source
    
  • stop
    
  • swagger
    
  • qiniu
    
  • tree
    
  • redis
    
  • tools
    
  • user1
    
  • web
    
  • download
    
  • system1
    
  • Steve-Jobs
    
  • sys-tools
    
  • money
    
  • permission
    
  • backup
    
  • gonggao
    
  • tree-table
    
  • mnt
    
  • sqlMonitor
    
  • skill
    
  • zujian
    
  • wechat
    
  • user
    
  • role
    
  • weixin
    
  • fullscreen
    
  • server
    
  • unlock
    
  • international
    
  • refresh
    
  • deploy
    
  • monitor
    
  • java
    
  • phone
    
  • education
    
  • theme
    
  • menu
    
  • chart
    
  • message
    
  • nested
    
  • blog
    
  • timing
    
  • visits
    
  • chain
    
  • app
    
  • alipay
    
  • icon
    
  • github
    
  • index
    
  • edit1
    
  • email
    
  • dept
    
  • login
    
  • link
    
  • log
    
  • dictionary
    
  • error
    
  • peoples
    
  • size
    
  • exit-fullscreen
    
  • list
    
  • fwb
    
  • people
    
  • search
    
  • dev
    
  • codeConsole
    
  • password
    
  • dashboard
    
  • develop
    
  • database
    
  • system
    
  • shopping
    
  • tab
    
  • ipvisits
    
  • lock
    
  • date
    
  • image
    
  • markdown
    
  • doc
    
  • chat-light
    
  • delete
    
  • chat-user
    
  • copy
    
  • airplane
    
  • edit
    
  • clock
    
  • like
    
  • photo
    
  • unlike
    
  • fire
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1712739386496') format('woff2'),
       url('iconfont.woff?t=1712739386496') format('woff'),
       url('iconfont.ttf?t=1712739386496') format('truetype'),
       url('iconfont.svg?t=1712739386496#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"。

  • survey
    .icon-survey
  • pin
    .icon-pin
  • rollback
    .icon-rollback
  • arrow
    .icon-arrow
  • upload
    .icon-upload
  • loading
    .icon-loading
  • error
    .icon-error1
  • like-fill
    .icon-like-fill
  • unlike-fill
    .icon-unlike-fill
  • validCode
    .icon-validCode
  • anq
    .icon-anq
  • source
    .icon-source
  • stop
    .icon-stop
  • swagger
    .icon-swagger
  • qiniu
    .icon-qiniu
  • tree
    .icon-tree
  • redis
    .icon-redis
  • tools
    .icon-tools
  • user1
    .icon-user1
  • web
    .icon-web
  • download
    .icon-download
  • system1
    .icon-system1
  • Steve-Jobs
    .icon-Steve-Jobs
  • sys-tools
    .icon-sys-tools
  • money
    .icon-money
  • permission
    .icon-permission
  • backup
    .icon-backup
  • gonggao
    .icon-gonggao
  • tree-table
    .icon-tree-table
  • mnt
    .icon-mnt
  • sqlMonitor
    .icon-sqlMonitor
  • skill
    .icon-skill
  • zujian
    .icon-zujian
  • wechat
    .icon-wechat
  • user
    .icon-user
  • role
    .icon-role
  • weixin
    .icon-weixin
  • fullscreen
    .icon-fullscreen
  • server
    .icon-server
  • unlock
    .icon-unlock
  • international
    .icon-international
  • refresh
    .icon-refresh
  • deploy
    .icon-deploy
  • monitor
    .icon-monitor
  • java
    .icon-java
  • phone
    .icon-phone
  • education
    .icon-education
  • theme
    .icon-theme
  • menu
    .icon-menu
  • chart
    .icon-chart
  • message
    .icon-message
  • nested
    .icon-nested
  • blog
    .icon-blog
  • timing
    .icon-timing
  • visits
    .icon-visits
  • chain
    .icon-chain
  • app
    .icon-app
  • alipay
    .icon-alipay
  • icon
    .icon-icon
  • github
    .icon-github
  • index
    .icon-index
  • edit1
    .icon-edit1
  • email
    .icon-email
  • dept
    .icon-dept
  • login
    .icon-login
  • link
    .icon-link
  • log
    .icon-log
  • dictionary
    .icon-dictionary
  • error
    .icon-error
  • peoples
    .icon-peoples
  • size
    .icon-size
  • exit-fullscreen
    .icon-exit-fullscreen
  • list
    .icon-list
  • fwb
    .icon-fwb
  • people
    .icon-people
  • search
    .icon-search
  • dev
    .icon-dev
  • codeConsole
    .icon-codeConsole
  • password
    .icon-password
  • dashboard
    .icon-dashboard
  • develop
    .icon-develop
  • database
    .icon-database
  • system
    .icon-system
  • shopping
    .icon-shopping
  • tab
    .icon-tab
  • ipvisits
    .icon-ipvisits
  • lock
    .icon-lock
  • date
    .icon-date
  • image
    .icon-image
  • markdown
    .icon-markdown
  • doc
    .icon-doc
  • chat-light
    .icon-chat-light
  • delete
    .icon-delete
  • chat-user
    .icon-chat-user
  • copy
    .icon-copy
  • airplane
    .icon-airplane
  • edit
    .icon-edit
  • clock
    .icon-clock
  • like
    .icon-like
  • photo
    .icon-photo
  • unlike
    .icon-unlike
  • fire
    .icon-fire

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

  • survey
    #icon-survey
  • pin
    #icon-pin
  • rollback
    #icon-rollback
  • arrow
    #icon-arrow
  • upload
    #icon-upload
  • loading
    #icon-loading
  • error
    #icon-error1
  • like-fill
    #icon-like-fill
  • unlike-fill
    #icon-unlike-fill
  • validCode
    #icon-validCode
  • anq
    #icon-anq
  • source
    #icon-source
  • stop
    #icon-stop
  • swagger
    #icon-swagger
  • qiniu
    #icon-qiniu
  • tree
    #icon-tree
  • redis
    #icon-redis
  • tools
    #icon-tools
  • user1
    #icon-user1
  • web
    #icon-web
  • download
    #icon-download
  • system1
    #icon-system1
  • Steve-Jobs
    #icon-Steve-Jobs
  • sys-tools
    #icon-sys-tools
  • money
    #icon-money
  • permission
    #icon-permission
  • backup
    #icon-backup
  • gonggao
    #icon-gonggao
  • tree-table
    #icon-tree-table
  • mnt
    #icon-mnt
  • sqlMonitor
    #icon-sqlMonitor
  • skill
    #icon-skill
  • zujian
    #icon-zujian
  • wechat
    #icon-wechat
  • user
    #icon-user
  • role
    #icon-role
  • weixin
    #icon-weixin
  • fullscreen
    #icon-fullscreen
  • server
    #icon-server
  • unlock
    #icon-unlock
  • international
    #icon-international
  • refresh
    #icon-refresh
  • deploy
    #icon-deploy
  • monitor
    #icon-monitor
  • java
    #icon-java
  • phone
    #icon-phone
  • education
    #icon-education
  • theme
    #icon-theme
  • menu
    #icon-menu
  • chart
    #icon-chart
  • message
    #icon-message
  • nested
    #icon-nested
  • blog
    #icon-blog
  • timing
    #icon-timing
  • visits
    #icon-visits
  • chain
    #icon-chain
  • app
    #icon-app
  • alipay
    #icon-alipay
  • icon
    #icon-icon
  • github
    #icon-github
  • index
    #icon-index
  • edit1
    #icon-edit1
  • email
    #icon-email
  • dept
    #icon-dept
  • login
    #icon-login
  • link
    #icon-link
  • log
    #icon-log
  • dictionary
    #icon-dictionary
  • error
    #icon-error
  • peoples
    #icon-peoples
  • size
    #icon-size
  • exit-fullscreen
    #icon-exit-fullscreen
  • list
    #icon-list
  • fwb
    #icon-fwb
  • people
    #icon-people
  • search
    #icon-search
  • dev
    #icon-dev
  • codeConsole
    #icon-codeConsole
  • password
    #icon-password
  • dashboard
    #icon-dashboard
  • develop
    #icon-develop
  • database
    #icon-database
  • system
    #icon-system
  • shopping
    #icon-shopping
  • tab
    #icon-tab
  • ipvisits
    #icon-ipvisits
  • lock
    #icon-lock
  • date
    #icon-date
  • image
    #icon-image
  • markdown
    #icon-markdown
  • doc
    #icon-doc
  • chat-light
    #icon-chat-light
  • delete
    #icon-delete
  • chat-user
    #icon-chat-user
  • copy
    #icon-copy
  • airplane
    #icon-airplane
  • edit
    #icon-edit
  • clock
    #icon-clock
  • like
    #icon-like
  • photo
    #icon-photo
  • unlike
    #icon-unlike
  • fire
    #icon-fire

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>