• APP-01
    
  • menu-users
    
  • 用户管理
    
  • menu-point
    
  • 方块
    
  • 复制
    
  • 机构认证
    
  • 搜索
    
  • 问号
    
  • 上传
    
  • 下载模版
    
  • exit
    
  • calling
    
  • triangle-down
    
  • triangle-left
    
  • form-select
    
  • form-attachment
    
  • form-checkbox
    
  • form-radio
    
  • form-date
    
  • form-textarea
    
  • form-input
    
  • wating
    
  • more-2
    
  • preview
    
  • block
    
  • password
    
  • account
    
  • filter
    
  • menu-order-input
    
  • menu-order-output
    
  • arrow-right-down@3x
    
  • arrow-2right@3x
    
  • arrow-2up@3x
    
  • arrow-2left@3x
    
  • arrow-2down@3x
    
  • check-on
    
  • download-2
    
  • menu-book
    
  • menu-notify
    
  • menu-bell
    
  • eye-off
    
  • alert2
    
  • tips2
    
  • phone
    
  • arrow-left
    
  • arrow-right
    
  • password-sharp
    
  • list
    
  • triangle-arrow
    
  • layer
    
  • folder
    
  • menu-setting
    
  • menu-setting
    
  • menu-user
    
  • search
    
  • menu-order
    
  • save
    
  • refresh
    
  • plus-3
    
  • move
    
  • share-input
    
  • tips
    
  • triangle-order
    
  • transition
    
  • setting
    
  • time
    
  • upload-1
    
  • upload-2
    
  • menu-data
    
  • triangle-up
    
  • share
    
  • menu-user
    
  • menu-folder
    
  • general-more
    
  • menu-daily
    
  • arrow-right
    
  • alert
    
  • arrow-down
    
  • arrow-up
    
  • ban
    
  • arrow2-down
    
  • arrow2-up
    
  • calendar
    
  • check-1off
    
  • arrow-left
    
  • check-2off
    
  • menu-centre
    
  • check-3on
    
  • check-3off
    
  • check-1on
    
  • configuration
    
  • copy
    
  • component-bell
    
  • cut
    
  • download-1
    
  • delete
    
  • edit
    
  • link
    
  • eye-on
    
  • menu-application
    
  • menu-configure
    
  • menu-calculation
    
  • menu-daily
    
  • menu-communication
    
  • menu-merge
    
  • menu-monitor
    
  • menu-edit
    
  • menu-folder
    
  • general-more
    
  • menu-centre
    
  • menu-homepage
    
  • menu-data
    
  • menu-order
    
  • menu-organization
    
  • minus-1
    
  • minus-3
    
  • minus-2
    
  • menu-union
    
  • menu-trace
    
  • plus-1
    
  • menu-password
    
  • plus-2
    
  • power
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • APP-01
    .icon-menu-APP
  • menu-users
    .icon-memu-users
  • 用户管理
    .icon-yonghuguanli
  • menu-point
    .icon-menu-point
  • 方块
    .icon-fangkuai1
  • 复制
    .icon-fuzhi
  • 机构认证
    .icon-jigourenzheng
  • 搜索
    .icon-sousuo
  • 问号
    .icon-wenhao
  • 上传
    .icon-shangchuan
  • 下载模版
    .icon-xiazaimoban
  • exit
    .icon-exit
  • calling
    .icon-calling
  • triangle-down
    .icon-triangle-down3x
  • triangle-left
    .icon-triangle-left
  • form-select
    .icon-form-select
  • form-attachment
    .icon-form-attachment
  • form-checkbox
    .icon-form-checkbox
  • form-radio
    .icon-form-radio
  • form-date
    .icon-form-date
  • form-textarea
    .icon-form-textarea
  • form-input
    .icon-form-input
  • wating
    .icon-wating
  • more-2
    .icon-more-2
  • preview
    .icon-preview3x
  • block
    .icon-block
  • password
    .icon-password
  • account
    .icon-account
  • filter
    .icon-filter
  • menu-order-input
    .icon-menu-order-input
  • menu-order-output
    .icon-menu-order-output
  • arrow-right-down@3x
    .icon-arrow-right-down3x
  • arrow-2right@3x
    .icon-arrow-2right
  • arrow-2up@3x
    .icon-arrow-2up
  • arrow-2left@3x
    .icon-arrow-2left3x
  • arrow-2down@3x
    .icon-arrow-2down3x
  • check-on
    .icon-check-on
  • download-2
    .icon-download-2
  • menu-book
    .icon-menu-book
  • menu-notify
    .icon-menuNotify
  • menu-bell
    .icon-menu-bell
  • eye-off
    .icon-eye-off
  • alert2
    .icon-alert23x
  • tips2
    .icon-tips23x
  • phone
    .icon-phone
  • arrow-left
    .icon-arrow-left1
  • arrow-right
    .icon-arrow-right1
  • password-sharp
    .icon-password-sharp
  • list
    .icon-list
  • triangle-arrow
    .icon-triangle-arrow
  • layer
    .icon-layer
  • folder
    .icon-folder
  • menu-setting
    .icon-menu-setting1
  • menu-setting
    .icon-menuSetting1
  • menu-user
    .icon-menuUser
  • search
    .icon-search
  • menu-order
    .icon-menu-order
  • save
    .icon-save
  • refresh
    .icon-refresh
  • plus-3
    .icon-plus-3
  • move
    .icon-move
  • share-input
    .icon-share-input
  • tips
    .icon-tips
  • triangle-order
    .icon-triangle-order
  • transition
    .icon-transition
  • setting
    .icon-setting
  • time
    .icon-time
  • upload-1
    .icon-upload-1
  • upload-2
    .icon-upload-2
  • menu-data
    .icon-menu-data
  • triangle-up
    .icon-triangle-up
  • share
    .icon-share
  • menu-user
    .icon-menu-user
  • menu-folder
    .icon-menu-folder
  • general-more
    .icon-more-copy
  • menu-daily
    .icon-menu-daily
  • arrow-right
    .icon-arrow-right
  • alert
    .icon-alert
  • arrow-down
    .icon-arrow-down
  • arrow-up
    .icon-arrow-up
  • ban
    .icon-ban
  • arrow2-down
    .icon-arrow2-down
  • arrow2-up
    .icon-arrow2-up
  • calendar
    .icon-calendar
  • check-1off
    .icon-check-1off
  • arrow-left
    .icon-arrow-left
  • check-2off
    .icon-check-2off
  • menu-centre
    .icon-menu-centre
  • check-3on
    .icon-check-3on
  • check-3off
    .icon-check-3off
  • check-1on
    .icon-check-1on
  • configuration
    .icon-configuration
  • copy
    .icon-copy
  • component-bell
    .icon-component-bell
  • cut
    .icon-cut
  • download-1
    .icon-download-1
  • delete
    .icon-delete
  • edit
    .icon-edit
  • link
    .icon-link
  • eye-on
    .icon-eye-on
  • menu-application
    .icon-menu-application
  • menu-configure
    .icon-menu-configure
  • menu-calculation
    .icon-menu-calculation
  • menu-daily
    .icon-menuDdaily
  • menu-communication
    .icon-menu-communication
  • menu-merge
    .icon-menu-merge
  • menu-monitor
    .icon-menu-monitor
  • menu-edit
    .icon-menu-edit
  • menu-folder
    .icon-menuFolder
  • general-more
    .icon-more
  • menu-centre
    .icon-menuCentre
  • menu-homepage
    .icon-menu-homepage
  • menu-data
    .icon-menuData
  • menu-order
    .icon-menuOrder
  • menu-organization
    .icon-menu-organization
  • minus-1
    .icon-minus-1
  • minus-3
    .icon-minus-3
  • minus-2
    .icon-minus-2
  • menu-union
    .icon-menu-union
  • menu-trace
    .icon-menu-trace
  • plus-1
    .icon-plus-1
  • menu-password
    .icon-menu-password
  • plus-2
    .icon-plus-2
  • power
    .icon-power

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

  • APP-01
    #icon-menu-APP
  • menu-users
    #icon-memu-users
  • 用户管理
    #icon-yonghuguanli
  • menu-point
    #icon-menu-point
  • 方块
    #icon-fangkuai1
  • 复制
    #icon-fuzhi
  • 机构认证
    #icon-jigourenzheng
  • 搜索
    #icon-sousuo
  • 问号
    #icon-wenhao
  • 上传
    #icon-shangchuan
  • 下载模版
    #icon-xiazaimoban
  • exit
    #icon-exit
  • calling
    #icon-calling
  • triangle-down
    #icon-triangle-down3x
  • triangle-left
    #icon-triangle-left
  • form-select
    #icon-form-select
  • form-attachment
    #icon-form-attachment
  • form-checkbox
    #icon-form-checkbox
  • form-radio
    #icon-form-radio
  • form-date
    #icon-form-date
  • form-textarea
    #icon-form-textarea
  • form-input
    #icon-form-input
  • wating
    #icon-wating
  • more-2
    #icon-more-2
  • preview
    #icon-preview3x
  • block
    #icon-block
  • password
    #icon-password
  • account
    #icon-account
  • filter
    #icon-filter
  • menu-order-input
    #icon-menu-order-input
  • menu-order-output
    #icon-menu-order-output
  • arrow-right-down@3x
    #icon-arrow-right-down3x
  • arrow-2right@3x
    #icon-arrow-2right
  • arrow-2up@3x
    #icon-arrow-2up
  • arrow-2left@3x
    #icon-arrow-2left3x
  • arrow-2down@3x
    #icon-arrow-2down3x
  • check-on
    #icon-check-on
  • download-2
    #icon-download-2
  • menu-book
    #icon-menu-book
  • menu-notify
    #icon-menuNotify
  • menu-bell
    #icon-menu-bell
  • eye-off
    #icon-eye-off
  • alert2
    #icon-alert23x
  • tips2
    #icon-tips23x
  • phone
    #icon-phone
  • arrow-left
    #icon-arrow-left1
  • arrow-right
    #icon-arrow-right1
  • password-sharp
    #icon-password-sharp
  • list
    #icon-list
  • triangle-arrow
    #icon-triangle-arrow
  • layer
    #icon-layer
  • folder
    #icon-folder
  • menu-setting
    #icon-menu-setting1
  • menu-setting
    #icon-menuSetting1
  • menu-user
    #icon-menuUser
  • search
    #icon-search
  • menu-order
    #icon-menu-order
  • save
    #icon-save
  • refresh
    #icon-refresh
  • plus-3
    #icon-plus-3
  • move
    #icon-move
  • share-input
    #icon-share-input
  • tips
    #icon-tips
  • triangle-order
    #icon-triangle-order
  • transition
    #icon-transition
  • setting
    #icon-setting
  • time
    #icon-time
  • upload-1
    #icon-upload-1
  • upload-2
    #icon-upload-2
  • menu-data
    #icon-menu-data
  • triangle-up
    #icon-triangle-up
  • share
    #icon-share
  • menu-user
    #icon-menu-user
  • menu-folder
    #icon-menu-folder
  • general-more
    #icon-more-copy
  • menu-daily
    #icon-menu-daily
  • arrow-right
    #icon-arrow-right
  • alert
    #icon-alert
  • arrow-down
    #icon-arrow-down
  • arrow-up
    #icon-arrow-up
  • ban
    #icon-ban
  • arrow2-down
    #icon-arrow2-down
  • arrow2-up
    #icon-arrow2-up
  • calendar
    #icon-calendar
  • check-1off
    #icon-check-1off
  • arrow-left
    #icon-arrow-left
  • check-2off
    #icon-check-2off
  • menu-centre
    #icon-menu-centre
  • check-3on
    #icon-check-3on
  • check-3off
    #icon-check-3off
  • check-1on
    #icon-check-1on
  • configuration
    #icon-configuration
  • copy
    #icon-copy
  • component-bell
    #icon-component-bell
  • cut
    #icon-cut
  • download-1
    #icon-download-1
  • delete
    #icon-delete
  • edit
    #icon-edit
  • link
    #icon-link
  • eye-on
    #icon-eye-on
  • menu-application
    #icon-menu-application
  • menu-configure
    #icon-menu-configure
  • menu-calculation
    #icon-menu-calculation
  • menu-daily
    #icon-menuDdaily
  • menu-communication
    #icon-menu-communication
  • menu-merge
    #icon-menu-merge
  • menu-monitor
    #icon-menu-monitor
  • menu-edit
    #icon-menu-edit
  • menu-folder
    #icon-menuFolder
  • general-more
    #icon-more
  • menu-centre
    #icon-menuCentre
  • menu-homepage
    #icon-menu-homepage
  • menu-data
    #icon-menuData
  • menu-order
    #icon-menuOrder
  • menu-organization
    #icon-menu-organization
  • minus-1
    #icon-minus-1
  • minus-3
    #icon-minus-3
  • minus-2
    #icon-minus-2
  • menu-union
    #icon-menu-union
  • menu-trace
    #icon-menu-trace
  • plus-1
    #icon-plus-1
  • menu-password
    #icon-menu-password
  • plus-2
    #icon-plus-2
  • power
    #icon-power

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>