• check-circle
    
  • dashboard
    
  • 
    bullseye
    
  • logo-moment
    
  • leetcode
    
  • gitlab
    
  • csdn
    
  • dribbble
    
  • yuque
    
  • linkedin
    
  • youtube
    
  • Instagram
    
  • slack
    
  • 百度
    
  • discord-line
    
  • cnblogs
    
  • juejin
    
  • steam
    
  • telegram
    
  • toutiao
    
  • 微信
    
  • 豆瓣
    
  • 知乎
    
  • 微信公众号
    
  • 猜你喜欢
    
  • eicon_map-2-line
    
  • circle
    
  • creative-commons-nd-line
    
  • creative-commons-by-line
    
  • creative-commons-nc-line
    
  • copyright-line
    
  • font
    
  • stopwatch
    
  • file-lines
    
  • square-poll-vertical
    
  • universal-access
    
  • hourglass-start
    
  • 通讯录07
    
  • arrow-right
    
  • arrow-left
    
  • dice
    
  • copy
    
  • cube
    
  • circle-arrow-right
    
  • clock
    
  • book
    
  • calendar-alt
    
  • eye-outline
    
  • circle-half-stroke
    
  • arrow-up
    
  • file-word
    
  • fire
    
  • dove
    
  • gear
    
  • inbox
    
  • history
    
  • magnifying-glass
    
  • message
    
  • moon
    
  • shapes
    
  • shuffle
    
  • language
    
  • tags
    
  • train
    
  • warning
    
  • circle-arrow-up-right-1
    
  • fish
    
  • envelope
    
  • music
    
  • fan
    
  • heartbeat-bold
    
  • link
    
  • chevron-left
    
  • rocket
    
  • lightbulb
    
  • shoe-prints
    
  • images
    
  • box-archive
    
  • artstation
    
  • paper-plane
    
  • house-chimney
    
  • grip-vertical
    
  • bars
    
  • arrows-left-right
    
  • book-open
    
  • list-ul
    
  • comments
    
  • comment-sms
    
  • angles-right
    
  • tag
    
  • chevron-right
    
  • radio
    
  • forward
    
  • window-restore
    
  • backward
    
  • download
    
  • comment-medical
    
  • paste
    
  • arrow-rotate-right
    
  • play
    
  • circle-xmark
    
  • angle-down
    
  • chart-line
    
  • pencil
    
  • thumbtack
    
  • location-dot
    
  • fw-fire
    
  • calendar-days
    
  • angle-right
    
  • dice-d20
    
  • instagram
    
  • xmark
    
  • spinner
    
  • bullhorn
    
  • stream
    
  • caret-left
    
  • folder-open
    
  • thumbs-up
    
  • angle-double-down
    
  • sign-out-alt
    
  • angle-double-left
    
  • angle-double-right
    
  • angle-left
    
  • fw-eye
    
  • repeat
    
  • shuffle
    
  • arrows-rotate
    
  • pause
    
  • heartbeat
    
  • jike
    
  • jike
    
  • heartbeat
    
  • rss
    
  • qq
    
  • github
    
  • bilibili
    
  • paper-plane
    
  • hashtag
    
  • hand-heart-fill
    
  • plant-fill
    
  • qrcode
    
  • weibo
    
  • copyright
    
  • bolt
    
  • circle-info
    
  • triangle-exclamation
    
  • circle-check
    
  • circle-minus
    
  • circle-plus
    
  • circle-dot
    
  • scissors
    
  • arrow-down
    
  • 灯泡
    
  • 弹幕
    
  • 总览
    
  • 灵感
    
  • 三明治
    
  • keyboard
    
  • tiktok
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'haofont';
  src: url('iconfont.eot?t=1692889383654'); /* IE9 */
  src: url('iconfont.eot?t=1692889383654#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1692889383654') format('woff2'),
       url('iconfont.woff?t=1692889383654') format('woff'),
       url('iconfont.ttf?t=1692889383654') format('truetype'),
       url('iconfont.svg?t=1692889383654#haofont') format('svg');
}

第二步:定义使用 iconfont 的样式

