• advance
    
  • assist
    
  • Plain text
    
  • minification
    
  • Blow up
    
  • Big subtitles
    
  • Mouse
    
  • Audio
    
  • Color matching
    
  • Auxiliary line
    
  • recoil
    
  • reset
    
  • quit
    
  • Read aloud
    
  • Sound off
    
  • Arrow-right
    
  • Edit
    
  • Pause
    
  • pdf
    
  • Union (1)
    
  • xlxs
    
  • Add
    
  • cutting
    
  • date
    
  • Close-one
    
  • delete
    
  • attachment
    
  • 
    education
    
  • Full screen
    
  • Download
    
  • Eyes
    
  • examination
    
  • Eyes1
    
  • Office document
    
  • reminder
    
  • ppt
    
  • tick
    
  • Tag
    
  • word
    
  • txt
    
  • leisure
    
  • To-top
    
  • time
    
  • Vector (Stroke)
    
  • Arrow-circle-left
    
  • Arrow-circle-right
    
  • complete
    
  • Redo
    
  • Up-one (上1)
    
  • Comment
    
  • Share-two
    
  • Thumbs-up
    
  • card 1
    
  • Star
    
  • Left arrow
    
  • Eyes
    
  • card
    
  • Right arrow
    
  • report
    
  • report 1
    
  • Refresh-one
    
  • qq space
    
  • QQ
    
  • Douban
    
  • tabulation
    
  • Thumbs-up 1
    
  • Star 1
    
  • MicroBlog
    
  • weixin
    
  • Video-two
    
  • Right-c (右-圆)
    
  • Comment (评论)
    
  • Fire (火热)
    
  • arrow down
    
  • Wheelchair
    
  • download
    
  • financial
    
  • Car
    
  • Fire
    
  • Close-small
    
  • left
    
  • Iphone
    
  • international
    
  • domestic
    
  • search
    
  • Play-one
    
  • Right
    
  • library
    
  • rss
    
  • Physical education
    
  • science and technology
    
  • Weixin-mini-app
    
  • Wechat
    
  • Weibo
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • advance
    .icon-advance
  • assist
    .icon-assist
  • Plain text
    .icon-a-Plaintext
  • minification
    .icon-minification
  • Blow up
    .icon-a-Blowup
  • Big subtitles
    .icon-a-Bigsubtitles
  • Mouse
    .icon-Mouse
  • Audio
    .icon-Audio
  • Color matching
    .icon-a-Colormatching
  • Auxiliary line
    .icon-a-Auxiliaryline
  • recoil
    .icon-recoil
  • reset
    .icon-reset
  • quit
    .icon-quit
  • Read aloud
    .icon-a-Readaloud
  • Sound off
    .icon-a-Soundoff
  • Arrow-right
    .icon-Arrow-right
  • Edit
    .icon-Edit
  • Pause
    .icon-Pause
  • pdf
    .icon-pdf
  • Union (1)
    .icon-a-Union1
  • xlxs
    .icon-xlxs
  • Add
    .icon-Add
  • cutting
    .icon-cutting
  • date
    .icon-date
  • Close-one
    .icon-Close-one
  • delete
    .icon-delete
  • attachment
    .icon-attachment
  • education
    .icon-education
  • Full screen
    .icon-a-Fullscreen
  • Download
    .icon-Download
  • Eyes
    .icon-Eyes1
  • examination
    .icon-examination
  • Eyes1
    .icon-Eyes11
  • Office document
    .icon-a-Officedocument
  • reminder
    .icon-reminder
  • ppt
    .icon-ppt
  • tick
    .icon-tick
  • Tag
    .icon-Tag
  • word
    .icon-word
  • txt
    .icon-txt
  • leisure
    .icon-leisure
  • To-top
    .icon-To-top
  • time
    .icon-time
  • Vector (Stroke)
    .icon-a-VectorStroke
  • Arrow-circle-left
    .icon-Arrow-circle-left
  • Arrow-circle-right
    .icon-Arrow-circle-right
  • complete
    .icon-complete
  • Redo
    .icon-Redo
  • Up-one (上1)
    .icon-a-Up-oneshang1
  • Comment
    .icon-Comment
  • Share-two
    .icon-Share-two
  • Thumbs-up
    .icon-Thumbs-up
  • card 1
    .icon-a-card1
  • Star
    .icon-Star
  • Left arrow
    .icon-a-Leftarrow
  • Eyes
    .icon-Eyes
  • card
    .icon-card
  • Right arrow
    .icon-a-Rightarrow
  • report
    .icon-report
  • report 1
    .icon-a-report1
  • Refresh-one
    .icon-Refresh-one
  • qq space
    .icon-a-qqspace
  • QQ
    .icon-QQ
  • Douban
    .icon-Douban
  • tabulation
    .icon-tabulation
  • Thumbs-up 1
    .icon-a-Thumbs-up1
  • Star 1
    .icon-a-Star1
  • MicroBlog
    .icon-MicroBlog
  • weixin
    .icon-weixin
  • Video-two
    .icon-Video-two
  • Right-c (右-圆)
    .icon-a-Right-cyou-yuan
  • Comment (评论)
    .icon-a-Commentpinglun
  • Fire (火热)
    .icon-a-Firehuore
  • arrow down
    .icon-a-arrowdown
  • Wheelchair
    .icon-Wheelchair
  • download
    .icon-download
  • financial
    .icon-financial
  • Car
    .icon-Car
  • Fire
    .icon-Fire
  • Close-small
    .icon-Close-small
  • left
    .icon-left
  • Iphone
    .icon-Iphone
  • international
    .icon-international
  • domestic
    .icon-domestic
  • search
    .icon-search
  • Play-one
    .icon-Play-one
  • Right
    .icon-Right
  • library
    .icon-library
  • rss
    .icon-rss
  • Physical education
    .icon-a-Physicaleducation
  • science and technology
    .icon-a-scienceandtechnology
  • Weixin-mini-app
    .icon-Weixin-mini-app
  • Wechat
    .icon-Wechat
  • Weibo
    .icon-Weibo

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

  • advance
    #icon-advance
  • assist
    #icon-assist
  • Plain text
    #icon-a-Plaintext
  • minification
    #icon-minification
  • Blow up
    #icon-a-Blowup
  • Big subtitles
    #icon-a-Bigsubtitles
  • Mouse
    #icon-Mouse
  • Audio
    #icon-Audio
  • Color matching
    #icon-a-Colormatching
  • Auxiliary line
    #icon-a-Auxiliaryline
  • recoil
    #icon-recoil
  • reset
    #icon-reset
  • quit
    #icon-quit
  • Read aloud
    #icon-a-Readaloud
  • Sound off
    #icon-a-Soundoff
  • Arrow-right
    #icon-Arrow-right
  • Edit
    #icon-Edit
  • Pause
    #icon-Pause
  • pdf
    #icon-pdf
  • Union (1)
    #icon-a-Union1
  • xlxs
    #icon-xlxs
  • Add
    #icon-Add
  • cutting
    #icon-cutting
  • date
    #icon-date
  • Close-one
    #icon-Close-one
  • delete
    #icon-delete
  • attachment
    #icon-attachment
  • education
    #icon-education
  • Full screen
    #icon-a-Fullscreen
  • Download
    #icon-Download
  • Eyes
    #icon-Eyes1
  • examination
    #icon-examination
  • Eyes1
    #icon-Eyes11
  • Office document
    #icon-a-Officedocument
  • reminder
    #icon-reminder
  • ppt
    #icon-ppt
  • tick
    #icon-tick
  • Tag
    #icon-Tag
  • word
    #icon-word
  • txt
    #icon-txt
  • leisure
    #icon-leisure
  • To-top
    #icon-To-top
  • time
    #icon-time
  • Vector (Stroke)
    #icon-a-VectorStroke
  • Arrow-circle-left
    #icon-Arrow-circle-left
  • Arrow-circle-right
    #icon-Arrow-circle-right
  • complete
    #icon-complete
  • Redo
    #icon-Redo
  • Up-one (上1)
    #icon-a-Up-oneshang1
  • Comment
    #icon-Comment
  • Share-two
    #icon-Share-two
  • Thumbs-up
    #icon-Thumbs-up
  • card 1
    #icon-a-card1
  • Star
    #icon-Star
  • Left arrow
    #icon-a-Leftarrow
  • Eyes
    #icon-Eyes
  • card
    #icon-card
  • Right arrow
    #icon-a-Rightarrow
  • report
    #icon-report
  • report 1
    #icon-a-report1
  • Refresh-one
    #icon-Refresh-one
  • qq space
    #icon-a-qqspace
  • QQ
    #icon-QQ
  • Douban
    #icon-Douban
  • tabulation
    #icon-tabulation
  • Thumbs-up 1
    #icon-a-Thumbs-up1
  • Star 1
    #icon-a-Star1
  • MicroBlog
    #icon-MicroBlog
  • weixin
    #icon-weixin
  • Video-two
    #icon-Video-two
  • Right-c (右-圆)
    #icon-a-Right-cyou-yuan
  • Comment (评论)
    #icon-a-Commentpinglun
  • Fire (火热)
    #icon-a-Firehuore
  • arrow down
    #icon-a-arrowdown
  • Wheelchair
    #icon-Wheelchair
  • download
    #icon-download
  • financial
    #icon-financial
  • Car
    #icon-Car
  • Fire
    #icon-Fire
  • Close-small
    #icon-Close-small
  • left
    #icon-left
  • Iphone
    #icon-Iphone
  • international
    #icon-international
  • domestic
    #icon-domestic
  • search
    #icon-search
  • Play-one
    #icon-Play-one
  • Right
    #icon-Right
  • library
    #icon-library
  • rss
    #icon-rss
  • Physical education
    #icon-a-Physicaleducation
  • science and technology
    #icon-a-scienceandtechnology
  • Weixin-mini-app
    #icon-Weixin-mini-app
  • Wechat
    #icon-Wechat
  • Weibo
    #icon-Weibo

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>