• 微信
    
  • QQ
    
  • logout
    
  • 恢复
    
  • 𐃂
    workchat
    𐃂
  • progress
    
  • zip
    
  • gz
    
  • tar
    
  • bz2
    
  • chat
    
  • aiassistant
    
  • aichat
    
  • aitrans
    
  • aiknow
    
  • airecording
    
  • aispoken
    
  • aisetting
    
  • aidown
    
  • 𐃁
    aicreation
    𐃁
  • aisd
    
  • mp4
    
  • mp3
    
  • link
    
  • url
    
  • error
    
  • question
    
  • warning
    
  • account
    
  • language
    
  • system
    
  • personal
    
  • image
    
  • video
    
  • java
    
  • tsx
    
  • py
    
  • vue
    
  • tiff
    
  • bmp
    
  • bb
    
  • html
    
  • css
    
  • xml文件
    
  • flow
    
  • unknow
    
  • js
    
  • json
    
  • doc
    
  • txt
    
  • docx
    
  • disk
    
  • disket
    
  • pdf
    
  • notices
    
  • wifi
    
  • battery
    
  • ink
    
  • info
    
  • calculator
    
  • todo
    
  • gant
    
  • draw
    
  • music
    
  • brower
    
  • calendar
    
  • gallery
    
  • terminal
    
  • noteapp
    
  • note
    
  • editorapp
    
  • kanban
    
  • mindext
    
  • kb
    
  • backup
    
  • computer
    
  • computer2
    
  • unknow
    
  • picedit
    
  • psd
    
  • photo
    
  • noteexe
    
  • markdown
    
  • jpg
    
  • gif
    
  • png
    
  • svg
    
  • ttf
    
  • webp
    
  • md
    
  • word
    
  • pptexe
    
  • pptx
    
  • note
    
  • xlsx
    
  • excel
    
  • xls
    
  • ppt
    
  • store
    
  • mind
    
  • mindexe
    
  • setup
    
  • setting
    
  • folder
    
  • favorite
    
  • cut
    
  • baiban
    
  • notice
    
  • windows
    
  • file
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 微信
    .icon-weixin
  • QQ
    .icon-qq
  • logout
    .icon-logout
  • 恢复
    .icon-huifu
  • workchat
    .icon-workchat
  • progress
    .icon-progress
  • zip
    .icon-zip
  • gz
    .icon-gz
  • tar
    .icon-tar
  • bz2
    .icon-bz2
  • chat
    .icon-chat
  • aiassistant
    .icon-aiassistant
  • aichat
    .icon-aichat
  • aitrans
    .icon-aitrans
  • aiknow
    .icon-aiknow
  • airecording
    .icon-airecording
  • aispoken
    .icon-aispoken
  • aisetting
    .icon-aisetting
  • aidown
    .icon-aidown
  • aicreation
    .icon-aicreation
  • aisd
    .icon-aisd
  • mp4
    .icon-mp4
  • mp3
    .icon-mp3
  • link
    .icon-link
  • url
    .icon-url
  • error
    .icon-error
  • question
    .icon-question
  • warning
    .icon-warning
  • account
    .icon-account
  • language
    .icon-language
  • system
    .icon-system
  • personal
    .icon-personal
  • image
    .icon-image
  • video
    .icon-video
  • java
    .icon-java
  • tsx
    .icon-tsx
  • py
    .icon-py
  • vue
    .icon-vue
  • tiff
    .icon-tiff
  • bmp
    .icon-bmp
  • bb
    .icon-bb
  • html
    .icon-html
  • css
    .icon-css
  • xml文件
    .icon-xmlwenjian
  • flow
    .icon-flow
  • unknow
    .icon-unknow1
  • js
    .icon-js
  • json
    .icon-json
  • doc
    .icon-doc
  • txt
    .icon-txt
  • docx
    .icon-docx
  • disk
    .icon-disk
  • disket
    .icon-disknet
  • pdf
    .icon-pdf
  • notices
    .icon-notices
  • wifi
    .icon-wifi
  • battery
    .icon-battery
  • ink
    .icon-ink
  • info
    .icon-info
  • calculator
    .icon-calculator
  • todo
    .icon-todo
  • gant
    .icon-gant
  • draw
    .icon-draw
  • music
    .icon-music
  • brower
    .icon-brower
  • calendar
    .icon-calendar
  • gallery
    .icon-gallery
  • terminal
    .icon-terminal
  • noteapp
    .icon-noteapp
  • note
    .icon-biji
  • editorapp
    .icon-editorbt
  • kanban
    .icon-kanban
  • mindext
    .icon-mindext
  • kb
    .icon-kb
  • backup
    .icon-backup
  • computer
    .icon-diannao
  • computer2
    .icon-computer2
  • unknow
    .icon-unknow
  • picedit
    .icon-picedit
  • psd
    .icon-psd
  • photo
    .icon-photo
  • noteexe
    .icon-noteexe
  • markdown
    .icon-markdown
  • jpg
    .icon-jpg
  • gif
    .icon-gif
  • png
    .icon-png
  • svg
    .icon-svg
  • ttf
    .icon-ttf
  • webp
    .icon-webp
  • md
    .icon-md
  • word
    .icon-word
  • pptexe
    .icon-pptexe
  • pptx
    .icon-pptx
  • note
    .icon-note
  • xlsx
    .icon-xlsx
  • excel
    .icon-excel
  • xls
    .icon-xls1
  • ppt
    .icon-ppt
  • store
    .icon-store
  • mind
    .icon-mind
  • mindexe
    .icon-mindexe
  • setup
    .icon-setup
  • setting
    .icon-setting
  • folder
    .icon-folder
  • favorite
    .icon-favorite
  • cut
    .icon-cut
  • baiban
    .icon-baiban
  • notice
    .icon-notice
  • windows
    .icon-windows
  • file
    .icon-file

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-weixin
  • QQ
    #icon-qq
  • logout
    #icon-logout
  • 恢复
    #icon-huifu
  • workchat
    #icon-workchat
  • progress
    #icon-progress
  • zip
    #icon-zip
  • gz
    #icon-gz
  • tar
    #icon-tar
  • bz2
    #icon-bz2
  • chat
    #icon-chat
  • aiassistant
    #icon-aiassistant
  • aichat
    #icon-aichat
  • aitrans
    #icon-aitrans
  • aiknow
    #icon-aiknow
  • airecording
    #icon-airecording
  • aispoken
    #icon-aispoken
  • aisetting
    #icon-aisetting
  • aidown
    #icon-aidown
  • aicreation
    #icon-aicreation
  • aisd
    #icon-aisd
  • mp4
    #icon-mp4
  • mp3
    #icon-mp3
  • link
    #icon-link
  • url
    #icon-url
  • error
    #icon-error
  • question
    #icon-question
  • warning
    #icon-warning
  • account
    #icon-account
  • language
    #icon-language
  • system
    #icon-system
  • personal
    #icon-personal
  • image
    #icon-image
  • video
    #icon-video
  • java
    #icon-java
  • tsx
    #icon-tsx
  • py
    #icon-py
  • vue
    #icon-vue
  • tiff
    #icon-tiff
  • bmp
    #icon-bmp
  • bb
    #icon-bb
  • html
    #icon-html
  • css
    #icon-css
  • xml文件
    #icon-xmlwenjian
  • flow
    #icon-flow
  • unknow
    #icon-unknow1
  • js
    #icon-js
  • json
    #icon-json
  • doc
    #icon-doc
  • txt
    #icon-txt
  • docx
    #icon-docx
  • disk
    #icon-disk
  • disket
    #icon-disknet
  • pdf
    #icon-pdf
  • notices
    #icon-notices
  • wifi
    #icon-wifi
  • battery
    #icon-battery
  • ink
    #icon-ink
  • info
    #icon-info
  • calculator
    #icon-calculator
  • todo
    #icon-todo
  • gant
    #icon-gant
  • draw
    #icon-draw
  • music
    #icon-music
  • brower
    #icon-brower
  • calendar
    #icon-calendar
  • gallery
    #icon-gallery
  • terminal
    #icon-terminal
  • noteapp
    #icon-noteapp
  • note
    #icon-biji
  • editorapp
    #icon-editorbt
  • kanban
    #icon-kanban
  • mindext
    #icon-mindext
  • kb
    #icon-kb
  • backup
    #icon-backup
  • computer
    #icon-diannao
  • computer2
    #icon-computer2
  • unknow
    #icon-unknow
  • picedit
    #icon-picedit
  • psd
    #icon-psd
  • photo
    #icon-photo
  • noteexe
    #icon-noteexe
  • markdown
    #icon-markdown
  • jpg
    #icon-jpg
  • gif
    #icon-gif
  • png
    #icon-png
  • svg
    #icon-svg
  • ttf
    #icon-ttf
  • webp
    #icon-webp
  • md
    #icon-md
  • word
    #icon-word
  • pptexe
    #icon-pptexe
  • pptx
    #icon-pptx
  • note
    #icon-note
  • xlsx
    #icon-xlsx
  • excel
    #icon-excel
  • xls
    #icon-xls1
  • ppt
    #icon-ppt
  • store
    #icon-store
  • mind
    #icon-mind
  • mindexe
    #icon-mindexe
  • setup
    #icon-setup
  • setting
    #icon-setting
  • folder
    #icon-folder
  • favorite
    #icon-favorite
  • cut
    #icon-cut
  • baiban
    #icon-baiban
  • notice
    #icon-notice
  • windows
    #icon-windows
  • file
    #icon-file

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>