obicon

  • 设备_插座 线性
    
  • 设备_窗帘
    
  • 设备_空调
    
  • 设备_插座 圆 线
    
  • 升级
    
  • 无WIFI
    
  • 面板
    
  • 方向盘
    
  • 电流传感器
    
  • 温湿度传感器
    
  • 压力传感器
    
  • 电源
    
  • 风扇
    
  • 网络对讲
    
  • LED
    
  • 机器人
    
  • 扫码
    
  • APP升级
    
  • 距离传感器
    
  • 传感器
    
  • 场景管理
    
  • 关联设备
    
  • 节点管理
    
  • 人机交互
    
  • 1-59
    
  • 1-65
    
  • 工业组件-指示灯
    
  • 房卡
    
  • 0117- 电杆
    
  • 恒湿模式
    
  • 雾量2
    
  • 雾量3
    
  • 雾量1
    
  • 投影仪-01
    
  • 音响-01
    
  • 灯-01
    
  • 电饭煲-01
    
  • 打印机-01
    
  • 电风扇-01
    
  • 电脑机箱-01
    
  • 台灯-01
    
  • 冰箱-01
    
  • 笔记本电脑-01
    
  • 热水器-01
    
  • 电水壶-01
    
  • 烧水壶-01
    
  • 空调-01
    
  • 饮水机-01
    
  • 微波炉-01
    
  • 电脑显示器-01
    
  • 电视机-01
    
  • 空调面板-01
    
  • 扫地机器人-01
    
  • pm2.5
    
  • 温度
    
  • 夜灯
    
  • 调光
    
  • 睡眠灯
    
  • 影院
    
  • 水位传感器_o
    
  • 潮湿
    
  • 告警
    
  • 信号
    
  • 蓝牙
    
  • Wi-Fi
    
  • 电表
    
  • 冰箱
    
  • 反射
    
  • 风车
    
  • 管道
    
  • 货物堆
    
  • 检测器
    
  • 井盖
    
  • 路灯
    
  • 人体检测
    
  • 网关
    
  • AI
    
  • 路由器
    
  • PIR
    
  • 水表
    
  • 地磁
    
  • 门磁
    
  • 插座
    
  • 燃气监测器
    
  • 开关
    
  • 插头
    
  • 洗衣机
    
  • 一键开关
    
  • 烟雾报警器
    
  • 无线电波
    
  • 亮度-
    
  • 亮度+
    
  • 能耗
    
  • 硬件
    
  • 燃气泄漏报警器
    
  • 电表_实体
    
  • 水表_实体
    
  • 智能消防栓
    
  • 燃气表_实体
    
  • 固件升级
    
  • 光电传感器
    
  • 湿度
    
  • 低压
    
  • 电压
    
  • 信号
    
  • 温度
    
  • 井盖掀开
    
  • 光线感应
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'obicon';
  src: url('obicon.eot');
  src: url('obicon.eot?#iefix') format('embedded-opentype'),
      url('obicon.woff2') format('woff2'),
      url('obicon.woff') format('woff'),
      url('obicon.ttf') format('truetype'),
      url('obicon.svg#obicon') format('svg');
}

