• 应用管理
    
  • 商品管理
    
  • 库存
    
  • 客户
    
  • 收支分析
    
  • 采购管理-采购执行
    
  • 供应商信息
    
  • 女商家
    
  • 
  • erp-enter
    
  • app-bidding
    
  • app-expenses
    
  • app-default
    
  • app-budget
    
  • app-exchange
    
  • app-receipt
    
  • app-issue
    
  • app-project
    
  • app-teamwork
    
  • app-seal
    
  • app-supervise
    
  • app-party
    
  • app-test
    
  • erp-voucher
    
  • erp-account
    
  • erp-balance
    
  • app-aftersales
    
  • app-car
    
  • app-customer
    
  • app-chart
    
  • app-control
    
  • app-goods
    
  • app-invoice
    
  • app-visit
    
  • app-systemservice
    
  • app-report
    
  • app-app
    
  • app-blog
    
  • app-sale
    
  • app-forum
    
  • app-systemlog
    
  • app-signature
    
  • app-purchase
    
  • app-systemset
    
  • app-systemtask
    
  • app-form
    
  • app-query
    
  • app-licence
    
  • app-efficiency
    
  • app-record
    
  • app-supplier
    
  • app-plan
    
  • app-summary
    
  • app-recruit
    
  • app-manage
    
  • app-door
    
  • app-supplies
    
  • app-meeting
    
  • app-study
    
  • app-assets
    
  • app-cockpit
    
  • app-flow
    
  • app-hr-entry
    
  • app-hr-leave
    
  • app-hr-transfer
    
  • app-hr-normal
    
  • app-erp-inventory
    
  • app-erp-leave
    
  • app-erp-transfer
    
  • app-erp-stock
    
  • app-collection
    
  • app-reporting
    
  • app-assignment
    
  • payment
    
  • app-work
    
  • app-org
    
  • app-notice
    
  • app-news
    
  • app-overtime
    
  • app-regulations
    
  • app-user
    
  • app-questions
    
  • app-schedule
    
  • app-salary
    
  • app-travel
    
  • app-role
    
  • app-addressbook
    
  • app-msg
    
  • app-achievement
    
  • app-file
    
  • app-evaluate
    
  • app-contract
    
  • app-album
    
  • app-goout
    
  • app-data
    
  • app-diary
    
  • app-leave
    
  • app-journal
    
  • app-attendance
    
  • app-worked
    
  • app-working
    
  • app-endwork
    
  • app-startwork
    
  • app-replace
    
  • app-reissue
    
  • app-credit
    
  • app-debit
    
  • app-mail
    
  • app-train
    
  • group
    
  • post
    
  • dep
    
  • statistics
    
  • apply
    
  • approve
    
  • get
    
  • insert
    
  • update
    
  • partyandgovernmentsystem
    
  • confidentialdepartment
    
  • informationpublication
    
  • partyandgovernmentsystem-secret
    
  • informationpublication-secret
    
  • confidentialdepartment-secret
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1660009760854'); /* IE9 */
  src: url('iconfont.eot?t=1660009760854#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1660009760854') format('woff2'),
       url('iconfont.woff?t=1660009760854') format('woff'),
       url('iconfont.ttf?t=1660009760854') format('truetype'),
       url('iconfont.svg?t=1660009760854#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"。

  • 应用管理
    .icon-yingyongguanli
  • 商品管理
    .icon-shangpinguanli
  • 库存
    .icon-kucun
  • 客户
    .icon-kehu
  • 收支分析
    .icon-shouzhifenxi
  • 采购管理-采购执行
    .icon-caigouguanli-caigouzhihang
  • 供应商信息
    .icon-gongyingshangxinxi
  • 女商家
    .icon-nvshangjia
  • .icon-nan
  • erp-enter
    .icon-erp-enter
  • app-bidding
    .icon-bidding
  • app-expenses
    .icon-expenses
  • app-default
    .icon-default
  • app-budget
    .icon-budget
  • app-exchange
    .icon-exchange
  • app-receipt
    .icon-receipt
  • app-issue
    .icon-issue
  • app-project
    .icon-project
  • app-teamwork
    .icon-teamwork
  • app-seal
    .icon-seal
  • app-supervise
    .icon-supervise
  • app-party
    .icon-party
  • app-test
    .icon-test
  • erp-voucher
    .icon-erp-voucher
  • erp-account
    .icon-erp-account
  • erp-balance
    .icon-erp-balance
  • app-aftersales
    .icon-aftersales
  • app-car
    .icon-car
  • app-customer
    .icon-customer
  • app-chart
    .icon-chart
  • app-control
    .icon-control
  • app-goods
    .icon-goods
  • app-invoice
    .icon-invoice
  • app-visit
    .icon-visit
  • app-systemservice
    .icon-systemservice
  • app-report
    .icon-report
  • app-app
    .icon-app
  • app-blog
    .icon-blog
  • app-sale
    .icon-sale
  • app-forum
    .icon-forum
  • app-systemlog
    .icon-systemlog
  • app-signature
    .icon-signature
  • app-purchase
    .icon-purchase
  • app-systemset
    .icon-systemset
  • app-systemtask
    .icon-systemtask
  • app-form
    .icon-form
  • app-query
    .icon-query
  • app-licence
    .icon-licence
  • app-efficiency
    .icon-efficiency
  • app-record
    .icon-record
  • app-supplier
    .icon-supplier
  • app-plan
    .icon-plan
  • app-summary
    .icon-summary
  • app-recruit
    .icon-recruit
  • app-manage
    .icon-manage
  • app-door
    .icon-door
  • app-supplies
    .icon-supplies
  • app-meeting
    .icon-meeting
  • app-study
    .icon-study
  • app-assets
    .icon-assets
  • app-cockpit
    .icon-cockpit
  • app-flow
    .icon-flow
  • app-hr-entry
    .icon-hr-entry
  • app-hr-leave
    .icon-hr-leave
  • app-hr-transfer
    .icon-hr-transfer
  • app-hr-normal
    .icon-hr-normal
  • app-erp-inventory
    .icon-erp-inventory
  • app-erp-leave
    .icon-erp-leave
  • app-erp-transfer
    .icon-erp-transfer
  • app-erp-stock
    .icon-erp-stock
  • app-collection
    .icon-collection
  • app-reporting
    .icon-reporting
  • app-assignment
    .icon-assignment
  • payment
    .icon-payment
  • app-work
    .icon-work
  • app-org
    .icon-org
  • app-notice
    .icon-notice
  • app-news
    .icon-news
  • app-overtime
    .icon-overtime
  • app-regulations
    .icon-regulations
  • app-user
    .icon-user
  • app-questions
    .icon-questions
  • app-schedule
    .icon-schedule
  • app-salary
    .icon-salary
  • app-travel
    .icon-travel
  • app-role
    .icon-role
  • app-addressbook
    .icon-addressbook
  • app-msg
    .icon-msg
  • app-achievement
    .icon-achievement
  • app-file
    .icon-file
  • app-evaluate
    .icon-evaluate
  • app-contract
    .icon-contract
  • app-album
    .icon-album
  • app-goout
    .icon-goout
  • app-data
    .icon-data
  • app-diary
    .icon-diary
  • app-leave
    .icon-leave
  • app-journal
    .icon-journal
  • app-attendance
    .icon-attendance
  • app-worked
    .icon-worked
  • app-working
    .icon-working
  • app-endwork
    .icon-endwork
  • app-startwork
    .icon-startwork
  • app-replace
    .icon-replace
  • app-reissue
    .icon-reissue
  • app-credit
    .icon-credit
  • app-debit
    .icon-debit
  • app-mail
    .icon-mail
  • app-train
    .icon-train
  • group
    .icon-group
  • post
    .icon-post
  • dep
    .icon-dep
  • statistics
    .icon-statistics
  • apply
    .icon-apply
  • approve
    .icon-approve
  • get
    .icon-get
  • insert
    .icon-insert
  • update
    .icon-update
  • partyandgovernmentsystem
    .icon-partyandgovernmentsystem
  • confidentialdepartment
    .icon-confidentialdepartment
  • informationpublication
    .icon-informationpublication
  • partyandgovernmentsystem-secret
    .icon-partyandgovernmentsystem-secret
  • informationpublication-secret
    .icon-informationpublication-secret
  • confidentialdepartment-secret
    .icon-confidentialdepartment-secret

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

  • 应用管理
    #icon-yingyongguanli
  • 商品管理
    #icon-shangpinguanli
  • 库存
    #icon-kucun
  • 客户
    #icon-kehu
  • 收支分析
    #icon-shouzhifenxi
  • 采购管理-采购执行
    #icon-caigouguanli-caigouzhihang
  • 供应商信息
    #icon-gongyingshangxinxi
  • 女商家
    #icon-nvshangjia
  • #icon-nan
  • erp-enter
    #icon-erp-enter
  • app-bidding
    #icon-bidding
  • app-expenses
    #icon-expenses
  • app-default
    #icon-default
  • app-budget
    #icon-budget
  • app-exchange
    #icon-exchange
  • app-receipt
    #icon-receipt
  • app-issue
    #icon-issue
  • app-project
    #icon-project
  • app-teamwork
    #icon-teamwork
  • app-seal
    #icon-seal
  • app-supervise
    #icon-supervise
  • app-party
    #icon-party
  • app-test
    #icon-test
  • erp-voucher
    #icon-erp-voucher
  • erp-account
    #icon-erp-account
  • erp-balance
    #icon-erp-balance
  • app-aftersales
    #icon-aftersales
  • app-car
    #icon-car
  • app-customer
    #icon-customer
  • app-chart
    #icon-chart
  • app-control
    #icon-control
  • app-goods
    #icon-goods
  • app-invoice
    #icon-invoice
  • app-visit
    #icon-visit
  • app-systemservice
    #icon-systemservice
  • app-report
    #icon-report
  • app-app
    #icon-app
  • app-blog
    #icon-blog
  • app-sale
    #icon-sale
  • app-forum
    #icon-forum
  • app-systemlog
    #icon-systemlog
  • app-signature
    #icon-signature
  • app-purchase
    #icon-purchase
  • app-systemset
    #icon-systemset
  • app-systemtask
    #icon-systemtask
  • app-form
    #icon-form
  • app-query
    #icon-query
  • app-licence
    #icon-licence
  • app-efficiency
    #icon-efficiency
  • app-record
    #icon-record
  • app-supplier
    #icon-supplier
  • app-plan
    #icon-plan
  • app-summary
    #icon-summary
  • app-recruit
    #icon-recruit
  • app-manage
    #icon-manage
  • app-door
    #icon-door
  • app-supplies
    #icon-supplies
  • app-meeting
    #icon-meeting
  • app-study
    #icon-study
  • app-assets
    #icon-assets
  • app-cockpit
    #icon-cockpit
  • app-flow
    #icon-flow
  • app-hr-entry
    #icon-hr-entry
  • app-hr-leave
    #icon-hr-leave
  • app-hr-transfer
    #icon-hr-transfer
  • app-hr-normal
    #icon-hr-normal
  • app-erp-inventory
    #icon-erp-inventory
  • app-erp-leave
    #icon-erp-leave
  • app-erp-transfer
    #icon-erp-transfer
  • app-erp-stock
    #icon-erp-stock
  • app-collection
    #icon-collection
  • app-reporting
    #icon-reporting
  • app-assignment
    #icon-assignment
  • payment
    #icon-payment
  • app-work
    #icon-work
  • app-org
    #icon-org
  • app-notice
    #icon-notice
  • app-news
    #icon-news
  • app-overtime
    #icon-overtime
  • app-regulations
    #icon-regulations
  • app-user
    #icon-user
  • app-questions
    #icon-questions
  • app-schedule
    #icon-schedule
  • app-salary
    #icon-salary
  • app-travel
    #icon-travel
  • app-role
    #icon-role
  • app-addressbook
    #icon-addressbook
  • app-msg
    #icon-msg
  • app-achievement
    #icon-achievement
  • app-file
    #icon-file
  • app-evaluate
    #icon-evaluate
  • app-contract
    #icon-contract
  • app-album
    #icon-album
  • app-goout
    #icon-goout
  • app-data
    #icon-data
  • app-diary
    #icon-diary
  • app-leave
    #icon-leave
  • app-journal
    #icon-journal
  • app-attendance
    #icon-attendance
  • app-worked
    #icon-worked
  • app-working
    #icon-working
  • app-endwork
    #icon-endwork
  • app-startwork
    #icon-startwork
  • app-replace
    #icon-replace
  • app-reissue
    #icon-reissue
  • app-credit
    #icon-credit
  • app-debit
    #icon-debit
  • app-mail
    #icon-mail
  • app-train
    #icon-train
  • group
    #icon-group
  • post
    #icon-post
  • dep
    #icon-dep
  • statistics
    #icon-statistics
  • apply
    #icon-apply
  • approve
    #icon-approve
  • get
    #icon-get
  • insert
    #icon-insert
  • update
    #icon-update
  • partyandgovernmentsystem
    #icon-partyandgovernmentsystem
  • confidentialdepartment
    #icon-confidentialdepartment
  • informationpublication
    #icon-informationpublication
  • partyandgovernmentsystem-secret
    #icon-partyandgovernmentsystem-secret
  • informationpublication-secret
    #icon-informationpublication-secret
  • confidentialdepartment-secret
    #icon-confidentialdepartment-secret

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>