• Centered
    
  • 嵌入行内
    
  • 隐藏边框
    
  • 25.行高
    
  • aa
    
  • feedback
    
  • 还原
    
  • label-2
    
  • video
    
  • table
    
  • h
    
  • collapse-subtree
    
  • expand-subtree
    
  • sub-node
    
  • sister-node
    
  • sup
    
  • sub
    
  • maximize
    
  • block
    
  • emoji
    
  • h4
    
  • h1
    
  • h5
    
  • h2
    
  • h3
    
  • h6
    
  • 流程图1
    
  • website
    
  • preferences
    
  • hr
    
  • task-list
    
  • unordered-list
    
  • ordered-list
    
  • arrow-left
    
  • arrow-up
    
  • arrow-right
    
  • arrow-down
    
  • moremark
    
  • clean
    
  • paintformat
    
  • lock
    
  • loading
    
  • unlock
    
  • section
    
  • align-bottom
    
  • attachment
    
  • bold
    
  • border-color
    
  • border-all
    
  • border-inner
    
  • border-left
    
  • border-bottom
    
  • border-none
    
  • box
    
  • border-outer
    
  • border-right
    
  • clear
    
  • close
    
  • code-example
    
  • clip
    
  • border-up
    
  • code
    
  • command
    
  • compact-display
    
  • copy
    
  • download1
    
  • deletecolumn
    
  • cut
    
  • decreasedecimalplace
    
  • drag
    
  • delete1
    
  • drag-circle
    
  • deleterow
    
  • edit1
    
  • filter
    
  • embedded-preview
    
  • error
    
  • freezerowcoloum
    
  • freezefirstrow
    
  • freezzecolumn
    
  • border-style
    
  • gotolink1
    
  • increasedecimalplace
    
  • insertrowbelow
    
  • image
    
  • italic
    
  • indent
    
  • insertrowabove
    
  • insertrowright
    
  • left-circle-fill
    
  • link
    
  • keyboard
    
  • more
    
  • merge-cells
    
  • outdent
    
  • mention
    
  • plus
    
  • minus-circle-o
    
  • highlight
    
  • paste
    
  • insertrowleft
    
  • quote
    
  • plus-circle-o
    
  • right-circle-fill
    
  • question-circle-o
    
  • preview
    
  • reload
    
  • rotate-left
    
  • math
    
  • overflow
    
  • redo
    
  • searchreplace
    
  • save
    
  • singleselect
    
  • rotate-right
    
  • sort-ascending
    
  • sort-descending
    
  • toc
    
  • solit-cells
    
  • translate
    
  • successful
    
  • strikethrough
    
  • undo
    
  • underline
    
  • unlink
    
  • wrap
    
  • upload
    
  • zoom-out
    
  • zoom-in
    
  • align-center
    
  • align-justify
    
  • align-left
    
  • align-top
    
  • align-right
    
  • align-middle
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

<link rel="preload" href="//at.alicdn.com/t/font_1456030_8fv7zagx9qy.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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

@font-face {
  font-family: 'data-icon';
  src: url('//at.alicdn.com/t/font_1456030_8fv7zagx9qy.woff2?t=1629618856685') format('woff2'),
       url('//at.alicdn.com/t/font_1456030_8fv7zagx9qy.woff?t=1629618856685') format('woff'),
       url('//at.alicdn.com/t/font_1456030_8fv7zagx9qy.ttf?t=1629618856685') format('truetype');
}

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

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

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

