# IconFont 图标

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

## symbol引用

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

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

使用步骤如下：

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

    <script src="./iconfont.js"></script>

### 第二步：加入通用css代码（引入一次就行）：

    <style type="text/css">
    .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>