彩色字体

  • accessibility
    
  • address-book
    
  • aid-kit
    
  • airplane
    
  • alarm
    
  • android
    
  • angry2
    
  • apple
    
  • barcode
    
  • bell
    
  • bin2
    
  • bubbles2
    
  • binoculars
    
  • blog
    
  • blogger
    
  • blogger2
    
  • book
    
  • briefcase
    
  • bubble
    
  • bug
    
  • bullhorn
    
  • calculator
    
  • calendar
    
  • camera
    
  • cart
    
  • checkbox-checked
    
  • checkbox-unchecked
    
  • chrome
    
  • connection
    
  • contrast
    
  • cool
    
  • cloud
    
  • cloud-check
    
  • cloud-download
    
  • cloud-upload
    
  • clubs
    
  • codepen
    
  • cog
    
  • cogs
    
  • coin-dollar
    
  • compass
    
  • diamonds
    
  • dice
    
  • display
    
  • download
    
  • download2
    
  • download3
    
  • drawer
    
  • cool2
    
  • copy
    
  • cross
    
  • crying
    
  • css3
    
  • database
    
  • delicious
    
  • deviantart2
    
  • enter
    
  • envelop
    
  • equalizer
    
  • equalizer2
    
  • evil
    
  • dribbble2
    
  • dribbble3
    
  • earth
    
  • eject
    
  • exit
    
  • facebook2
    
  • feed3
    
  • fire
    
  • firefox
    
  • floppy-disk
    
  • folder
    
  • folder-open
    
  • font
    
  • forrst2
    
  • happy2
    
  • github
    
  • google-plus2
    
  • IE
    
  • images
    
  • html5
    
  • lastfm2
    
  • library
    
  • lifebuoy
    
  • instagram
    
  • joomla
    
  • keyboard
    
  • lab
    
  • lanyrd
    
  • laptop
    
  • lock
    
  • ltr
    
  • magic-wand
    
  • magnet
    
  • mail
    
  • mail2
    
  • mail3
    
  • mail4
    
  • ligature2
    
  • link
    
  • linkedin
    
  • linkedin2
    
  • mobile2
    
  • mug
    
  • make-group
    
  • map
    
  • mobile
    
  • opera
    
  • pacman
    
  • paint-format
    
  • paragraph-justify
    
  • office
    
  • onedrive
    
  • price-tags
    
  • printer
    
  • play
    
  • shield
    
  • soundcloud2
    
  • steam2
    
  • stackoverflow
    
  • tv
    
  • windows
    
  • windows8
    
  • user-tie
    
  • wordpress
    
  • IDC机房
    
  • 3博客
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • accessibility
    .icon-accessibility
  • address-book
    .icon-addressbook
  • aid-kit
    .icon-aidkit
  • airplane
    .icon-airplane
  • alarm
    .icon-alarm
  • android
    .icon-android
  • angry2
    .icon-angry2
  • apple
    .icon-apple
  • barcode
    .icon-barcode
  • bell
    .icon-bell
  • bin2
    .icon-bin2
  • bubbles2
    .icon-bubbles2
  • binoculars
    .icon-binoculars
  • blog
    .icon-blog
  • blogger
    .icon-blogger
  • blogger2
    .icon-blogger2
  • book
    .icon-book
  • briefcase
    .icon-briefcase
  • bubble
    .icon-bubble
  • bug
    .icon-bug
  • bullhorn
    .icon-bullhorn
  • calculator
    .icon-calculator
  • calendar
    .icon-calendar
  • camera
    .icon-camera
  • cart
    .icon-cart
  • checkbox-checked
    .icon-checkboxchecked
  • checkbox-unchecked
    .icon-checkboxunchecked
  • chrome
    .icon-chrome
  • connection
    .icon-connection
  • contrast
    .icon-contrast
  • cool
    .icon-cool
  • cloud
    .icon-cloud
  • cloud-check
    .icon-cloudcheck
  • cloud-download
    .icon-clouddownload
  • cloud-upload
    .icon-cloudupload
  • clubs
    .icon-clubs
  • codepen
    .icon-codepen
  • cog
    .icon-cog
  • cogs
    .icon-cogs
  • coin-dollar
    .icon-coindollar
  • compass
    .icon-compass
  • diamonds
    .icon-diamonds
  • dice
    .icon-dice
  • display
    .icon-display
  • download
    .icon-download
  • download2
    .icon-download2
  • download3
    .icon-download3
  • drawer
    .icon-drawer
  • cool2
    .icon-cool2
  • copy
    .icon-copy
  • cross
    .icon-cross
  • crying
    .icon-crying
  • css3
    .icon-css3
  • database
    .icon-database
  • delicious
    .icon-delicious
  • deviantart2
    .icon-deviantart2
  • enter
    .icon-enter
  • envelop
    .icon-envelop
  • equalizer
    .icon-equalizer
  • equalizer2
    .icon-equalizer2
  • evil
    .icon-evil
  • dribbble2
    .icon-dribbble2
  • dribbble3
    .icon-dribbble3
  • earth
    .icon-earth
  • eject
    .icon-eject
  • exit
    .icon-exit
  • facebook2
    .icon-facebook2
  • feed3
    .icon-feed3
  • fire
    .icon-fire
  • firefox
    .icon-firefox
  • floppy-disk
    .icon-floppydisk
  • folder
    .icon-folder
  • folder-open
    .icon-folderopen
  • font
    .icon-font
  • forrst2
    .icon-forrst2
  • happy2
    .icon-happy2
  • github
    .icon-github
  • google-plus2
    .icon-googleplus2
  • IE
    .icon-ie
  • images
    .icon-images
  • html5
    .icon-html5
  • lastfm2
    .icon-lastfm2
  • library
    .icon-library
  • lifebuoy
    .icon-lifebuoy
  • instagram
    .icon-instagram
  • joomla
    .icon-joomla
  • keyboard
    .icon-keyboard
  • lab
    .icon-lab
  • lanyrd
    .icon-lanyrd
  • laptop
    .icon-laptop
  • lock
    .icon-lock
  • ltr
    .icon-ltr
  • magic-wand
    .icon-magicwand
  • magnet
    .icon-magnet
  • mail
    .icon-mail
  • mail2
    .icon-mail2
  • mail3
    .icon-mail3
  • mail4
    .icon-mail4
  • ligature2
    .icon-ligature2
  • link
    .icon-link
  • linkedin
    .icon-linkedin
  • linkedin2
    .icon-linkedin2
  • mobile2
    .icon-mobile2
  • mug
    .icon-mug
  • make-group
    .icon-makegroup
  • map
    .icon-map
  • mobile
    .icon-mobile
  • opera
    .icon-opera
  • pacman
    .icon-pacman
  • paint-format
    .icon-paintformat
  • paragraph-justify
    .icon-paragraphjustify
  • office
    .icon-office
  • onedrive
    .icon-onedrive
  • price-tags
    .icon-pricetags
  • printer
    .icon-printer
  • play
    .icon-play
  • shield
    .icon-shield
  • soundcloud2
    .icon-soundcloud2
  • steam2
    .icon-steam2
  • stackoverflow
    .icon-stackoverflow
  • tv
    .icon-tv
  • windows
    .icon-windows
  • windows8
    .icon-windows8
  • user-tie
    .icon-usertie
  • wordpress
    .icon-wordpress
  • IDC机房
    .icon-IDCjifang
  • 3博客
    .icon-boke

