• 无网络
    
  • 播放
    
  • 暂停
    
  • resume
    
  • Repo
    
  • 等待
    
  • frown
    
  • audit
    
  • spinner3
    
  • spinner9
    
  • save
    
  • 写作
    
  • 知识库
    
  • github
    
  • 历史
    
  • 窗口
    
  • file
    
  • folder
    
  • opened_folder
    
  • upload
    
  • star-o
    
  • star
    
  • down-wide
    
  • tip
    
  • refresh
    
  • man
    
  • sina
    
  • wechat
    
  • sina
    
  • edit
    
  • edit
    
  • qq
    
  • wechat
    
  • QQ
    
  • qq
    
  • more
    
  • male
    
  • 安全
    
  • female
    
  • more read
    
  • email
    
  • 企业
    
  • 系统
    
  • home
    
  • setting
    
  • tool
    
  • double-left
    
  • double-right
    
  • delete
    
  • down
    
  • download
    
  • edit
    
  • error
    
  • exclamation
    
  • filter
    
  • folder
    
  • heart-o
    
  • heart
    
  • exclamation
    
  • 操作-全屏-展开2
    
  • 操作-全屏-收缩2
    
  • disconnect
    
  • API
    
  • areachart
    
  • arrowdown
    
  • arrowleft
    
  • arrowright
    
  • arrowsalt
    
  • arrowup
    
  • bars
    
  • bells
    
  • calendar
    
  • check-circle-o
    
  • check
    
  • close
    
  • dashboard
    
  • layout
    
  • left
    
  • link
    
  • login
    
  • logout
    
  • menu-fold
    
  • menu-unfold
    
  • message
    
  • minus
    
  • mobile
    
  • plus
    
  • question-circle-o
    
  • qrcode
    
  • question
    
  • reload
    
  • right
    
  • search
    
  • sharealt
    
  • up
    
  • user
    
  • wifi
    
  • form
    
  • profile
    
  • table
    
  • to-top
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_712012_e58cglk9ys6.svg?t=1647187031088#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"。

  • 无网络
    .icon-offline
  • 播放
    .icon-play
  • 暂停
    .icon-pause
  • resume
    .icon-resume
  • Repo
    .icon-repo
  • 等待
    .icon-wait
  • frown
    .icon-frown
  • audit
    .icon-audit
  • spinner3
    .icon-spinner
  • spinner9
    .icon-spinner2
  • save
    .icon-save
  • 写作
    .icon-writing
  • 知识库
    .icon-lib
  • github
    .icon-github
  • 历史
    .icon-history
  • 窗口
    .icon-window
  • file
    .icon-file
  • folder
    .icon-folder-flat
  • opened_folder
    .icon-opened_folder-flat
  • upload
    .icon-upload
  • star-o
    .icon-star-o
  • star
    .icon-star
  • down-wide
    .icon-down-wide
  • tip
    .icon-tip
  • refresh
    .icon-refresh
  • man
    .icon-man
  • sina
    .icon-sina-o
  • wechat
    .icon-wechat
  • sina
    .icon-sina
  • edit
    .icon-edit1
  • edit
    .icon-edit2
  • qq
    .icon-qq-o
  • wechat
    .icon-wechat-o
  • QQ
    .icon-qq-color
  • qq
    .icon-qq
  • more
    .icon-more
  • male
    .icon-male
  • 安全
    .icon-guard
  • female
    .icon-female
  • more read
    .icon-more-h
  • email
    .icon-email
  • 企业
    .icon-building
  • 系统
    .icon-system
  • home
    .icon-home
  • setting
    .icon-setting
  • tool
    .icon-tool
  • double-left
    .icon-double-left
  • double-right
    .icon-double-right
  • delete
    .icon-delete
  • down
    .icon-down
  • download
    .icon-download
  • edit
    .icon-edit
  • error
    .icon-error
  • exclamation
    .icon-warn
  • filter
    .icon-filter
  • folder
    .icon-folder
  • heart-o
    .icon-heart-o
  • heart
    .icon-heart
  • exclamation
    .icon-info
  • 操作-全屏-展开2
    .icon-fullscreen
  • 操作-全屏-收缩2
    .icon-fullscreen-exit
  • disconnect
    .icon-unlink
  • API
    .icon-api
  • areachart
    .icon-areachart
  • arrowdown
    .icon-arrowdown
  • arrowleft
    .icon-arrowleft
  • arrowright
    .icon-arrowright
  • arrowsalt
    .icon-arrowsalt
  • arrowup
    .icon-arrowup
  • bars
    .icon-bars
  • bells
    .icon-bells
  • calendar
    .icon-calendar
  • check-circle-o
    .icon-check-o
  • check
    .icon-check
  • close
    .icon-close
  • dashboard
    .icon-dashboard
  • layout
    .icon-layout
  • left
    .icon-left
  • link
    .icon-link
  • login
    .icon-login
  • logout
    .icon-logout
  • menu-fold
    .icon-menu-fold
  • menu-unfold
    .icon-menu-unfold
  • message
    .icon-message
  • minus
    .icon-minus
  • mobile
    .icon-mobile
  • plus
    .icon-plus
  • question-circle-o
    .icon-question-o
  • qrcode
    .icon-qrcode
  • question
    .icon-question
  • reload
    .icon-reload
  • right
    .icon-right
  • search
    .icon-search
  • sharealt
    .icon-share
  • up
    .icon-up
  • user
    .icon-user
  • wifi
    .icon-wifi
  • form
    .icon-form
  • profile
    .icon-profile
  • table
    .icon-table
  • to-top
    .icon-to-top

