• html
    
  • home
    
  • align-center
    
  • align-justify
    
  • align-left
    
  • align-right
    
  • anchor
    
  • blockquote
    
  • bold
    
  • char
    
  • clear-format
    
  • code
    
  • configure
    
  • copy
    
  • corner
    
  • cut
    
  • datetime
    
  • explore
    
  • find
    
  • fullscreen
    
  • help
    
  • hr
    
  • indent
    
  • italic
    
  • link
    
  • ltr
    
  • nbsp
    
  • new
    
  • ok
    
  • ordered-list
    
  • outdent
    
  • pagebreak
    
  • paragraph
    
  • paste
    
  • paste-as-text
    
  • preview
    
  • print
    
  • redo
    
  • rtl
    
  • save
    
  • smiley
    
  • special-char
    
  • spell-check
    
  • strike
    
  • sub
    
  • sup
    
  • table
    
  • template
    
  • underline
    
  • undo
    
  • unlink
    
  • unordered-list
    
  • video
    
  • mark
    
  • image
    
  • font-size
    
  • font_bg_color
    
  • 349-font
    
  • postoperative
    
  • post-edit
    
  • font-colors
    
  • Rubber
    
  • ic_add music
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'hy-icon';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#hy-icon') format('svg');
}

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

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

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

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

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

  • html
    .hy-icon-html
  • home
    .hy-icon-home
  • align-center
    .hy-icon-aligncenter
  • align-justify
    .hy-icon-alignjustify
  • align-left
    .hy-icon-alignleft
  • align-right
    .hy-icon-alignright
  • anchor
    .hy-icon-anchor
  • blockquote
    .hy-icon-blockquote
  • bold
    .hy-icon-bold
  • char
    .hy-icon-char
  • clear-format
    .hy-icon-clearformat
  • code
    .hy-icon-code
  • configure
    .hy-icon-configure
  • copy
    .hy-icon-copy
  • corner
    .hy-icon-corner
  • cut
    .hy-icon-cut
  • datetime
    .hy-icon-datetime
  • explore
    .hy-icon-explore
  • find
    .hy-icon-find
  • fullscreen
    .hy-icon-fullscreen
  • help
    .hy-icon-help
  • hr
    .hy-icon-hr
  • indent
    .hy-icon-indent
  • italic
    .hy-icon-italic
  • link
    .hy-icon-link
  • ltr
    .hy-icon-ltr
  • nbsp
    .hy-icon-nbsp
  • new
    .hy-icon-new
  • ok
    .hy-icon-ok
  • ordered-list
    .hy-icon-orderedlist
  • outdent
    .hy-icon-outdent
  • pagebreak
    .hy-icon-pagebreak
  • paragraph
    .hy-icon-paragraph
  • paste
    .hy-icon-paste
  • paste-as-text
    .hy-icon-pasteastext
  • preview
    .hy-icon-preview
  • print
    .hy-icon-print
  • redo
    .hy-icon-redo
  • rtl
    .hy-icon-rtl
  • save
    .hy-icon-save
  • smiley
    .hy-icon-smiley
  • special-char
    .hy-icon-specialchar
  • spell-check
    .hy-icon-spellcheck
  • strike
    .hy-icon-strike
  • sub
    .hy-icon-sub
  • sup
    .hy-icon-sup
  • table
    .hy-icon-table
  • template
    .hy-icon-template
  • underline
    .hy-icon-underline
  • undo
    .hy-icon-undo
  • unlink
    .hy-icon-unlink
  • unordered-list
    .hy-icon-unorderedlist
  • video
    .hy-icon-video
  • mark
    .hy-icon-mark
  • image
    .hy-icon-image
  • font-size
    .hy-icon-fontsize
  • font_bg_color
    .hy-icon-fontbgcolor
  • 349-font
    .hy-icon-font
  • postoperative
    .hy-icon-shuhou
  • post-edit
    .hy-icon-post-edit
  • font-colors
    .hy-icon-color
  • Rubber
    .hy-icon-removeformat
  • ic_add music
    .hy-icon-music

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

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

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

  • html
    #hy-icon-html
  • home
    #hy-icon-home
  • align-center
    #hy-icon-aligncenter
  • align-justify
    #hy-icon-alignjustify
  • align-left
    #hy-icon-alignleft
  • align-right
    #hy-icon-alignright
  • anchor
    #hy-icon-anchor
  • blockquote
    #hy-icon-blockquote
  • bold
    #hy-icon-bold
  • char
    #hy-icon-char
  • clear-format
    #hy-icon-clearformat
  • code
    #hy-icon-code
  • configure
    #hy-icon-configure
  • copy
    #hy-icon-copy
  • corner
    #hy-icon-corner
  • cut
    #hy-icon-cut
  • datetime
    #hy-icon-datetime
  • explore
    #hy-icon-explore
  • find
    #hy-icon-find
  • fullscreen
    #hy-icon-fullscreen
  • help
    #hy-icon-help
  • hr
    #hy-icon-hr
  • indent
    #hy-icon-indent
  • italic
    #hy-icon-italic
  • link
    #hy-icon-link
  • ltr
    #hy-icon-ltr
  • nbsp
    #hy-icon-nbsp
  • new
    #hy-icon-new
  • ok
    #hy-icon-ok
  • ordered-list
    #hy-icon-orderedlist
  • outdent
    #hy-icon-outdent
  • pagebreak
    #hy-icon-pagebreak
  • paragraph
    #hy-icon-paragraph
  • paste
    #hy-icon-paste
  • paste-as-text
    #hy-icon-pasteastext
  • preview
    #hy-icon-preview
  • print
    #hy-icon-print
  • redo
    #hy-icon-redo
  • rtl
    #hy-icon-rtl
  • save
    #hy-icon-save
  • smiley
    #hy-icon-smiley
  • special-char
    #hy-icon-specialchar
  • spell-check
    #hy-icon-spellcheck
  • strike
    #hy-icon-strike
  • sub
    #hy-icon-sub
  • sup
    #hy-icon-sup
  • table
    #hy-icon-table
  • template
    #hy-icon-template
  • underline
    #hy-icon-underline
  • undo
    #hy-icon-undo
  • unlink
    #hy-icon-unlink
  • unordered-list
    #hy-icon-unorderedlist
  • video
    #hy-icon-video
  • mark
    #hy-icon-mark
  • image
    #hy-icon-image
  • font-size
    #hy-icon-fontsize
  • font_bg_color
    #hy-icon-fontbgcolor
  • 349-font
    #hy-icon-font
  • postoperative
    #hy-icon-shuhou
  • post-edit
    #hy-icon-post-edit
  • font-colors
    #hy-icon-color
  • Rubber
    #hy-icon-removeformat
  • ic_add music
    #hy-icon-music

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>