# IconFont 图标

- 微信
  #icon-weixin
- 更多
  #icon-more-1
- QQ
  #icon-qq
- 微博
  #icon-unie61d
- qzone
  #icon-qzone
- 二维码
  #icon-erweima
- 收藏_已收藏
  #icon-collect
- 圆形选中
  #icon-checkbox
- 删除
  #icon-delete
- 下载
  #icon-xiazai
- 全屏
  #icon-full
- 设置
  #icon-set
- 报销申请
  #icon-expenses
- LOGO
  #icon-logo
- CRM
  #icon-crm
- 办公参数
  #icon-office-params
- 产品
  #icon-products
- 公司管理
  #icon-com-manage
- 采购
  #icon-purchase
- 后台
  #icon-admin
- 角色权限
  #icon-roles
- 竞争对手
  #icon-powers
- 联系人
  #icon-contacts
- 客户
  #icon-clients
- 工作报告
  #icon-reports
- 设置
  #icon-settings
- 审批
  #icon-approvals
- 日程
  #icon-schedules
- 商机
  #icon-biz
- 市场活动
  #icon-markets
- 任务
  #icon-tasks
- 收起全屏
  #icon-refull
- 收起菜单
  #icon-d-arrow-left
- 首页
  #icon-home
- 数据管理
  #icon-dm
- 统计分析
  #icon-analysis
- 同事圈
  #icon-friends
- 下拉
  #icon-e-dropdown
- 线索
  #icon-clues
- 下拉选中
  #icon-s-dropdown
- 销售参数
  #icon-params
- 仪表盘
  #icon-dashboard
- 销售字段
  #icon-field
- 协同办公
  #icon-teamwork
- 销售预测
  #icon-forecast
- 邮件管理
  #icon-email-settings
- 销售目标
  #icon-targets
- 知识库
  #icon-knowledge
- 账号信息
  #icon-account-info
- 展开菜单
  #icon-ex-menu
- 编辑
  #icon-edit
- 播放
  #icon-play
- 编辑-1
  #icon-text-edit
- 草稿邮件
  #icon-email-draft
- 出差申请
  #icon-trip
- 定时邮件
  #icon-timing-email
- 打印
  #icon-print
- 点赞
  #icon-likes
- 附件
  #icon-attachment
- 付款申请
  #icon-pay
- 更多
  #icon-more
- 关闭-1
  #icon-shut
- 关闭
  #icon-close
- 红旗未选中
  #icon-unflag
- 红旗
  #icon-flag
- 紧急邮件
  #icon-emer-mail
- 禁用
  #icon-disabled
- 快速新建
  #icon-build
- 请假申请
  #icon-absence
- 评论
  #icon-comment
- 筛选
  #icon-filter
- 启用
  #icon-enabled
- 删除
  #icon-del
- 上传列表-1
  #icon-transport-list
- 收藏
  #icon-keep
- 视图切换
  #icon-menu-app
- 收件箱
  #icon-inbox
- 搜索
  #icon-search
- 通知
  #icon-notice
- 外出申请
  #icon-eg-apply
- 拖移
  #icon-drag
- 文件夹
  #icon-folder
- 问号
  #icon-question
- 下拉
  #icon-arrow-down
- 下拉-1
  #icon-caret-bottom
- 写信
  #icon-write-letter
- 已读邮件
  #icon-mail-read
- 暂停
  #icon-pause
- 展开
  #icon-expand
- 已发送邮件
  #icon-mail-send
- 转发
  #icon-forwarded
- 子文件
  #icon-subfile
- 邮件
  #icon-email
- 左箭头
  #icon-arrow-left
- 右箭头
  #icon-arrow-right
- 下拉
  #icon-arrow-up
- 恢复
  #icon-redo
- 撤销
  #icon-undo
- 互动
  #icon-interactive
- 背景
  #icon-background
- 图片
  #icon-image
- 形状
  #icon-shape
- 左对齐
  #icon-left-alignment
- 垂直居中
  #icon-chuizhijuzhong
- 顶对齐
  #icon-top-alignment
- 底对齐
  #icon-bottom-alignment
- 居中
  #icon-center
- 文本
  #icon-text
- 复制
  #icon-copy
- 返回
  #icon-back
- 添加
  #icon-add
- 网格
  #icon-grid
- 导出_normal
  #icon-export
- 上传列表-1
  #icon-upload-lists-copy

## 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>