# IconFont 图标

- 失败
  #bcui-icon-information-fail
- 提示
  #bcui-icon-icon
- topic
  #bcui-icon-topic1
- refresh
  #bcui-icon-refresh-single
- 点点
  #bcui-icon-setting-more
- 收藏
  #bcui-icon-shoucang
- 日志
  #bcui-icon-topic
- 加
  #bcui-icon-jia
- 减号
  #bcui-icon-jian
- calendar
  #bcui-icon-calendar
- check
  #bcui-icon-check
- alert
  #bcui-icon-alert
- blocks
  #bcui-icon-blocks
- activated
  #bcui-icon-activated
- chevron-right
  #bcui-icon-chevron-right
- chevron-left
  #bcui-icon-chevron-left
- calculator
  #bcui-icon-calculator
- cloud
  #bcui-icon-cloud
- chevron-top
  #bcui-icon-chevron-top
- collapse
  #bcui-icon-collapse
- chevron-bottom
  #bcui-icon-chevron-bottom
- computer-filled
  #bcui-icon-computer-filled
- computer
  #bcui-icon-computer
- confirm
  #bcui-icon-confirm
- disk
  #bcui-icon-disk
- copy
  #bcui-icon-copy
- hardware-filled
  #bcui-icon-hardware-filled
- expand
  #bcui-icon-expand
- error
  #bcui-icon-error
- full
  #bcui-icon-full
- hardware
  #bcui-icon-hardware
- info
  #bcui-icon-info
- loading
  #bcui-icon-loading
- minus
  #bcui-icon-minus
- mirror
  #bcui-icon-mirror
- nodes
  #bcui-icon-nodes
- network-filled
  #bcui-icon-network-filled
- overview-filled
  #bcui-icon-overview-filled
- overview
  #bcui-icon-overview
- network
  #bcui-icon-network
- pencil
  #bcui-icon-pencil
- refresh
  #bcui-icon-refresh
- power-off
  #bcui-icon-power-off
- plus
  #bcui-icon-plus
- search
  #bcui-icon-search
- security-filled
  #bcui-icon-security-filled
- stop
  #bcui-icon-stop
- security
  #bcui-icon-security
- start
  #bcui-icon-start
- setting-filled
  #bcui-icon-setting-filled
- setting
  #bcui-icon-setting
- storage-filled
  #bcui-icon-storage-filled
- terminal
  #bcui-icon-terminal
- storage
  #bcui-icon-storage
- times
  #bcui-icon-times
- triangle-bottom
  #bcui-icon-triangle-bottom
- trash
  #bcui-icon-trash
- triangle-top
  #bcui-icon-triangle-top

## 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="#bcui-icon-xxx"></use>
    </svg>