# 

- 
  茶壶
  &#xe600;
- 
  加
  &#xe641;
- 
  减
  &#xe643;
- 
  建议
  &#xe629;
- 
  高度
  &#xe65f;
- 
  抽烟
  &#xe6ce;
- 
  辣椒
  &#xe7df;
- 
  其它类_自然灾害
  &#xe9e0;
- 
  专家
  &#xe655;
- 
  边界条件
  &#xe610;
- 
  历史
  &#xe603;
- 
  默认_分类icon
  &#xe62b;
- 
  地球
  &#xe7b9;
- 
  建设
  &#xe639;
- 
  视频
  &#xe64e;
- 
  大气压力
  &#xe60a;
- 
  温湿度
  &#xe61c;
- 
  凤梨
  &#xe6d4;
- 
  基本信息
  &#xe60b;
- 
  厨电_水果
  &#xe614;
- 
  co2
  &#xe6bd;
- 
  风速
  &#xe602;
- 
  摄像头
  &#xe620;
- 
  PM2.5
  &#xe626;
- 
  渔业
  &#xe627;
- 
  海拔
  &#xe607;
- 
  电气 电力
  &#xe60d;
- 
  通讯
  &#xe60e;
- 
  水利
  &#xe615;
- 
  茶叶
  &#xe609;
- 
  天气-风向
  &#xe679;
- 
  温度
  &#xe61e;
- 
  蔬菜
  &#xe606;
- 
  水果
  &#xe60c;
- 
  菌菇类
  &#xe611;
- 
  线状海草
  &#xe621;
- 
  西红柿
  &#xe612;
- 
  路由器
  &#xe64d;
- 
  光照
  &#xe608;
- 
  VR (3D)
  &#xe6ac;
- 
  土壤湿度
  &#xeb24;
- 
  土壤盐分
  &#xeb25;
- 
  土壤温度
  &#xeb23;
- 
  降雨量
  &#xeb48;
- 
  照片
  &#xe60f;
- 
  种植养殖
  &#xe62a;
- 
  农牧业
  &#xe74e;
- 
  other
  &#xe6ae;
- 
  豌豆
  &#xe739;
- 
  导航
  &#xe696;
- 
  试管
  &#xe6f4;
- 
  返回
  &#xe628;
- 
  GIS-图例、图层icon_变坡点
  &#xe613;
- 
  全部数据目录
  &#xe637;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      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#iconfont') format('svg');
    }

### 第二步：定义使用 iconfont 的样式

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

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

    <span class="iconfont">&#x33;</span>

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

- 茶壶
  .icon-chahu
- 加
  .icon-jia
- 减
  .icon-jian
- 建议
  .icon-jianyi
- 高度
  .icon-gaodu
- 抽烟
  .icon-chouyan
- 辣椒
  .icon-lajiaochilis
- 其它类_自然灾害
  .icon-qitaleiziranzaihai
- 专家
  .icon-zhuanjia
- 边界条件
  .icon-bianjietiaojian
- 历史
  .icon-history
- 默认_分类icon
  .icon-moren_fenleiicon
- 地球
  .icon-diqiu
- 建设
  .icon-jianshe
- 视频
  .icon-shipin
- 大气压力
  .icon-daqiyali
- 温湿度
  .icon-icon-temperature
- 凤梨
  .icon-fengli
- 基本信息
  .icon-jibenxinxi
- 厨电_水果
  .icon-chudian_shuiguo
- co2
  .icon-co
- 风速
  .icon-fengsu
- 摄像头
  .icon-shexiangtou
- PM2.5
  .icon-PM
- 渔业
  .icon-yuye
- 海拔
  .icon-haiba
- 电气 电力
  .icon-dianqidianli
- 通讯
  .icon-tongxun
- 水利
  .icon-shuili
- 茶叶
  .icon-chaye
- 天气-风向
  .icon-tianqi-fengxiang
- 温度
  .icon-wendu
- 蔬菜
  .icon-shucai
- 水果
  .icon-shuiguo
- 菌菇类
  .icon--jungulei
- 线状海草
  .icon-xianzhuanghaicao
- 西红柿
  .icon-xihongshi
- 路由器
  .icon-luyouqi
- 光照
  .icon-guangzhao
- VR (3D)
  .icon-VRD
- 土壤湿度
  .icon-turangshidu
- 土壤盐分
  .icon-turangyanfen
- 土壤温度
  .icon-turangwendu
- 降雨量
  .icon-jiangyuliang
- 照片
  .icon-zhaopian
- 种植养殖
  .icon-zhongzhiyangzhi
- 农牧业
  .icon-nongmuye
- other
  .icon-other
- 豌豆
  .icon-wandou
- 导航
  .icon-daohang
- 试管
  .icon-shiguan
- 返回
  .icon-NMStubiao-
- GIS-图例、图层icon_变坡点
  .icon-GIS-tulitucengicon_bianpodian
- 全部数据目录
  .icon-quanbushujumulu

## font-class 引用

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

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

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

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

### 第二步：挑选相应图标并获取类名，应用于页面：

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

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

- 茶壶
  #icon-chahu
- 加
  #icon-jia
- 减
  #icon-jian
- 建议
  #icon-jianyi
- 高度
  #icon-gaodu
- 抽烟
  #icon-chouyan
- 辣椒
  #icon-lajiaochilis
- 其它类_自然灾害
  #icon-qitaleiziranzaihai
- 专家
  #icon-zhuanjia
- 边界条件
  #icon-bianjietiaojian
- 历史
  #icon-history
- 默认_分类icon
  #icon-moren_fenleiicon
- 地球
  #icon-diqiu
- 建设
  #icon-jianshe
- 视频
  #icon-shipin
- 大气压力
  #icon-daqiyali
- 温湿度
  #icon-icon-temperature
- 凤梨
  #icon-fengli
- 基本信息
  #icon-jibenxinxi
- 厨电_水果
  #icon-chudian_shuiguo
- co2
  #icon-co
- 风速
  #icon-fengsu
- 摄像头
  #icon-shexiangtou
- PM2.5
  #icon-PM
- 渔业
  #icon-yuye
- 海拔
  #icon-haiba
- 电气 电力
  #icon-dianqidianli
- 通讯
  #icon-tongxun
- 水利
  #icon-shuili
- 茶叶
  #icon-chaye
- 天气-风向
  #icon-tianqi-fengxiang
- 温度
  #icon-wendu
- 蔬菜
  #icon-shucai
- 水果
  #icon-shuiguo
- 菌菇类
  #icon--jungulei
- 线状海草
  #icon-xianzhuanghaicao
- 西红柿
  #icon-xihongshi
- 路由器
  #icon-luyouqi
- 光照
  #icon-guangzhao
- VR (3D)
  #icon-VRD
- 土壤湿度
  #icon-turangshidu
- 土壤盐分
  #icon-turangyanfen
- 土壤温度
  #icon-turangwendu
- 降雨量
  #icon-jiangyuliang
- 照片
  #icon-zhaopian
- 种植养殖
  #icon-zhongzhiyangzhi
- 农牧业
  #icon-nongmuye
- other
  #icon-other
- 豌豆
  #icon-wandou
- 导航
  #icon-daohang
- 试管
  #icon-shiguan
- 返回
  #icon-NMStubiao-
- GIS-图例、图层icon_变坡点
  #icon-GIS-tulitucengicon_bianpodian
- 全部数据目录
  #icon-quanbushujumulu

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