font-class 引用


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

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

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

使用步骤如下:

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

<link rel="stylesheet" href="https://www.wenytao.com/zb_users/theme/cardslee/ico/iconfont.css">

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

<span class="iconfont icon-xxx"></span>

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

  • accessibility
    #icon-accessibility
  • address-book
    #icon-addressbook
  • aid-kit
    #icon-aidkit
  • airplane
    #icon-airplane
  • alarm
    #icon-alarm
  • android
    #icon-android
  • angry2
    #icon-angry2
  • apple
    #icon-apple
  • barcode
    #icon-barcode
  • bell
    #icon-bell
  • bin2
    #icon-bin2
  • bubbles2
    #icon-bubbles2
  • binoculars
    #icon-binoculars
  • blog
    #icon-blog
  • blogger
    #icon-blogger
  • blogger2
    #icon-blogger2
  • book
    #icon-book
  • briefcase
    #icon-briefcase
  • bubble
    #icon-bubble
  • bug
    #icon-bug
  • bullhorn
    #icon-bullhorn
  • calculator
    #icon-calculator
  • calendar
    #icon-calendar
  • camera
    #icon-camera
  • cart
    #icon-cart
  • checkbox-checked
    #icon-checkboxchecked
  • checkbox-unchecked
    #icon-checkboxunchecked
  • chrome
    #icon-chrome
  • connection
    #icon-connection
  • contrast
    #icon-contrast
  • cool
    #icon-cool
  • cloud
    #icon-cloud
  • cloud-check
    #icon-cloudcheck
  • cloud-download
    #icon-clouddownload
  • cloud-upload
    #icon-cloudupload
  • clubs
    #icon-clubs
  • codepen
    #icon-codepen
  • cog
    #icon-cog
  • cogs
    #icon-cogs
  • coin-dollar
    #icon-coindollar
  • compass
    #icon-compass
  • diamonds
    #icon-diamonds
  • dice
    #icon-dice
  • display
    #icon-display
  • download
    #icon-download
  • download2
    #icon-download2
  • download3
    #icon-download3
  • drawer
    #icon-drawer
  • cool2
    #icon-cool2
  • copy
    #icon-copy
  • cross
    #icon-cross
  • crying
    #icon-crying
  • css3
    #icon-css3
  • database
    #icon-database
  • delicious
    #icon-delicious
  • deviantart2
    #icon-deviantart2
  • enter
    #icon-enter
  • envelop
    #icon-envelop
  • equalizer
    #icon-equalizer
  • equalizer2
    #icon-equalizer2
  • evil
    #icon-evil
  • dribbble2
    #icon-dribbble2
  • dribbble3
    #icon-dribbble3
  • earth
    #icon-earth
  • eject
    #icon-eject
  • exit
    #icon-exit
  • facebook2
    #icon-facebook2
  • feed3
    #icon-feed3
  • fire
    #icon-fire
  • firefox
    #icon-firefox
  • floppy-disk
    #icon-floppydisk
  • folder
    #icon-folder
  • folder-open
    #icon-folderopen
  • font
    #icon-font
  • forrst2
    #icon-forrst2
  • happy2
    #icon-happy2
  • github
    #icon-github
  • google-plus2
    #icon-googleplus2
  • IE
    #icon-ie
  • images
    #icon-images
  • html5
    #icon-html5
  • lastfm2
    #icon-lastfm2
  • library
    #icon-library
  • lifebuoy
    #icon-lifebuoy
  • instagram
    #icon-instagram
  • joomla
    #icon-joomla
  • keyboard
    #icon-keyboard
  • lab
    #icon-lab
  • lanyrd
    #icon-lanyrd
  • laptop
    #icon-laptop
  • lock
    #icon-lock
  • ltr
    #icon-ltr
  • magic-wand
    #icon-magicwand
  • magnet
    #icon-magnet
  • mail
    #icon-mail
  • mail2
    #icon-mail2
  • mail3
    #icon-mail3
  • mail4
    #icon-mail4
  • ligature2
    #icon-ligature2
  • link
    #icon-link
  • linkedin
    #icon-linkedin
  • linkedin2
    #icon-linkedin2
  • mobile2
    #icon-mobile2
  • mug
    #icon-mug
  • make-group
    #icon-makegroup
  • map
    #icon-map
  • mobile
    #icon-mobile
  • opera
    #icon-opera
  • pacman
    #icon-pacman
  • paint-format
    #icon-paintformat
  • paragraph-justify
    #icon-paragraphjustify
  • office
    #icon-office
  • onedrive
    #icon-onedrive
  • price-tags
    #icon-pricetags
  • printer
    #icon-printer
  • play
    #icon-play
  • shield
    #icon-shield
  • soundcloud2
    #icon-soundcloud2
  • steam2
    #icon-steam2
  • stackoverflow
    #icon-stackoverflow
  • tv
    #icon-tv
  • windows
    #icon-windows
  • windows8
    #icon-windows8
  • user-tie
    #icon-usertie
  • wordpress
    #icon-wordpress
  • IDC机房
    #icon-IDCjifang
  • 3博客
    #icon-boke

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>