# IconFont 图标

- 日历
  #icon-panorama_time
- 引用
  #icon-yinyong
- 图片
  #icon-tupian
- 商店
  #icon-shangdian
- 用户组名称
  #icon-yonghuzumingcheng
- 42业务办理情况统计
  #icon-panorama_joinuser
- 43科室办理情况统计
  #icon-panorama_joindevice
- 商品
  #icon-shangpin
- 转化词
  #icon-hotword
- 订阅
  #icon-newsVerify
- 权限_角色
  #icon-access_user
- 词-禁
  #icon-sensitiveword
- 系统
  #icon-xitong
- 高级人才
  #icon-ydh
- undo
  #icon-undo
- H3
  #icon-h3
- H2
  #icon-h21
- H1
  #icon-H1
- 下拉
  #icon-dropdown
- 分类
  #icon-yidianhaoleibie
- redo
  #icon-redo
- 加载
  #icon-unie60e
- 报刊杂志
  #icon-yidianhaowenzhang
- 清空
  #icon-empty
- 轮播组图
  #icon-lunbozutu
- 圈子
  #icon-quanzi
- 归档
  #icon-recycleNews
- 帖子
  #icon-tiezi
- uniE6672
  #icon-unie6672
- untitled22
  #icon-untitled22
- uniE604
  #icon-unie604
- untitled144
  #icon-untitled144
- list-ol
  #icon-listol
- tab-edit-tab
  #icon-newsChannel1
- 积分-17
  #icon-score
- 圈子_line
  #icon-quanziline
- 日志
  #icon-piliangicon
- 项目-
  #icon-yidianhaotiaomu
- 点击
  #icon-dianji
- 粉丝
  #icon-fans
- radar chart
  #icon-radarchart
- 活动
  #icon-huodong
- list-ol
  #icon-paixu
- 新闻
  #icon-news
- 奖牌
  #icon-jiangpai
- 全屏
  #icon-quanping
- 应用客户端设置
  #icon-appclient
- 文字-01
  #icon-wenzi01
- 内容
  #icon-neirong
- 排序
  #icon-paixu1
- 新闻评论回复
  #icon-newsComment
- 部门
  #icon-bumen
- 品牌
  #icon-pinpai
- tab-unselected
  #icon-newsChannel
- 用户信息－线
  #icon-yonghuxinxixian
- APP
  #icon-panorama_app
- 人群－上网时段
  #icon-panorama_today
- 推送
  #icon-tuisong
- 钥匙
  #icon-yaochi
- 更新_updated
  #icon-gengxinupdated
- 版本
  #icon-panorama_version
- 班级信息修改
  #icon-wochuangjiande
- 地图
  #icon-ditu-copy-copy
- 精选
  #icon-jingxuan-copy
- 移除
  #icon-yichu
- 音频
  #icon-cf-c85
- join
  #icon-panorama_newboot
- 统计
  #icon-panorama
- APP
  #icon-panorama_device
- 轮播图组件
  #icon-lunbotuzujian
- 排序
  #icon-order
- 排序
  #icon-sort
- list-ul
  #icon-listul
- 安全中心
  #icon-anquanzhongxin
- 账户与权限
  #icon-zhanghuyuquanxian
- 链接
  #icon-lianjie
- 活跃数据
  #icon-panorama_action
- 初审
  #icon-yidianhaoshenhe
- 段落1
  #icon-duanluo1
- 角色权限
  #icon-jiaosequanxian0101
- central-alignment
  #icon-centralalignment
- left-alignment
  #icon-leftalignment
- right-alignment
  #icon-rightalignment
- 视频
  #icon-shipin
- 城市
  #icon-city
- 图片
  #icon-tupian1
- 手机截屏
  #icon-startpage
- 加粗
  #icon-bold
- 角色设定
  #icon-jiaosesheding
- 创建角色
  #icon-chuangjianjiaose
- 用户等级
  #icon-yidianhao
- 工作项
  #icon-gongzuoxiang
- icon_activity_pre
  #icon-iconactivitypre
- 斜体-im
  #icon-xietiim
- 获取icon
  #icon-grab
- 投稿
  #icon-draft
- 操作_文字
  #icon-caozuowenzi
- centering alignment
  #icon-centeringalignment
- 文本粘贴
  #icon-wenbenzhantie
- 下划线
  #icon-xiahuaxian
- 1频道
  #icon-channelpd-copy
- 部门
  #icon-bumen-copy
- 角色管理
  #icon-10106-copy
- H4
  #icon-h4
- 投稿
  #icon-tougao
- 修改密码
  #icon-updtpwd
- icon_radar
  #icon-leida
- 断开链接
  #icon-duankailianjie
- 清除样式
  #icon-xiangpica
- chart-radar
  #icon-chart-radar

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