• 茶壶
    
  • 
  • 
  • 建议
    
  • 高度
    
  • 抽烟
    
  • 辣椒
    
  • 其它类_自然灾害
    
  • 专家
    
  • 边界条件
    
  • 历史
    
  • 默认_分类icon
    
  • 地球
    
  • 建设
    
  • 视频
    
  • 大气压力
    
  • 温湿度
    
  • 凤梨
    
  • 基本信息
    
  • 厨电_水果
    
  • co2
    
  • 风速
    
  • 摄像头
    
  • PM2.5
    
  • 渔业
    
  • 海拔
    
  • 电气 电力
    
  • 通讯
    
  • 水利
    
  • 茶叶
    
  • 天气-风向
    
  • 温度
    
  • 蔬菜
    
  • 水果
    
  • 菌菇类
    
  • 线状海草
    
  • 西红柿
    
  • 路由器
    
  • 光照
    
  • VR (3D)
    
  • 土壤湿度
    
  • 土壤盐分
    
  • 土壤温度
    
  • 降雨量
    
  • 照片
    
  • 种植养殖
    
  • 农牧业
    
  • other
    
  • 豌豆
    
  • 导航
    
  • 试管
    
  • 返回
    
  • GIS-图例、图层icon_变坡点
    
  • 全部数据目录
    

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>