第二步:定义使用 obicon 的样式

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

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

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

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

  • 设备_插座 线性
    .obicon-socket-square
  • 设备_窗帘
    .obicon-curtain
  • 设备_空调
    .obicon-ac-fill
  • 设备_插座 圆 线
    .obicon-socket-line
  • 升级
    .obicon-upgrade
  • 无WIFI
    .obicon-wifi-off
  • 面板
    .obicon-board
  • 方向盘
    .obicon-steering-wheel
  • 电流传感器
    .obicon-electric-sensor
  • 温湿度传感器
    .obicon-temperature-humidity-sensor
  • 压力传感器
    .obicon-pressure-sensor
  • 电源
    .obicon-power-supply
  • 风扇
    .obicon-fan-fill
  • 网络对讲
    .obicon-walkie-talkie
  • LED
    .obicon-led
  • 机器人
    .obicon-robot
  • 扫码
    .obicon-scan
  • APP升级
    .obicon-app-upgrade
  • 距离传感器
    .obicon-distance-sensor
  • 传感器
    .obicon-sensor
  • 场景管理
    .obicon-scene
  • 关联设备
    .obicon-related-device
  • 节点管理
    .obicon-jiedianguanli
  • 人机交互
    .obicon-interaction
  • 1-59
    .obicon-bluetooth-o
  • 1-65
    .obicon-fingerprint
  • 工业组件-指示灯
    .obicon-indicator-light
  • 房卡
    .obicon-room-card
  • 0117- 电杆
    .obicon-telegraph-pole
  • 恒湿模式
    .obicon-constant-humidity-mode
  • 雾量2
    .obicon-fog-volume-2
  • 雾量3
    .obicon-fog-volume-3
  • 雾量1
    .obicon-fog-volume-1
  • 投影仪-01
    .obicon-projector
  • 音响-01
    .obicon-sound
  • 灯-01
    .obicon-droplight
  • 电饭煲-01
    .obicon-rice-cooker
  • 打印机-01
    .obicon-printer
  • 电风扇-01
    .obicon-fan
  • 电脑机箱-01
    .obicon-pc
  • 台灯-01
    .obicon-desk-lamp
  • 冰箱-01
    .obicon-fridge-light
  • 笔记本电脑-01
    .obicon-laptop
  • 热水器-01
    .obicon-heater
  • 电水壶-01
    .obicon-electric-kettle
  • 烧水壶-01
    .obicon-kettle
  • 空调-01
    .obicon-ac
  • 饮水机-01
    .obicon-water-dispenser
  • 微波炉-01
    .obicon-microwave-oven
  • 电脑显示器-01
    .obicon-screen
  • 电视机-01
    .obicon-tv
  • 空调面板-01
    .obicon-ac-controller
  • 扫地机器人-01
    .obicon-sweeping-robot
  • pm2.5
    .obicon-pm
  • 温度
    .obicon-temperature
  • 夜灯
    .obicon-noctilucent
  • 调光
    .obicon-dimming
  • 睡眠灯
    .obicon-sleep-lamp
  • 影院
    .obicon-cinema
  • 水位传感器_o
    .obicon-water-level-sensor
  • 潮湿
    .obicon-damp
  • 告警
    .obicon-alarm
  • 信号
    .obicon-signal
  • 蓝牙
    .obicon-bluetooth
  • Wi-Fi
    .obicon-wifi
  • 电表
    .obicon-electric-meter
  • 冰箱
    .obicon-fridge
  • 反射
    .obicon-reflect
  • 风车
    .obicon-windmill
  • 管道
    .obicon-conduit
  • 货物堆
    .obicon-goods-stack
  • 检测器
    .obicon-detector
  • 井盖
    .obicon-well
  • 路灯
    .obicon-street-lamp
  • 人体检测
    .obicon-body-detection
  • 网关
    .obicon-gateway
  • AI
    .obicon-ai
  • 路由器
    .obicon-router
  • PIR
    .obicon-pir
  • 水表
    .obicon-water-meter
  • 地磁
    .obicon-geomagnetism
  • 门磁
    .obicon-gate-magnetism
  • 插座
    .obicon-socket
  • 燃气监测器
    .obicon-gas-detector
  • 开关
    .obicon-switch
  • 插头
    .obicon-plug
  • 洗衣机
    .obicon-washing-machine
  • 一键开关
    .obicon-one-button-switch
  • 烟雾报警器
    .obicon-smoke-alarm
  • 无线电波
    .obicon-radio-waves
  • 亮度-
    .obicon-bright-minus
  • 亮度+
    .obicon-bright-plus
  • 能耗
    .obicon-energy-usage
  • 硬件
    .obicon-hardware
  • 燃气泄漏报警器
    .obicon-gas-Leak-alarm
  • 电表_实体
    .obicon-electric-meter-fill
  • 水表_实体
    .obicon-water-meter-fill
  • 智能消防栓
    .obicon-fire-hydrant-fill
  • 燃气表_实体
    .obicon-gas-meter-fill
  • 固件升级
    .obicon-firmware-upgrade
  • 光电传感器
    .obicon-ray-sensor
  • 湿度
    .obicon-humidity
  • 低压
    .obicon-depression
  • 电压
    .obicon-voltage
  • 信号
    .obicon-signal-bar
  • 温度
    .obicon-temperature-o
  • 井盖掀开
    .obicon-well-off
  • 光线感应
    .obicon-ray-sense

font-class 引用


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

与 Unicode 使用方式相比,具有如下特点:

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

使用步骤如下:

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

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

第二步:挑选相应图标并获取类名,应用于页面:

