• camera4
    
  • camera1
    
  • plus
    
  • search-1
    
  • scan
    
  • search
    
  • download
    
  • share-external
    
  • select-all
    
  • share-internal
    
  • share-alt
    
  • settings
    
  • Export
    
  • drag-arrow
    
  • import
    
  • message-banned
    
  • poweroff
    
  • reply
    
  • list
    
  • more-vertical
    
  • more
    
  • refresh
    
  • message
    
  • Screenshot
    
  • close-circle-fill
    
  • pen
    
  • delete
    
  • archive
    
  • config
    
  • card
    
  • datama
    
  • mobile
    
  • mirror
    
  • storage
    
  • stamp
    
  • command
    
  • user-group
    
  • video-camera
    
  • experiment
    
  • woman
    
  • desktop
    
  • shake
    
  • file-pdf
    
  • file-audio
    
  • book
    
  • file
    
  • tag
    
  • file-image
    
  • file-video
    
  • tags
    
  • user
    
  • empty
    
  • sun
    
  • moon
    
  • wifi
    
  • branch
    
  • location
    
  • unlock
    
  • schedule
    
  • dice
    
  • loading
    
  • email
    
  • stop
    
  • question-circle
    
  • exclamation-circle
    
  • clock-circle
    
  • plus-circle
    
  • check-square
    
  • close-circle
    
  • check-circle
    
  • info-circle
    
  • minus-circle
    
  • double-down
    
  • shrink
    
  • expand
    
  • double-right
    
  • double-left
    
  • double-up
    
  • left
    
  • up
    
  • right
    
  • down
    
  • arrow-rise
    
  • to-bottom
    
  • to-right
    
  • to-left
    
  • arrow-fall
    
  • caret-right
    
  • to-top
    
  • caret-up
    
  • caret-left
    
  • caret-down
    
  • robot-add
    
  • pushpin
    
  • phone
    
  • public
    
  • notification-close
    
  • nav
    
  • notification
    
  • printer
    
  • qrcode
    
  • language
    
  • data
    
  • datama
    
  • old-version
    
  • application
    
  • subscribe
    
  • subscribe-add
    
  • common
    
  • skin
    
  • thunderbolt
    
  • Fire
    
  • folder-delete
    
  • folder-add
    
  • apps
    
  • mobile
    
  • tool
    
  • drive-file
    
  • subscribed
    
  • robot
    
  • folder
    
  • safe
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • camera4
    .icon-a-Group427319425shexiangtou4dian
  • camera1
    .icon-a-Group427319426shexiangdian1
  • plus
    .icon-plus
  • search-1
    .icon-search-1
  • scan
    .icon-scan
  • search
    .icon-search
  • download
    .icon-download
  • share-external
    .icon-share-external
  • select-all
    .icon-select-all
  • share-internal
    .icon-share-internal
  • share-alt
    .icon-share-alt
  • settings
    .icon-settings
  • Export
    .icon-Export
  • drag-arrow
    .icon-drag-arrow
  • import
    .icon-import
  • message-banned
    .icon-message-banned
  • poweroff
    .icon-poweroff
  • reply
    .icon-reply
  • list
    .icon-list
  • more-vertical
    .icon-more-vertical
  • more
    .icon-more
  • refresh
    .icon-refresh
  • message
    .icon-message
  • Screenshot
    .icon-Screenshot
  • close-circle-fill
    .icon-close-circle-fill
  • pen
    .icon-pen1
  • delete
    .icon-delete
  • archive
    .icon-archive
  • config
    .icon-config
  • card
    .icon-card
  • datama
    .icon-datama1
  • mobile
    .icon-mobile1
  • mirror
    .icon-mirror
  • storage
    .icon-storage
  • stamp
    .icon-stamp
  • command
    .icon-command
  • user-group
    .icon-user-group
  • video-camera
    .icon-video-camera
  • experiment
    .icon-experiment
  • woman
    .icon-woman
  • desktop
    .icon-desktop
  • shake
    .icon-shake
  • file-pdf
    .icon-file-pdf
  • file-audio
    .icon-file-audio
  • book
    .icon-book
  • file
    .icon-file
  • tag
    .icon-tag
  • file-image
    .icon-file-image
  • file-video
    .icon-file-video
  • tags
    .icon-tags
  • user
    .icon-user
  • empty
    .icon-empty
  • sun
    .icon-sun
  • moon
    .icon-moon
  • wifi
    .icon-wifi
  • branch
    .icon-branch
  • location
    .icon-location
  • unlock
    .icon-unlock
  • schedule
    .icon-schedule
  • dice
    .icon-dice
  • loading
    .icon-loading
  • email
    .icon-email
  • stop
    .icon-stop
  • question-circle
    .icon-question-circle
  • exclamation-circle
    .icon-exclamation-circle
  • clock-circle
    .icon-clock-circle
  • plus-circle
    .icon-plus-circle
  • check-square
    .icon-check-square
  • close-circle
    .icon-close-circle
  • check-circle
    .icon-check-circle
  • info-circle
    .icon-info-circle
  • minus-circle
    .icon-minus-circle
  • double-down
    .icon-double-down
  • shrink
    .icon-shrink
  • expand
    .icon-expand
  • double-right
    .icon-double-right
  • double-left
    .icon-double-left
  • double-up
    .icon-double-up
  • left
    .icon-left
  • up
    .icon-up
  • right
    .icon-right
  • down
    .icon-down
  • arrow-rise
    .icon-arrow-rise
  • to-bottom
    .icon-to-bottom
  • to-right
    .icon-to-right
  • to-left
    .icon-to-left
  • arrow-fall
    .icon-arrow-fall
  • caret-right
    .icon-caret-right
  • to-top
    .icon-to-top
  • caret-up
    .icon-caret-up
  • caret-left
    .icon-caret-left
  • caret-down
    .icon-caret-down
  • robot-add
    .icon-robot-add
  • pushpin
    .icon-pushpin
  • phone
    .icon-phone
  • public
    .icon-public
  • notification-close
    .icon-notification-close
  • nav
    .icon-nav
  • notification
    .icon-notification
  • printer
    .icon-printer
  • qrcode
    .icon-qrcode
  • language
    .icon-language
  • data
    .icon-data
  • datama
    .icon-datama
  • old-version
    .icon-old-version
  • application
    .icon-application
  • subscribe
    .icon-subscribe
  • subscribe-add
    .icon-subscribe-add
  • common
    .icon-common
  • skin
    .icon-skin
  • thunderbolt
    .icon-thunderbolt
  • Fire
    .icon-Fire
  • folder-delete
    .icon-folder-delete
  • folder-add
    .icon-folder-add
  • apps
    .icon-apps
  • mobile
    .icon-mobile
  • tool
    .icon-tool
  • drive-file
    .icon-drive-file
  • subscribed
    .icon-subscribed
  • robot
    .icon-robot
  • folder
    .icon-folder
  • safe
    .icon-safe

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

  • camera4
    #icon-a-Group427319425shexiangtou4dian
  • camera1
    #icon-a-Group427319426shexiangdian1
  • plus
    #icon-plus
  • search-1
    #icon-search-1
  • scan
    #icon-scan
  • search
    #icon-search
  • download
    #icon-download
  • share-external
    #icon-share-external
  • select-all
    #icon-select-all
  • share-internal
    #icon-share-internal
  • share-alt
    #icon-share-alt
  • settings
    #icon-settings
  • Export
    #icon-Export
  • drag-arrow
    #icon-drag-arrow
  • import
    #icon-import
  • message-banned
    #icon-message-banned
  • poweroff
    #icon-poweroff
  • reply
    #icon-reply
  • list
    #icon-list
  • more-vertical
    #icon-more-vertical
  • more
    #icon-more
  • refresh
    #icon-refresh
  • message
    #icon-message
  • Screenshot
    #icon-Screenshot
  • close-circle-fill
    #icon-close-circle-fill
  • pen
    #icon-pen1
  • delete
    #icon-delete
  • archive
    #icon-archive
  • config
    #icon-config
  • card
    #icon-card
  • datama
    #icon-datama1
  • mobile
    #icon-mobile1
  • mirror
    #icon-mirror
  • storage
    #icon-storage
  • stamp
    #icon-stamp
  • command
    #icon-command
  • user-group
    #icon-user-group
  • video-camera
    #icon-video-camera
  • experiment
    #icon-experiment
  • woman
    #icon-woman
  • desktop
    #icon-desktop
  • shake
    #icon-shake
  • file-pdf
    #icon-file-pdf
  • file-audio
    #icon-file-audio
  • book
    #icon-book
  • file
    #icon-file
  • tag
    #icon-tag
  • file-image
    #icon-file-image
  • file-video
    #icon-file-video
  • tags
    #icon-tags
  • user
    #icon-user
  • empty
    #icon-empty
  • sun
    #icon-sun
  • moon
    #icon-moon
  • wifi
    #icon-wifi
  • branch
    #icon-branch
  • location
    #icon-location
  • unlock
    #icon-unlock
  • schedule
    #icon-schedule
  • dice
    #icon-dice
  • loading
    #icon-loading
  • email
    #icon-email
  • stop
    #icon-stop
  • question-circle
    #icon-question-circle
  • exclamation-circle
    #icon-exclamation-circle
  • clock-circle
    #icon-clock-circle
  • plus-circle
    #icon-plus-circle
  • check-square
    #icon-check-square
  • close-circle
    #icon-close-circle
  • check-circle
    #icon-check-circle
  • info-circle
    #icon-info-circle
  • minus-circle
    #icon-minus-circle
  • double-down
    #icon-double-down
  • shrink
    #icon-shrink
  • expand
    #icon-expand
  • double-right
    #icon-double-right
  • double-left
    #icon-double-left
  • double-up
    #icon-double-up
  • left
    #icon-left
  • up
    #icon-up
  • right
    #icon-right
  • down
    #icon-down
  • arrow-rise
    #icon-arrow-rise
  • to-bottom
    #icon-to-bottom
  • to-right
    #icon-to-right
  • to-left
    #icon-to-left
  • arrow-fall
    #icon-arrow-fall
  • caret-right
    #icon-caret-right
  • to-top
    #icon-to-top
  • caret-up
    #icon-caret-up
  • caret-left
    #icon-caret-left
  • caret-down
    #icon-caret-down
  • robot-add
    #icon-robot-add
  • pushpin
    #icon-pushpin
  • phone
    #icon-phone
  • public
    #icon-public
  • notification-close
    #icon-notification-close
  • nav
    #icon-nav
  • notification
    #icon-notification
  • printer
    #icon-printer
  • qrcode
    #icon-qrcode
  • language
    #icon-language
  • data
    #icon-data
  • datama
    #icon-datama
  • old-version
    #icon-old-version
  • application
    #icon-application
  • subscribe
    #icon-subscribe
  • subscribe-add
    #icon-subscribe-add
  • common
    #icon-common
  • skin
    #icon-skin
  • thunderbolt
    #icon-thunderbolt
  • Fire
    #icon-Fire
  • folder-delete
    #icon-folder-delete
  • folder-add
    #icon-folder-add
  • apps
    #icon-apps
  • mobile
    #icon-mobile
  • tool
    #icon-tool
  • drive-file
    #icon-drive-file
  • subscribed
    #icon-subscribed
  • robot
    #icon-robot
  • folder
    #icon-folder
  • safe
    #icon-safe

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>