font-class 引用


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

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

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

使用步骤如下:

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

<link rel="stylesheet" href="//at.alicdn.com/t/font_712012_e58cglk9ys6.css">

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

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

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

  • 无网络
    #icon-offline
  • 播放
    #icon-play
  • 暂停
    #icon-pause
  • resume
    #icon-resume
  • Repo
    #icon-repo
  • 等待
    #icon-wait
  • frown
    #icon-frown
  • audit
    #icon-audit
  • spinner3
    #icon-spinner
  • spinner9
    #icon-spinner2
  • save
    #icon-save
  • 写作
    #icon-writing
  • 知识库
    #icon-lib
  • github
    #icon-github
  • 历史
    #icon-history
  • 窗口
    #icon-window
  • file
    #icon-file
  • folder
    #icon-folder-flat
  • opened_folder
    #icon-opened_folder-flat
  • upload
    #icon-upload
  • star-o
    #icon-star-o
  • star
    #icon-star
  • down-wide
    #icon-down-wide
  • tip
    #icon-tip
  • refresh
    #icon-refresh
  • man
    #icon-man
  • sina
    #icon-sina-o
  • wechat
    #icon-wechat
  • sina
    #icon-sina
  • edit
    #icon-edit1
  • edit
    #icon-edit2
  • qq
    #icon-qq-o
  • wechat
    #icon-wechat-o
  • QQ
    #icon-qq-color
  • qq
    #icon-qq
  • more
    #icon-more
  • male
    #icon-male
  • 安全
    #icon-guard
  • female
    #icon-female
  • more read
    #icon-more-h
  • email
    #icon-email
  • 企业
    #icon-building
  • 系统
    #icon-system
  • home
    #icon-home
  • setting
    #icon-setting
  • tool
    #icon-tool
  • double-left
    #icon-double-left
  • double-right
    #icon-double-right
  • delete
    #icon-delete
  • down
    #icon-down
  • download
    #icon-download
  • edit
    #icon-edit
  • error
    #icon-error
  • exclamation
    #icon-warn
  • filter
    #icon-filter
  • folder
    #icon-folder
  • heart-o
    #icon-heart-o
  • heart
    #icon-heart
  • exclamation
    #icon-info
  • 操作-全屏-展开2
    #icon-fullscreen
  • 操作-全屏-收缩2
    #icon-fullscreen-exit
  • disconnect
    #icon-unlink
  • API
    #icon-api
  • areachart
    #icon-areachart
  • arrowdown
    #icon-arrowdown
  • arrowleft
    #icon-arrowleft
  • arrowright
    #icon-arrowright
  • arrowsalt
    #icon-arrowsalt
  • arrowup
    #icon-arrowup
  • bars
    #icon-bars
  • bells
    #icon-bells
  • calendar
    #icon-calendar
  • check-circle-o
    #icon-check-o
  • check
    #icon-check
  • close
    #icon-close
  • dashboard
    #icon-dashboard
  • layout
    #icon-layout
  • left
    #icon-left
  • link
    #icon-link
  • login
    #icon-login
  • logout
    #icon-logout
  • menu-fold
    #icon-menu-fold
  • menu-unfold
    #icon-menu-unfold
  • message
    #icon-message
  • minus
    #icon-minus
  • mobile
    #icon-mobile
  • plus
    #icon-plus
  • question-circle-o
    #icon-question-o
  • qrcode
    #icon-qrcode
  • question
    #icon-question
  • reload
    #icon-reload
  • right
    #icon-right
  • search
    #icon-search
  • sharealt
    #icon-share
  • up
    #icon-up
  • user
    #icon-user
  • wifi
    #icon-wifi
  • form
    #icon-form
  • profile
    #icon-profile
  • table
    #icon-table
  • to-top
    #icon-to-top

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

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

<script src="//at.alicdn.com/t/font_712012_e58cglk9ys6.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>