<span class="obicon obicon-xxx"></span>

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

  • 设备_插座 线性
    #obicon-socket-square
  • 设备_窗帘
    #obicon-curtain
  • 设备_空调
    #obicon-ac-fill
  • 设备_插座 圆 线
    #obicon-socket-line
  • 升级
    #obicon-upgrade
  • 无WIFI
    #obicon-wifi-off
  • 面板
    #obicon-board
  • 方向盘
    #obicon-steering-wheel
  • 电流传感器
    #obicon-electric-sensor
  • 温湿度传感器
    #obicon-temperature-humidity-sensor
  • 压力传感器
    #obicon-pressure-sensor
  • 电源
    #obicon-power-supply
  • 风扇
    #obicon-fan-fill
  • 网络对讲
    #obicon-walkie-talkie
  • LED
    #obicon-led
  • 机器人
    #obicon-robot
  • 扫码
    #obicon-scan
  • APP升级
    #obicon-app-upgrade
  • 距离传感器
    #obicon-distance-sensor
  • 传感器
    #obicon-sensor
  • 场景管理
    #obicon-scene
  • 关联设备
    #obicon-related-device
  • 节点管理
    #obicon-jiedianguanli
  • 人机交互
    #obicon-interaction
  • 1-59
    #obicon-bluetooth-o
  • 1-65
    #obicon-fingerprint
  • 工业组件-指示灯
    #obicon-indicator-light
  • 房卡
    #obicon-room-card
  • 0117- 电杆
    #obicon-telegraph-pole
  • 恒湿模式
    #obicon-constant-humidity-mode
  • 雾量2
    #obicon-fog-volume-2
  • 雾量3
    #obicon-fog-volume-3
  • 雾量1
    #obicon-fog-volume-1
  • 投影仪-01
    #obicon-projector
  • 音响-01
    #obicon-sound
  • 灯-01
    #obicon-droplight
  • 电饭煲-01
    #obicon-rice-cooker
  • 打印机-01
    #obicon-printer
  • 电风扇-01
    #obicon-fan
  • 电脑机箱-01
    #obicon-pc
  • 台灯-01
    #obicon-desk-lamp
  • 冰箱-01
    #obicon-fridge-light
  • 笔记本电脑-01
    #obicon-laptop
  • 热水器-01
    #obicon-heater
  • 电水壶-01
    #obicon-electric-kettle
  • 烧水壶-01
    #obicon-kettle
  • 空调-01
    #obicon-ac
  • 饮水机-01
    #obicon-water-dispenser
  • 微波炉-01
    #obicon-microwave-oven
  • 电脑显示器-01
    #obicon-screen
  • 电视机-01
    #obicon-tv
  • 空调面板-01
    #obicon-ac-controller
  • 扫地机器人-01
    #obicon-sweeping-robot
  • pm2.5
    #obicon-pm
  • 温度
    #obicon-temperature
  • 夜灯
    #obicon-noctilucent
  • 调光
    #obicon-dimming
  • 睡眠灯
    #obicon-sleep-lamp
  • 影院
    #obicon-cinema
  • 水位传感器_o
    #obicon-water-level-sensor
  • 潮湿
    #obicon-damp
  • 告警
    #obicon-alarm
  • 信号
    #obicon-signal
  • 蓝牙
    #obicon-bluetooth
  • Wi-Fi
    #obicon-wifi
  • 电表
    #obicon-electric-meter
  • 冰箱
    #obicon-fridge
  • 反射
    #obicon-reflect
  • 风车
    #obicon-windmill
  • 管道
    #obicon-conduit
  • 货物堆
    #obicon-goods-stack
  • 检测器
    #obicon-detector
  • 井盖
    #obicon-well
  • 路灯
    #obicon-street-lamp
  • 人体检测
    #obicon-body-detection
  • 网关
    #obicon-gateway
  • AI
    #obicon-ai
  • 路由器
    #obicon-router
  • PIR
    #obicon-pir
  • 水表
    #obicon-water-meter
  • 地磁
    #obicon-geomagnetism
  • 门磁
    #obicon-gate-magnetism
  • 插座
    #obicon-socket
  • 燃气监测器
    #obicon-gas-detector
  • 开关
    #obicon-switch
  • 插头
    #obicon-plug
  • 洗衣机
    #obicon-washing-machine
  • 一键开关
    #obicon-one-button-switch
  • 烟雾报警器
    #obicon-smoke-alarm
  • 无线电波
    #obicon-radio-waves
  • 亮度-
    #obicon-bright-minus
  • 亮度+
    #obicon-bright-plus
  • 能耗
    #obicon-energy-usage
  • 硬件
    #obicon-hardware
  • 燃气泄漏报警器
    #obicon-gas-Leak-alarm
  • 电表_实体
    #obicon-electric-meter-fill
  • 水表_实体
    #obicon-water-meter-fill
  • 智能消防栓
    #obicon-fire-hydrant-fill
  • 燃气表_实体
    #obicon-gas-meter-fill
  • 固件升级
    #obicon-firmware-upgrade
  • 光电传感器
    #obicon-ray-sensor
  • 湿度
    #obicon-humidity
  • 低压
    #obicon-depression
  • 电压
    #obicon-voltage
  • 信号
    #obicon-signal-bar
  • 温度
    #obicon-temperature-o
  • 井盖掀开
    #obicon-well-off
  • 光线感应
    #obicon-ray-sense

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:

<script src="./obicon.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>