<span class="data-icon">&#x33;</span>

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

  • Centered
    .data-icon-centered-image
  • 嵌入行内
    .data-icon-inline-image
  • 隐藏边框
    .data-icon-no-border
  • 25.行高
    .data-icon-line-height
  • aa
    .data-icon-text
  • feedback
    .data-icon-comment
  • 还原
    .data-icon-huanyuan
  • label-2
    .data-icon-label
  • video
    .data-icon-video
  • table
    .data-icon-table
  • h
    .data-icon-h
  • collapse-subtree
    .data-icon-collapse-subtree
  • expand-subtree
    .data-icon-expand-subtree
  • sub-node
    .data-icon-sub-node
  • sister-node
    .data-icon-sister-node
  • sup
    .data-icon-sup
  • sub
    .data-icon-sub
  • maximize
    .data-icon-maximize
  • block
    .data-icon-codeblock
  • emoji
    .data-icon-emoji
  • h4
    .data-icon-h4
  • h1
    .data-icon-h1
  • h5
    .data-icon-h5
  • h2
    .data-icon-h2
  • h3
    .data-icon-h3
  • h6
    .data-icon-h6
  • 流程图1
    .data-icon-liuchengtu
  • website
    .data-icon-website
  • preferences
    .data-icon-preferences
  • hr
    .data-icon-hr
  • task-list
    .data-icon-task-list
  • unordered-list
    .data-icon-unordered-list
  • ordered-list
    .data-icon-ordered-list
  • arrow-left
    .data-icon-arrow-left
  • arrow-up
    .data-icon-arrow-up
  • arrow-right
    .data-icon-arrow-right
  • arrow-down
    .data-icon-arrow-down
  • moremark
    .data-icon-moremark
  • clean
    .data-icon-clean
  • paintformat
    .data-icon-paintformat
  • lock
    .data-icon-lock
  • loading
    .data-icon-loading
  • unlock
    .data-icon-unlock
  • section
    .data-icon-collapse
  • align-bottom
    .data-icon-align-bottom
  • attachment
    .data-icon-attachment
  • bold
    .data-icon-bold
  • border-color
    .data-icon-border-color
  • border-all
    .data-icon-border-all
  • border-inner
    .data-icon-border-inner
  • border-left
    .data-icon-border-left
  • border-bottom
    .data-icon-border-bottom
  • border-none
    .data-icon-border-none
  • box
    .data-icon-box
  • border-outer
    .data-icon-border-outer
  • border-right
    .data-icon-border-right
  • clear
    .data-icon-clear
  • close
    .data-icon-close
  • code-example
    .data-icon-code-example
  • clip
    .data-icon-clip
  • border-up
    .data-icon-border-up
  • code
    .data-icon-code
  • command
    .data-icon-command
  • compact-display
    .data-icon-compact-display
  • copy
    .data-icon-copy
  • download1
    .data-icon-download
  • deletecolumn
    .data-icon-deletecolumn
  • cut
    .data-icon-cut
  • decreasedecimalplace
    .data-icon-decreasedecimalplace
  • drag
    .data-icon-drag
  • delete1
    .data-icon-delete
  • drag-circle
    .data-icon-drag-circle
  • deleterow
    .data-icon-deleterow
  • edit1
    .data-icon-edit
  • filter
    .data-icon-filter
  • embedded-preview
    .data-icon-embedded-preview
  • error
    .data-icon-error
  • freezerowcoloum
    .data-icon-freezerowcoloum
  • freezefirstrow
    .data-icon-freezefirstrow
  • freezzecolumn
    .data-icon-freezzecolumn
  • border-style
    .data-icon-border-style
  • gotolink1
    .data-icon-gotolink
  • increasedecimalplace
    .data-icon-increasedecimalplace
  • insertrowbelow
    .data-icon-insertrowbelow
  • image
    .data-icon-image
  • italic
    .data-icon-italic
  • indent
    .data-icon-indent
  • insertrowabove
    .data-icon-insertrowabove
  • insertrowright
    .data-icon-insertrowright
  • left-circle-fill
    .data-icon-left-circle-fill
  • link
    .data-icon-link
  • keyboard
    .data-icon-keyboard
  • more
    .data-icon-more
  • merge-cells
    .data-icon-merge-cells
  • outdent
    .data-icon-outdent
  • mention
    .data-icon-mention
  • plus
    .data-icon-plus
  • minus-circle-o
    .data-icon-minus-circle-o
  • highlight
    .data-icon-highlight
  • paste
    .data-icon-paste
  • insertrowleft
    .data-icon-insertrowleft
  • quote
    .data-icon-quote
  • plus-circle-o
    .data-icon-plus-circle-o
  • right-circle-fill
    .data-icon-right-circle-fill
  • question-circle-o
    .data-icon-question-circle-o
  • preview
    .data-icon-preview
  • reload
    .data-icon-reload
  • rotate-left
    .data-icon-rotate-left
  • math
    .data-icon-math
  • overflow
    .data-icon-overflow
  • redo
    .data-icon-redo
  • searchreplace
    .data-icon-searchreplace
  • save
    .data-icon-save
  • singleselect
    .data-icon-singleselect
  • rotate-right
    .data-icon-rotate-right
  • sort-ascending
    .data-icon-sort-ascending
  • sort-descending
    .data-icon-sort-descending
  • toc
    .data-icon-toc
  • solit-cells
    .data-icon-solit-cells
  • translate
    .data-icon-translate
  • successful
    .data-icon-successful
  • strikethrough
    .data-icon-strikethrough
  • undo
    .data-icon-undo
  • underline
    .data-icon-underline
  • unlink
    .data-icon-unlink
  • wrap
    .data-icon-wrap
  • upload
    .data-icon-upload
  • zoom-out
    .data-icon-zoom-out
  • zoom-in
    .data-icon-zoom-in
  • align-center
    .data-icon-align-center
  • align-justify
    .data-icon-align-justify
  • align-left
    .data-icon-align-left
  • align-top
    .data-icon-align-top
  • align-right
    .data-icon-align-right
  • align-middle
    .data-icon-align-middle