.haofont {
  font-family: "haofont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="haofont">&#x33;</span>

"haofont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • check-circle
    .hao-icon-check-circle
  • dashboard
    .hao-icon-dashboard
  • bullseye
    .hao-icon-bullseye
  • logo-moment
    .hao-icon-logo-moment
  • leetcode
    .hao-icon-leetcode
  • gitlab
    .hao-icon-gitlab
  • csdn
    .hao-icon-csdn
  • dribbble
    .hao-icon-dribbble
  • yuque
    .hao-icon-yuque
  • linkedin
    .hao-icon-linkedin
  • youtube
    .hao-icon-youtube
  • Instagram
    .hao-icon-Instagram
  • slack
    .hao-icon-slack
  • 百度
    .hao-icon-baidu
  • discord-line
    .hao-icon-discord-line
  • cnblogs
    .hao-icon-cnblogs
  • juejin
    .hao-icon-juejin
  • steam
    .hao-icon-steam
  • telegram
    .hao-icon-telegram
  • toutiao
    .hao-icon-toutiao
  • 微信
    .hao-icon-weixin
  • 豆瓣
    .hao-icon-douban
  • 知乎
    .hao-icon-29
  • 微信公众号
    .hao-icon-weixingongzhonghao
  • 猜你喜欢
    .hao-icon-cainixihuan
  • eicon_map-2-line
    .hao-icon-eicon_map-2-line1
  • circle
    .hao-icon-yuan
  • creative-commons-nd-line
    .hao-icon-creative-commons-nd-line
  • creative-commons-by-line
    .hao-icon-creative-commons-by-line
  • creative-commons-nc-line
    .hao-icon-creative-commons-nc-line
  • copyright-line
    .hao-icon-copyright-line
  • font
    .hao-icon-font
  • stopwatch
    .hao-icon-stopwatch
  • file-lines
    .hao-icon-file-lines
  • square-poll-vertical
    .hao-icon-square-poll-vertical
  • universal-access
    .hao-icon-universal-access
  • hourglass-start
    .hao-icon-hourglass-start
  • 通讯录07
    .hao-icon-tongxunlu07
  • arrow-right
    .hao-icon-arrow-right
  • arrow-left
    .hao-icon-arrow-left
  • dice
    .hao-icon-dice
  • copy
    .hao-icon-copy
  • cube
    .hao-icon-cube
  • circle-arrow-right
    .hao-icon-circle-arrow-right
  • clock
    .hao-icon-clock
  • book
    .hao-icon-book
  • calendar-alt
    .hao-icon-calendar-alt
  • eye-outline
    .hao-icon-eye-outline
  • circle-half-stroke
    .hao-icon-circle-half-stroke
  • arrow-up
    .hao-icon-arrow-up
  • file-word
    .hao-icon-file-word
  • fire
    .hao-icon-fire
  • dove
    .hao-icon-dove
  • gear
    .hao-icon-gear
  • inbox
    .hao-icon-inbox
  • history
    .hao-icon-history
  • magnifying-glass
    .hao-icon-magnifying-glass
  • message
    .hao-icon-message
  • moon
    .hao-icon-moon
  • shapes
    .hao-icon-shapes
  • shuffle
    .hao-icon-shuffle
  • language
    .hao-icon-language
  • tags
    .hao-icon-tags
  • train
    .hao-icon-train
  • warning
    .hao-icon-warning
  • circle-arrow-up-right-1
    .hao-icon-circle-arrow-up-right-1
  • fish
    .hao-icon-fish
  • envelope
    .hao-icon-envelope
  • music
    .hao-icon-music
  • fan
    .hao-icon-fan
  • heartbeat-bold
    .hao-icon-heartbeat-bold
  • link
    .hao-icon-link
  • chevron-left
    .hao-icon-chevron-left
  • rocket
    .hao-icon-rocket
  • lightbulb
    .hao-icon-lightbulb
  • shoe-prints
    .hao-icon-shoe-prints
  • images
    .hao-icon-images
  • box-archive
    .hao-icon-box-archive
  • artstation
    .hao-icon-artstation
  • paper-plane
    .hao-icon-paper-plane
  • house-chimney
    .hao-icon-house-chimney
  • grip-vertical
    .hao-icon-grip-vertical
  • bars
    .hao-icon-bars
  • arrows-left-right
    .hao-icon-arrows-left-right
  • book-open
    .hao-icon-book-open
  • list-ul
    .hao-icon-list-ul
  • comments
    .hao-icon-comments
  • comment-sms
    .hao-icon-comment-sms
  • angles-right
    .hao-icon-angles-right
  • tag
    .hao-icon-tag
  • chevron-right
    .hao-icon-chevron-right
  • radio
    .hao-icon-radio
  • forward
    .hao-icon-forward
  • window-restore
    .hao-icon-window-restore
  • backward
    .hao-icon-backward
  • download
    .hao-icon-download
  • comment-medical
    .hao-icon-comment-medical
  • paste
    .hao-icon-paste
  • arrow-rotate-right
    .hao-icon-arrow-rotate-right
  • play
    .hao-icon-play
  • circle-xmark
    .hao-icon-circle-xmark
  • angle-down
    .hao-icon-angle-down
  • chart-line
    .hao-icon-chart-line
  • pencil
    .hao-icon-pencil
  • thumbtack
    .hao-icon-thumbtack
  • location-dot
    .hao-icon-location-dot
  • fw-fire
    .hao-icon-fw-fire
  • calendar-days
    .hao-icon-calendar-days
  • angle-right
    .hao-icon-angle-right
  • dice-d20
    .hao-icon-dice-d20
  • instagram
    .hao-icon-instagram
  • xmark
    .hao-icon-xmark
  • spinner
    .hao-icon-spinner
  • bullhorn
    .hao-icon-bullhorn
  • stream
    .hao-icon-stream
  • caret-left
    .hao-icon-caret-left
  • folder-open
    .hao-icon-folder-open
  • thumbs-up
    .hao-icon-thumbs-up
  • angle-double-down
    .hao-icon-angle-double-down
  • sign-out-alt
    .hao-icon-sign-out-alt
  • angle-double-left
    .hao-icon-angle-double-left
  • angle-double-right
    .hao-icon-angle-double-right
  • angle-left
    .hao-icon-angle-left
  • fw-eye
    .hao-icon-fw-eye
  • repeat
    .hao-icon-repeat
  • shuffle
    .hao-icon-shuffle1
  • arrows-rotate
    .hao-icon-arrows-rotate
  • pause
    .hao-icon-pause
  • heartbeat
    .hao-icon-heartbeat
  • jike
    .hao-icon-a-2
  • jike
    .hao-icon-jike
  • heartbeat
    .hao-icon-heartbeat1
  • rss
    .hao-icon-rss
  • qq
    .hao-icon-qq
  • github
    .hao-icon-github
  • bilibili
    .hao-icon-bilibili
  • paper-plane
    .hao-icon-paper-plane1
  • hashtag
    .hao-icon-hashtag
  • hand-heart-fill
    .hao-icon-hand-heart-fill
  • plant-fill
    .hao-icon-plant-fill
  • qrcode
    .hao-icon-qrcode
  • weibo
    .hao-icon-weibo
  • copyright
    .hao-icon-copyright
  • bolt
    .hao-icon-bolt
  • circle-info
    .hao-icon-circle-info
  • triangle-exclamation
    .hao-icon-triangle-exclamation
  • circle-check
    .hao-icon-circle-check
  • circle-minus
    .hao-icon-circle-minus
  • circle-plus
    .hao-icon-circle-plus
  • circle-dot
    .hao-icon-circle-dot
  • scissors
    .hao-icon-scissors
  • arrow-down
    .hao-icon-arrow-down
  • 灯泡
    .hao-icon-dengpao
  • 弹幕
    .hao-icon-danmu
  • 总览
    .hao-icon-zonglan
  • 灵感
    .hao-icon-linggan
  • 三明治
    .hao-icon-sanmingzhi
  • keyboard
    .hao-icon-keyboard
  • tiktok
    .hao-icon-tiktok

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="haofont hao-icon-xxx"></span>

" haofont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • check-circle
    #hao-icon-check-circle
  • dashboard
    #hao-icon-dashboard
  • bullseye
    #hao-icon-bullseye
  • logo-moment
    #hao-icon-logo-moment
  • leetcode
    #hao-icon-leetcode
  • gitlab
    #hao-icon-gitlab
  • csdn
    #hao-icon-csdn
  • dribbble
    #hao-icon-dribbble
  • yuque
    #hao-icon-yuque
  • linkedin
    #hao-icon-linkedin
  • youtube
    #hao-icon-youtube
  • Instagram
    #hao-icon-Instagram
  • slack
    #hao-icon-slack
  • 百度
    #hao-icon-baidu
  • discord-line
    #hao-icon-discord-line
  • cnblogs
    #hao-icon-cnblogs
  • juejin
    #hao-icon-juejin
  • steam
    #hao-icon-steam
  • telegram
    #hao-icon-telegram
  • toutiao
    #hao-icon-toutiao
  • 微信
    #hao-icon-weixin
  • 豆瓣
    #hao-icon-douban
  • 知乎
    #hao-icon-29
  • 微信公众号
    #hao-icon-weixingongzhonghao
  • 猜你喜欢
    #hao-icon-cainixihuan
  • eicon_map-2-line
    #hao-icon-eicon_map-2-line1
  • circle
    #hao-icon-yuan
  • creative-commons-nd-line
    #hao-icon-creative-commons-nd-line
  • creative-commons-by-line
    #hao-icon-creative-commons-by-line
  • creative-commons-nc-line
    #hao-icon-creative-commons-nc-line
  • copyright-line
    #hao-icon-copyright-line
  • font
    #hao-icon-font
  • stopwatch
    #hao-icon-stopwatch
  • file-lines
    #hao-icon-file-lines
  • square-poll-vertical
    #hao-icon-square-poll-vertical
  • universal-access
    #hao-icon-universal-access
  • hourglass-start
    #hao-icon-hourglass-start
  • 通讯录07
    #hao-icon-tongxunlu07
  • arrow-right
    #hao-icon-arrow-right
  • arrow-left
    #hao-icon-arrow-left
  • dice
    #hao-icon-dice
  • copy
    #hao-icon-copy
  • cube
    #hao-icon-cube
  • circle-arrow-right
    #hao-icon-circle-arrow-right
  • clock
    #hao-icon-clock
  • book
    #hao-icon-book
  • calendar-alt
    #hao-icon-calendar-alt
  • eye-outline
    #hao-icon-eye-outline
  • circle-half-stroke
    #hao-icon-circle-half-stroke
  • arrow-up
    #hao-icon-arrow-up
  • file-word
    #hao-icon-file-word
  • fire
    #hao-icon-fire
  • dove
    #hao-icon-dove
  • gear
    #hao-icon-gear
  • inbox
    #hao-icon-inbox
  • history
    #hao-icon-history
  • magnifying-glass
    #hao-icon-magnifying-glass
  • message
    #hao-icon-message
  • moon
    #hao-icon-moon
  • shapes
    #hao-icon-shapes
  • shuffle
    #hao-icon-shuffle
  • language
    #hao-icon-language
  • tags
    #hao-icon-tags
  • train
    #hao-icon-train
  • warning
    #hao-icon-warning
  • circle-arrow-up-right-1
    #hao-icon-circle-arrow-up-right-1
  • fish
    #hao-icon-fish
  • envelope
    #hao-icon-envelope
  • music
    #hao-icon-music
  • fan
    #hao-icon-fan
  • heartbeat-bold
    #hao-icon-heartbeat-bold
  • link
    #hao-icon-link
  • chevron-left
    #hao-icon-chevron-left
  • rocket
    #hao-icon-rocket
  • lightbulb
    #hao-icon-lightbulb
  • shoe-prints
    #hao-icon-shoe-prints
  • images
    #hao-icon-images
  • box-archive
    #hao-icon-box-archive
  • artstation
    #hao-icon-artstation
  • paper-plane
    #hao-icon-paper-plane
  • house-chimney
    #hao-icon-house-chimney
  • grip-vertical
    #hao-icon-grip-vertical
  • bars
    #hao-icon-bars
  • arrows-left-right
    #hao-icon-arrows-left-right
  • book-open
    #hao-icon-book-open
  • list-ul
    #hao-icon-list-ul
  • comments
    #hao-icon-comments
  • comment-sms
    #hao-icon-comment-sms
  • angles-right
    #hao-icon-angles-right
  • tag
    #hao-icon-tag
  • chevron-right
    #hao-icon-chevron-right
  • radio
    #hao-icon-radio
  • forward
    #hao-icon-forward
  • window-restore
    #hao-icon-window-restore
  • backward
    #hao-icon-backward
  • download
    #hao-icon-download
  • comment-medical
    #hao-icon-comment-medical
  • paste
    #hao-icon-paste
  • arrow-rotate-right
    #hao-icon-arrow-rotate-right
  • play
    #hao-icon-play
  • circle-xmark
    #hao-icon-circle-xmark
  • angle-down
    #hao-icon-angle-down
  • chart-line
    #hao-icon-chart-line
  • pencil
    #hao-icon-pencil
  • thumbtack
    #hao-icon-thumbtack
  • location-dot
    #hao-icon-location-dot
  • fw-fire
    #hao-icon-fw-fire
  • calendar-days
    #hao-icon-calendar-days
  • angle-right
    #hao-icon-angle-right
  • dice-d20
    #hao-icon-dice-d20
  • instagram
    #hao-icon-instagram
  • xmark
    #hao-icon-xmark
  • spinner
    #hao-icon-spinner
  • bullhorn
    #hao-icon-bullhorn
  • stream
    #hao-icon-stream
  • caret-left
    #hao-icon-caret-left
  • folder-open
    #hao-icon-folder-open
  • thumbs-up
    #hao-icon-thumbs-up
  • angle-double-down
    #hao-icon-angle-double-down
  • sign-out-alt
    #hao-icon-sign-out-alt
  • angle-double-left
    #hao-icon-angle-double-left
  • angle-double-right
    #hao-icon-angle-double-right
  • angle-left
    #hao-icon-angle-left
  • fw-eye
    #hao-icon-fw-eye
  • repeat
    #hao-icon-repeat
  • shuffle
    #hao-icon-shuffle1
  • arrows-rotate
    #hao-icon-arrows-rotate
  • pause
    #hao-icon-pause
  • heartbeat
    #hao-icon-heartbeat
  • jike
    #hao-icon-a-2
  • jike
    #hao-icon-jike
  • heartbeat
    #hao-icon-heartbeat1
  • rss
    #hao-icon-rss
  • qq
    #hao-icon-qq
  • github
    #hao-icon-github
  • bilibili
    #hao-icon-bilibili
  • paper-plane
    #hao-icon-paper-plane1
  • hashtag
    #hao-icon-hashtag
  • hand-heart-fill
    #hao-icon-hand-heart-fill
  • plant-fill
    #hao-icon-plant-fill
  • qrcode
    #hao-icon-qrcode
  • weibo
    #hao-icon-weibo
  • copyright
    #hao-icon-copyright
  • bolt
    #hao-icon-bolt
  • circle-info
    #hao-icon-circle-info
  • triangle-exclamation
    #hao-icon-triangle-exclamation
  • circle-check
    #hao-icon-circle-check
  • circle-minus
    #hao-icon-circle-minus
  • circle-plus
    #hao-icon-circle-plus
  • circle-dot
    #hao-icon-circle-dot
  • scissors
    #hao-icon-scissors
  • arrow-down
    #hao-icon-arrow-down
  • 灯泡
    #hao-icon-dengpao
  • 弹幕
    #hao-icon-danmu
  • 总览
    #hao-icon-zonglan
  • 灵感
    #hao-icon-linggan
  • 三明治
    #hao-icon-sanmingzhi
  • keyboard
    #hao-icon-keyboard
  • tiktok
    #hao-icon-tiktok

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>