font-class 引用


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

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

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

使用步骤如下:

<link rel="preload" href="//at.alicdn.com/t/font_1456030_8fv7zagx9qy.woff2" as="font" type="font/woff2" crossorigin="anonymous">

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

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

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

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

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

  • Centered
    #data-icon-centered-image
  • 嵌入行内
    #data-icon-inline-image
  • 隐藏边框
    #data-icon-no-border
  • 25.行高
    #data-icon-line-height
  • aa
    #data-icon-text
  • feedback
    #data-icon-comment
  • 还原
    #data-icon-huanyuan
  • label-2
    #data-icon-label
  • video
    #data-icon-video
  • table
    #data-icon-table
  • h
    #data-icon-h
  • collapse-subtree
    #data-icon-collapse-subtree
  • expand-subtree
    #data-icon-expand-subtree
  • sub-node
    #data-icon-sub-node
  • sister-node
    #data-icon-sister-node
  • sup
    #data-icon-sup
  • sub
    #data-icon-sub
  • maximize
    #data-icon-maximize
  • block
    #data-icon-codeblock
  • emoji
    #data-icon-emoji
  • h4
    #data-icon-h4
  • h1
    #data-icon-h1
  • h5
    #data-icon-h5
  • h2
    #data-icon-h2
  • h3
    #data-icon-h3
  • h6
    #data-icon-h6
  • 流程图1
    #data-icon-liuchengtu
  • website
    #data-icon-website
  • preferences
    #data-icon-preferences
  • hr
    #data-icon-hr
  • task-list
    #data-icon-task-list
  • unordered-list
    #data-icon-unordered-list
  • ordered-list
    #data-icon-ordered-list
  • arrow-left
    #data-icon-arrow-left
  • arrow-up
    #data-icon-arrow-up
  • arrow-right
    #data-icon-arrow-right
  • arrow-down
    #data-icon-arrow-down
  • moremark
    #data-icon-moremark
  • clean
    #data-icon-clean
  • paintformat
    #data-icon-paintformat
  • lock
    #data-icon-lock
  • loading
    #data-icon-loading
  • unlock
    #data-icon-unlock
  • section
    #data-icon-collapse
  • align-bottom
    #data-icon-align-bottom
  • attachment
    #data-icon-attachment
  • bold
    #data-icon-bold
  • border-color
    #data-icon-border-color
  • border-all
    #data-icon-border-all
  • border-inner
    #data-icon-border-inner
  • border-left
    #data-icon-border-left
  • border-bottom
    #data-icon-border-bottom
  • border-none
    #data-icon-border-none
  • box
    #data-icon-box
  • border-outer
    #data-icon-border-outer
  • border-right
    #data-icon-border-right
  • clear
    #data-icon-clear
  • close
    #data-icon-close
  • code-example
    #data-icon-code-example
  • clip
    #data-icon-clip
  • border-up
    #data-icon-border-up
  • code
    #data-icon-code
  • command
    #data-icon-command
  • compact-display
    #data-icon-compact-display
  • copy
    #data-icon-copy
  • download1
    #data-icon-download
  • deletecolumn
    #data-icon-deletecolumn
  • cut
    #data-icon-cut
  • decreasedecimalplace
    #data-icon-decreasedecimalplace
  • drag
    #data-icon-drag
  • delete1
    #data-icon-delete
  • drag-circle
    #data-icon-drag-circle
  • deleterow
    #data-icon-deleterow
  • edit1
    #data-icon-edit
  • filter
    #data-icon-filter
  • embedded-preview
    #data-icon-embedded-preview
  • error
    #data-icon-error
  • freezerowcoloum
    #data-icon-freezerowcoloum
  • freezefirstrow
    #data-icon-freezefirstrow
  • freezzecolumn
    #data-icon-freezzecolumn
  • border-style
    #data-icon-border-style
  • gotolink1
    #data-icon-gotolink
  • increasedecimalplace
    #data-icon-increasedecimalplace
  • insertrowbelow
    #data-icon-insertrowbelow
  • image
    #data-icon-image
  • italic
    #data-icon-italic
  • indent
    #data-icon-indent
  • insertrowabove
    #data-icon-insertrowabove
  • insertrowright
    #data-icon-insertrowright
  • left-circle-fill
    #data-icon-left-circle-fill
  • link
    #data-icon-link
  • keyboard
    #data-icon-keyboard
  • more
    #data-icon-more
  • merge-cells
    #data-icon-merge-cells
  • outdent
    #data-icon-outdent
  • mention
    #data-icon-mention
  • plus
    #data-icon-plus
  • minus-circle-o
    #data-icon-minus-circle-o
  • highlight
    #data-icon-highlight
  • paste
    #data-icon-paste
  • insertrowleft
    #data-icon-insertrowleft
  • quote
    #data-icon-quote
  • plus-circle-o
    #data-icon-plus-circle-o
  • right-circle-fill
    #data-icon-right-circle-fill
  • question-circle-o
    #data-icon-question-circle-o
  • preview
    #data-icon-preview
  • reload
    #data-icon-reload
  • rotate-left
    #data-icon-rotate-left
  • math
    #data-icon-math
  • overflow
    #data-icon-overflow
  • redo
    #data-icon-redo
  • searchreplace
    #data-icon-searchreplace
  • save
    #data-icon-save
  • singleselect
    #data-icon-singleselect
  • rotate-right
    #data-icon-rotate-right
  • sort-ascending
    #data-icon-sort-ascending
  • sort-descending
    #data-icon-sort-descending
  • toc
    #data-icon-toc
  • solit-cells
    #data-icon-solit-cells
  • translate
    #data-icon-translate
  • successful
    #data-icon-successful
  • strikethrough
    #data-icon-strikethrough
  • undo
    #data-icon-undo
  • underline
    #data-icon-underline
  • unlink
    #data-icon-unlink
  • wrap
    #data-icon-wrap
  • upload
    #data-icon-upload
  • zoom-out
    #data-icon-zoom-out
  • zoom-in
    #data-icon-zoom-in
  • align-center
    #data-icon-align-center
  • align-justify
    #data-icon-align-justify
  • align-left
    #data-icon-align-left
  • align-top
    #data-icon-align-top
  • align-right
    #data-icon-align-right
  • align-middle
    #data-icon-align-middle

Symbol 引用


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

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

使用步骤如下:

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

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