• 日历
    
  • 下拉禁用
    
  • 仪表板
    
  • 地图
    
  • 视频
    
  • 折叠面板
    
  • 音频 2
    
  • 轮播图
    
  • 链接
    
  • 步骤条
    
  • 时间轴
    
  • 表格
    
  • 过滤
    
  • 图表
    
  • 容器
    
  • 设置
    
  • 取消下钻
    
  • 设置
    
  • icon-页面
    
  • 时间
    
  • 日期时间
    
  • 日期
    
  • 组件库
    
  • 组件树
    
  • 中风险
    
  • 高风险
    
  • 低风险
    
  • das
    
  • las
    
  • cbh
    
  • waf
    
  • chs
    
  • vss
    
  • soc
    
  • cfw
    
  • cwp
    
  • tcs
    
  • 适配认证备份
    
  • 云防火墙CFW
    
  • 可信云服务器
    
  • 编组 3
    
  • 漏洞扫描配额 VSS
    
  • 云主机安全CHS
    
  • Web应用安全防火墙配额 WAF
    
  • 云堡垒机
    
  • 日志审计
    
  • 数据库审计
    
  • 导出
    
  • 左关联
    
  • 表格
    
  • 内关联
    
  • 地理
    
  • 浮点
    
  • 客户端
    
  • 交互
    
  • 刷新
    
  • 数据
    
  • 添加数据
    
  • 文本
    
  • 下钻
    
  • 仪表板
    
  • 整数
    
  • 左侧导航-发布
    
  • 智能推荐
    
  • 左侧导航-应用
    
  • 左侧导航-资产
    
  • SQL
    
  • 编辑器-保存
    
  • 描述说明
    
  • 日历
    
  • 展开
    
  • 收起
    
  • 左箭头
    
  • 向下
    
  • 右箭头
    
  • 展开
    
  • 开始
    
  • 运行中
    
  • icon:日历
    
  • 复选-禁用未选
    
  • 悬停
    
  • 隐藏
    
  • 攻击者
    
  • 数据
    
  • 端口小尺寸
    
  • 端口
    
  • 删除
    
  • 自定义
    
  • 保存
    
  • 预览
    
  • 折线图
    
  • 柱状图
    
  • 条形图
    
  • 指标题
    
  • 面积图
    
  • 饼图
    
  • 导出
    
  • 导出
    
  • 大拇指灰
    
  • 描述说明
    
  • 人员
    
  • 进度条
    
  • 倒计时
    
  • 富文本
    
  • 穿梭框
    
  • 矩阵量表
    
  • 下拉菜单
    
  • 级联
    
  • 面包屑
    
  • 选项卡
    
  • header
    
  • 选项树
    
  • 组织选择
    
  • 区块组件
    
  • 绑定事件
    
  • 仪表板
    
  • 手机端
    
  • 接受任务
    
  • 分页
    
  • 弹窗关闭
    
  • 复选-默认状态
    
  • 禁用部分选择
    
  • 部分选择
    
  • 禁用已选
    
  • 选中
    
  • 关闭
    
  • 选中-收藏
    
  • 未选中-收藏
    
  • 选中-移动
    
  • 未选中-移动
    
  • 右箭头
    
  • 定位
    
  • 斜体
    
  • 下划线
    
  • 删除线
    
  • icon. - 页面编辑器 - 事件
    
  • icon - 页面编辑器 - 样式
    
  • 数据
    
  • 左侧导航-部署
    
  • 左侧导航-全部资产
    
  • 左侧导航-分类
    
  • 左侧导航-资产
    
  • 左侧导航-发布
    
  • 左侧导航-调测
    
  • 左侧导航-引用资产
    
  • 左侧导航-资源
    
  • 添加
    
  • 一级进程
    
  • 二级进程
    
  • 更新
    
  • 删除
    
  • 查询对象数量
    
  • 查询关联对象
    
  • 搜索
    
  • 添加
    
  • 赋值节点
    
  • 调用服务
    
  • 默认
    
  • 收起
    
  • 分组
    
  • 按钮灰色
    
  • 表格灰色
    
  • 复选框灰色
    
  • 单选框灰色
    
  • 图片灰色
    
  • 表单灰色
    
  • 容器灰色
    
  • 下拉框灰色
    
  • 斜体
    
  • 居中对齐
    
  • 下划线
    
  • 删除线
    
  • 右对齐
    
  • 左对齐
    
  • 左右拉满
    
  • 描述说明
    
  • 并行路由
    
  • 多选路由
    
  • 开始
    
  • 脚本
    
  • 结束
    
  • 查询关联对象
    
  • 添加
    
  • 选择路由
    
  • 调用函数
    
  • 人工
    
  • 校验
    
  • 箭头左
    
  • 解锁
    
  • 保存
    
  • 变量属性
    
  • 底部对齐
    
  • 垂直分布
    
  • 导航器
    
  • 顶部对齐
    
  • 基本属性
    
  • 调用节点
    
  • 调用属性
    
  • 脚本
    
  • 居中对齐
    
  • 另存为
    
  • 水平分布
    
  • 启用
    
  • 流程属性
    
  • 右侧对齐
    
  • 锁定
    
  • 条件属性
    
  • 左侧对齐
    
  • 中部对齐
    
  • icon - 分层 - 灰
    
  • icon - 输入框 - 灰
    
  • icon - 按钮 - 灰
    
  • icon - 单选框 - 灰
    
  • icon - 表格 - 灰
    
  • icon - 多行输入框 - 灰
    
  • icon - 容器 - 灰
    
  • icon - 表单 - 灰
    
  • icon - 日期时间 - 灰
    
  • icon - 删格 - 灰
    
  • icon - 复选框 - 灰
    
  • icon - 开关 - 灰
    
  • icon - 图片 - 灰
    
  • icon - 导航树 - 灰
    
  • icon - 上传 - 灰
    
  • icon - 下拉框 - 灰
    
  • icon - 文本 - 灰
    
  • icon - 数字 - 灰
    
  • Folder
    
  • 成功
    
  • 失败
    
  • 未实名认证
    
  • 正常
    
  • 告警
    
  • 新建文件夹
    
  • 文件夹
    
  • 资源
    
  • 页面
    
  • 分类
    
  • 模型
    
  • 流程
    
  • 撤销
    
  • 重做
    
  • 云搜索服务CES
    
  • 流计算服务CSE
    
  • 大数据平台服务BDP
    
  • 数据湖服务BDL
    
  • 分布式数据库RDBOB
    
  • 缓存数据库Redis
    
  • 云数据库RDB
    
  • 文档数据库MongoDB
    
  • 对等连接
    
  • DNS解析
    
  • VPN连接
    
  • SD-WAN
    
  • 全局负载均衡 GSLB
    
  • 云专线
    
  • 专有网络VPC
    
  • 负载均衡SLB
    
  • NAT网关
    
  • 弹性公网IP
    
  • 云备份CBR
    
  • 对象存储
    
  • 块存储-ESSD
    
  • 文件存储
    
  • 块存储-普通存储
    
  • 裸金属
    
  • 云服务器ECS
    
  • 可用
    
  • 异常
    
  • 时间
    
  • 资产名称
    
  • 已完成
    
  • 云运营
    
  • 不可用
    
  • 待处理
    
  • 正在学习
    
  • 中间态
    
  • 链接
    
  • 导航下拉
    
  • 编辑
    
  • 复制
    
  • screen
    
  • refresh
    
  • 云数据库RDB
    
  • 达梦数据库
    
  • File
    
  • notAvailable
    
  • drag
    
  • setHealthValue
    
  • performanceServer
    
  • information
    
  • scanning
    
  • tips
    
  • performance
    
  • screen
    
  • memory
    
  • application
    
  • alternator
    
  • Battery
    
  • database
    
  • gateMagnetism
    
  • equipment
    
  • storage
    
  • cabinet
    
  • electricCurrent
    
  • computeRoom
    
  • monitor
    
  • fireControl
    
  • airSwitch
    
  • newTrend
    
  • PowerSupply
    
  • ordinary
    
  • carbonMonoxide
    
  • waterLeakage
    
  • precise
    
  • electricCabinet
    
  • system
    
  • hydrogen
    
  • smoke
    
  • server
    
  • service
    
  • wetTemperature
    
  • constantHumidityMachine
    
  • infraRed
    
  • thresholdConfiguration
    
  • toConfigure
    
  • Dashboard
    
  • hydrogen
    
  • columnCabinet
    
  • function
    
  • heating
    
  • firewall
    
  • fan
    
  • ShutDown
    
  • Refresh
    
  • Creating
    
  • Error
    
  • InOperation
    
  • delete
    
  • collect
    
  • rightArrow
    
  • search
    
  • leftDoubleArrow
    
  • open
    
  • leftArrow
    
  • calendar
    
  • close
    
  • setUp
    
  • aveiconGps
    
  • close
    
  • returnAirHumidity
    
  • settingTemperature
    
  • longRange
    
  • powerSupply
    
  • PowerOn
    
  • tankLevel
    
  • returnAirTemperature
    
  • cloudServices
    
  • dehumidification
    
  • duration
    
  • disk
    
  • client
    
  • function
    
  • airConditioningStatus
    
  • oilPressure
    
  • control
    
  • onTheShelf
    
  • switch
    
  • setHumidity
    
  • police
    
  • humidification
    
  • settingTemperature
    
  • Protection
    
  • collect
    
  • plus
    
  • backToFullScreen
    
  • minusSign
    
  • trendChart
    
  • open
    
  • fullScreen
    

Unicode 引用


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

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'font_family';
  src: url('iconfont.woff2?t=1642748836200') format('woff2'),
       url('iconfont.woff?t=1642748836200') format('woff'),
       url('iconfont.ttf?t=1642748836200') format('truetype');
}

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

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

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

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

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

  • 日历
    .ccxd-icon-rili1
  • 下拉禁用
    .ccxd-icon-xialajinyong
  • 仪表板
    .ccxd-icon-yibiaoban2
  • 地图
    .ccxd-icon-ditu
  • 视频
    .ccxd-icon-shipin
  • 折叠面板
    .ccxd-icon-zhediemianban
  • 音频 2
    .ccxd-icon-a-yinpin2
  • 轮播图
    .ccxd-icon-lunbotu
  • 链接
    .ccxd-icon-lianjie1
  • 步骤条
    .ccxd-icon-buzhoutiao
  • 时间轴
    .ccxd-icon-shijianzhou
  • 表格
    .ccxd-icon-biaoge1
  • 过滤
    .ccxd-icon-guolv
  • 图表
    .ccxd-icon-tubiao
  • 容器
    .ccxd-icon-rongqi
  • 设置
    .ccxd-icon-shezhi1
  • 取消下钻
    .ccxd-icon-quxiaoxiazuan
  • 设置
    .ccxd-icon-shezhi
  • icon-页面
    .ccxd-icon-icon-yemian
  • 时间
    .ccxd-icon-shijian2
  • 日期时间
    .ccxd-icon-riqishijian
  • 日期
    .ccxd-icon-riqi
  • 组件库
    .ccxd-icon-zujianku
  • 组件树
    .ccxd-icon-zujianshu
  • 中风险
    .ccxd-icon-zhongfengxian
  • 高风险
    .ccxd-icon-gaofengxian
  • 低风险
    .ccxd-icon-difengxian
  • das
    .ccxd-icon-das
  • las
    .ccxd-icon-las
  • cbh
    .ccxd-icon-cbh
  • waf
    .ccxd-icon-waf
  • chs
    .ccxd-icon-chs
  • vss
    .ccxd-icon-vss
  • soc
    .ccxd-icon-soc
  • cfw
    .ccxd-icon-cfw
  • cwp
    .ccxd-icon-cwp1
  • tcs
    .ccxd-icon-tcs
  • 适配认证备份
    .ccxd-icon-cwp
  • 云防火墙CFW
    .ccxd-icon-yunfanghuoqiangCFW
  • 可信云服务器
    .ccxd-icon-kexinyunfuwuqi
  • 编组 3
    .ccxd-icon-a-bianzu31
  • 漏洞扫描配额 VSS
    .ccxd-icon-a-loudongsaomiaopeieVSS
  • 云主机安全CHS
    .ccxd-icon-yunzhujianquanCHS
  • Web应用安全防火墙配额 WAF
    .ccxd-icon-a-WebyingyonganquanfanghuoqiangpeieWAF
  • 云堡垒机
    .ccxd-icon-yunbaoleiji
  • 日志审计
    .ccxd-icon-rizhishenji
  • 数据库审计
    .ccxd-icon-shujukushenji
  • 导出
    .ccxd-icon-a-bianzu122
  • 左关联
    .ccxd-icon-zuoguanlian
  • 表格
    .ccxd-icon-biaoge
  • 内关联
    .ccxd-icon-neiguanlian
  • 地理
    .ccxd-icon-dili
  • 浮点
    .ccxd-icon-fudian
  • 客户端
    .ccxd-icon-kehuduan
  • 交互
    .ccxd-icon-jiaohu
  • 刷新
    .ccxd-icon-shuaxin
  • 数据
    .ccxd-icon-shuju1
  • 添加数据
    .ccxd-icon-tianjiashuju
  • 文本
    .ccxd-icon-wenben
  • 下钻
    .ccxd-icon-xiazuan
  • 仪表板
    .ccxd-icon-yibiaoban1
  • 整数
    .ccxd-icon-zhengshu
  • 左侧导航-发布
    .ccxd-icon-zuocedaohang-fabu1
  • 智能推荐
    .ccxd-icon-zhinengtuijian
  • 左侧导航-应用
    .ccxd-icon-zuocedaohang-yingyong
  • 左侧导航-资产
    .ccxd-icon-zuocedaohang-zichan1
  • SQL
    .ccxd-icon-SQL
  • 编辑器-保存
    .ccxd-icon-bianjiqi-baocun
  • 描述说明
    .ccxd-icon-miaoshushuoming2
  • 日历
    .ccxd-icon-rili
  • 展开
    .ccxd-icon-search2
  • 收起
    .ccxd-icon-search1
  • 左箭头
    .ccxd-icon-zuojiantou
  • 向下
    .ccxd-icon-xiangxia
  • 右箭头
    .ccxd-icon-youjiantou
  • 展开
    .ccxd-icon-zhankai
  • 开始
    .ccxd-icon-kaishi1
  • 运行中
    .ccxd-icon-yunhangzhong
  • icon:日历
    .ccxd-icon-a-iconrili
  • 复选-禁用未选
    .ccxd-icon-a-bianzu121
  • 悬停
    .ccxd-icon-xuanting
  • 隐藏
    .ccxd-icon-yincang
  • 攻击者
    .ccxd-icon-gongjizhebeifen
  • 数据
    .ccxd-icon-shujubeifen
  • 端口小尺寸
    .ccxd-icon-a-duankoubeifen4
  • 端口
    .ccxd-icon-a-duankoubeifen5
  • 删除
    .ccxd-icon-shanchu1
  • 自定义
    .ccxd-icon-zidingyi
  • 保存
    .ccxd-icon-baocun1
  • 预览
    .ccxd-icon-yulan
  • 折线图
    .ccxd-icon-zhexiantu
  • 柱状图
    .ccxd-icon-zhuzhuangtu
  • 条形图
    .ccxd-icon-tiaoxingtu
  • 指标题
    .ccxd-icon-zhibiaoti
  • 面积图
    .ccxd-icon-mianjitu
  • 饼图
    .ccxd-icon-bingtu
  • 导出
    .ccxd-icon-a-bianzu12
  • 导出
    .ccxd-icon-a-bianzu11
  • 大拇指灰
    .ccxd-icon-damuzhihui
  • 描述说明
    .ccxd-icon-miaoshushuoming1
  • 人员
    .ccxd-icon-renyuan
  • 进度条
    .ccxd-icon-jindutiao
  • 倒计时
    .ccxd-icon-daojishi
  • 富文本
    .ccxd-icon-fuwenben
  • 穿梭框
    .ccxd-icon-chuansuokuang
  • 矩阵量表
    .ccxd-icon-juzhenliangbiao
  • 下拉菜单
    .ccxd-icon-xialacaidan
  • 级联
    .ccxd-icon-jilian
  • 面包屑
    .ccxd-icon-mianbaoxie
  • 选项卡
    .ccxd-icon-xuanxiangka
  • header
    .ccxd-icon-header
  • 选项树
    .ccxd-icon-xuanxiangshu
  • 组织选择
    .ccxd-icon-zuzhixuanze
  • 区块组件
    .ccxd-icon-qukuaizujian
  • 绑定事件
    .ccxd-icon-bangdingshijian
  • 仪表板
    .ccxd-icon-yibiaoban
  • 手机端
    .ccxd-icon-shoujiduan
  • 接受任务
    .ccxd-icon-jieshourenwu
  • 分页
    .ccxd-icon-fenye
  • 弹窗关闭
    .ccxd-icon-a-closecopy4
  • 复选-默认状态
    .ccxd-icon-bianzu3
  • 禁用部分选择
    .ccxd-icon-bianzu2
  • 部分选择
    .ccxd-icon-bianzu1
  • 禁用已选
    .ccxd-icon-bianzu
  • 选中
    .ccxd-icon-xuanzhong
  • 关闭
    .ccxd-icon-a-bianzu10
  • 选中-收藏
    .ccxd-icon-a-bianzu91
  • 未选中-收藏
    .ccxd-icon-a-bianzu9
  • 选中-移动
    .ccxd-icon-a-bianzu81
  • 未选中-移动
    .ccxd-icon-a-bianzu8
  • 右箭头
    .ccxd-icon-a-bianzu7
  • 定位
    .ccxd-icon-dingwei
  • 斜体
    .ccxd-icon-xieti1
  • 下划线
    .ccxd-icon-xiahuaxian1
  • 删除线
    .ccxd-icon-shanchuxian1
  • icon. - 页面编辑器 - 事件
    .ccxd-icon-shijian1
  • icon - 页面编辑器 - 样式
    .ccxd-icon-yangshi
  • 数据
    .ccxd-icon-shuju
  • 左侧导航-部署
    .ccxd-icon-zuocedaohang-bushu
  • 左侧导航-全部资产
    .ccxd-icon-zuocedaohang-quanbuzichan
  • 左侧导航-分类
    .ccxd-icon-zuocedaohang-fenlei
  • 左侧导航-资产
    .ccxd-icon-zuocedaohang-zichan
  • 左侧导航-发布
    .ccxd-icon-zuocedaohang-fabu
  • 左侧导航-调测
    .ccxd-icon-zuocedaohang-tiaoce
  • 左侧导航-引用资产
    .ccxd-icon-zuocedaohang-yinyongzichan
  • 左侧导航-资源
    .ccxd-icon-zuocedaohang-ziyuan
  • 添加
    .ccxd-icon-a-bianzu3
  • 一级进程
    .ccxd-icon-yijijincheng
  • 二级进程
    .ccxd-icon-erjijincheng
  • 更新
    .ccxd-icon-gengxin1
  • 删除
    .ccxd-icon-shanchu
  • 查询对象数量
    .ccxd-icon-chaxunduixiangshuliang1
  • 查询关联对象
    .ccxd-icon-chaxunguanlianduixiang1
  • 搜索
    .ccxd-icon-sousuo
  • 添加
    .ccxd-icon-tianjia1
  • 赋值节点
    .ccxd-icon-fuzhijiedian
  • 调用服务
    .ccxd-icon-diaoyongfuwu
  • 默认
    .ccxd-icon-a-bianzu5
  • 收起
    .ccxd-icon-shouqi
  • 分组
    .ccxd-icon-fenzu
  • 按钮灰色
    .ccxd-icon-anniuhuise
  • 表格灰色
    .ccxd-icon-biaogehuise
  • 复选框灰色
    .ccxd-icon-fuxuankuanghuise
  • 单选框灰色
    .ccxd-icon-danxuankuanghuise
  • 图片灰色
    .ccxd-icon-tupianhuise
  • 表单灰色
    .ccxd-icon-biaodanhuise
  • 容器灰色
    .ccxd-icon-rongqihuise
  • 下拉框灰色
    .ccxd-icon-xialakuanghuise
  • 斜体
    .ccxd-icon-xieti
  • 居中对齐
    .ccxd-icon-juzhongduiqi1
  • 下划线
    .ccxd-icon-xiahuaxian
  • 删除线
    .ccxd-icon-shanchuxian
  • 右对齐
    .ccxd-icon-youduiqi
  • 左对齐
    .ccxd-icon-zuoduiqi
  • 左右拉满
    .ccxd-icon-zuoyoulaman
  • 描述说明
    .ccxd-icon-miaoshushuoming
  • 并行路由
    .ccxd-icon-binghangluyou
  • 多选路由
    .ccxd-icon-duoxuanluyou
  • 开始
    .ccxd-icon-kaishi
  • 脚本
    .ccxd-icon-jiaoben1
  • 结束
    .ccxd-icon-jieshu
  • 查询关联对象
    .ccxd-icon-chaxunguanlianduixiang
  • 添加
    .ccxd-icon-tianjia
  • 选择路由
    .ccxd-icon-xuanzeluyou
  • 调用函数
    .ccxd-icon-diaoyonghanshu
  • 人工
    .ccxd-icon-rengong
  • 校验
    .ccxd-icon-xiaoyan
  • 箭头左
    .ccxd-icon-jiantouzuo
  • 解锁
    .ccxd-icon-jiesuo
  • 保存
    .ccxd-icon-baocun
  • 变量属性
    .ccxd-icon-bianliangshuxing
  • 底部对齐
    .ccxd-icon-dibuduiqi
  • 垂直分布
    .ccxd-icon-chuizhifenbu
  • 导航器
    .ccxd-icon-daohangqi
  • 顶部对齐
    .ccxd-icon-dingbuduiqi
  • 基本属性
    .ccxd-icon-jibenshuxing
  • 调用节点
    .ccxd-icon-tiaoyongjiedian
  • 调用属性
    .ccxd-icon-tiaoyongshuxing
  • 脚本
    .ccxd-icon-jiaoben
  • 居中对齐
    .ccxd-icon-juzhongduiqi
  • 另存为
    .ccxd-icon-lingcunwei
  • 水平分布
    .ccxd-icon-shuipingfenbu
  • 启用
    .ccxd-icon-qiyong
  • 流程属性
    .ccxd-icon-liuchengshuxing
  • 右侧对齐
    .ccxd-icon-youceduiqi
  • 锁定
    .ccxd-icon-suoding
  • 条件属性
    .ccxd-icon-tiaojianshuxing
  • 左侧对齐
    .ccxd-icon-zuoceduiqi
  • 中部对齐
    .ccxd-icon-zhongbuduiqi
  • icon - 分层 - 灰
    .ccxd-icon-a-icon-fenceng-hui
  • icon - 输入框 - 灰
    .ccxd-icon-a-icon-shurukuang-hui
  • icon - 按钮 - 灰
    .ccxd-icon-a-icon-anniu-hui
  • icon - 单选框 - 灰
    .ccxd-icon-a-icon-danxuankuang-hui
  • icon - 表格 - 灰
    .ccxd-icon-a-icon-biaoge-hui
  • icon - 多行输入框 - 灰
    .ccxd-icon-a-icon-duohangshurukuang-hui
  • icon - 容器 - 灰
    .ccxd-icon-a-icon-rongqi-hui
  • icon - 表单 - 灰
    .ccxd-icon-a-icon-biaodan-hui
  • icon - 日期时间 - 灰
    .ccxd-icon-a-icon-riqishijian-hui
  • icon - 删格 - 灰
    .ccxd-icon-a-icon-shange-hui
  • icon - 复选框 - 灰
    .ccxd-icon-a-icon-fuxuankuang-hui
  • icon - 开关 - 灰
    .ccxd-icon-a-icon-kaiguan-hui
  • icon - 图片 - 灰
    .ccxd-icon-a-icon-tupian-hui
  • icon - 导航树 - 灰
    .ccxd-icon-a-icon-daohangshu-hui
  • icon - 上传 - 灰
    .ccxd-icon-a-icon-shangchuan-hui
  • icon - 下拉框 - 灰
    .ccxd-icon-a-icon-xialakuang-hui
  • icon - 文本 - 灰
    .ccxd-icon-a-icon-wenben-hui
  • icon - 数字 - 灰
    .ccxd-icon-a-icon-shuzi-hui
  • Folder
    .ccxd-icon-Folder
  • 成功
    .ccxd-icon-chenggong1
  • 失败
    .ccxd-icon-shibai
  • 未实名认证
    .ccxd-icon-weishimingrenzheng
  • 正常
    .ccxd-icon-zhengchang
  • 告警
    .ccxd-icon-gaojing
  • 新建文件夹
    .ccxd-icon-xinjianwenjianjia
  • 文件夹
    .ccxd-icon-wenjianjia
  • 资源
    .ccxd-icon-ziyuan
  • 页面
    .ccxd-icon-yemian
  • 分类
    .ccxd-icon-fenlei
  • 模型
    .ccxd-icon-moxing
  • 流程
    .ccxd-icon-liucheng
  • 撤销
    .ccxd-icon-chexiao
  • 重做
    .ccxd-icon-zhongzuo1
  • 云搜索服务CES
    .ccxd-icon-yunsousuofuwuCES
  • 流计算服务CSE
    .ccxd-icon-a-liujisuanfuwuCSEbeifen2
  • 大数据平台服务BDP
    .ccxd-icon-a-dashujupingtaifuwuBDPbeifen2
  • 数据湖服务BDL
    .ccxd-icon-a-shujuhufuwuBDLbeifen5
  • 分布式数据库RDBOB
    .ccxd-icon-fenbushishujukuRDBOB
  • 缓存数据库Redis
    .ccxd-icon-a-huancunshujukuRedisbeifen2
  • 云数据库RDB
    .ccxd-icon-a-yunshujukuRDBbeifen2
  • 文档数据库MongoDB
    .ccxd-icon-a-wendangshujukuMongoDBbeifen2
  • 对等连接
    .ccxd-icon-a-duidenglianjiebeifen3
  • DNS解析
    .ccxd-icon-a-DNSjiexibeifen2
  • VPN连接
    .ccxd-icon-a-VPNlianjiebeifen2
  • SD-WAN
    .ccxd-icon-a-SD-WANbeifen2
  • 全局负载均衡 GSLB
    .ccxd-icon-a-quanjufuzaijunhengGSLBbeifen2
  • 云专线
    .ccxd-icon-a-yunzhuanxianwulilianjie
  • 专有网络VPC
    .ccxd-icon-a-bianzu13
  • 负载均衡SLB
    .ccxd-icon-a-fuzaijunhengSLBbeifen2
  • NAT网关
    .ccxd-icon-a-NATwangguanbeifen2
  • 弹性公网IP
    .ccxd-icon-a-danxinggongwangIPEIPbeifen2
  • 云备份CBR
    .ccxd-icon-a-yunbeifenCBRbeifen2
  • 对象存储
    .ccxd-icon-a-duixiangcunchubeifen2
  • 块存储-ESSD
    .ccxd-icon-a-kuaicunchu-ESSDbeifen2
  • 文件存储
    .ccxd-icon-a-wenjiancunchubeifen2
  • 块存储-普通存储
    .ccxd-icon-a-kuaicunchu-putongcunchubeifen2
  • 裸金属
    .ccxd-icon-a-luojinshubeifen2
  • 云服务器ECS
    .ccxd-icon-a-yunfuwuqiECSbeifen2
  • 可用
    .ccxd-icon-keyong
  • 异常
    .ccxd-icon-yichang
  • 时间
    .ccxd-icon-shijian
  • 资产名称
    .ccxd-icon-zichanmingcheng
  • 已完成
    .ccxd-icon-yiwancheng
  • 云运营
    .ccxd-icon-a-bianzu22
  • 不可用
    .ccxd-icon-bukeyong
  • 待处理
    .ccxd-icon-daichuli
  • 正在学习
    .ccxd-icon-zhengzaixuexi
  • 中间态
    .ccxd-icon-zhongjiantai
  • 链接
    .ccxd-icon-lianjie
  • 导航下拉
    .ccxd-icon-daohangxiala
  • 编辑
    .ccxd-icon-bianji
  • 复制
    .ccxd-icon-fuzhi
  • screen
    .ccxd-icon-screen2
  • refresh
    .ccxd-icon-refresh
  • 云数据库RDB
    .ccxd-icon-yunshujukuRDB
  • 达梦数据库
    .ccxd-icon-bianzu12beifen
  • File
    .ccxd-icon-File
  • notAvailable
    .ccxd-icon-notAvailable
  • drag
    .ccxd-icon-drag
  • setHealthValue
    .ccxd-icon-setHealthValue
  • performanceServer
    .ccxd-icon-performanceServer
  • information
    .ccxd-icon-information1
  • scanning
    .ccxd-icon-scanning1
  • tips
    .ccxd-icon-tips1
  • performance
    .ccxd-icon-performance1
  • screen
    .ccxd-icon-screen1
  • memory
    .ccxd-icon-memory1
  • application
    .ccxd-icon-application2
  • alternator
    .ccxd-icon-alternator1
  • Battery
    .ccxd-icon-Battery1
  • database
    .ccxd-icon-database1
  • gateMagnetism
    .ccxd-icon-gateMagnetism1
  • equipment
    .ccxd-icon-equipment1
  • storage
    .ccxd-icon-storage1
  • cabinet
    .ccxd-icon-cabinet1
  • electricCurrent
    .ccxd-icon-electricCurrent1
  • computeRoom
    .ccxd-icon-computeRoom1
  • monitor
    .ccxd-icon-monitor1
  • fireControl
    .ccxd-icon-fireControl1
  • airSwitch
    .ccxd-icon-airSwitch1
  • newTrend
    .ccxd-icon-newTrend1
  • PowerSupply
    .ccxd-icon-PowerSupply1
  • ordinary
    .ccxd-icon-ordinary1
  • carbonMonoxide
    .ccxd-icon-carbonMonoxide1
  • waterLeakage
    .ccxd-icon-waterLeakage1
  • precise
    .ccxd-icon-precise1
  • electricCabinet
    .ccxd-icon-electricCabinet1
  • system
    .ccxd-icon-system1
  • hydrogen
    .ccxd-icon-hydrogen1
  • smoke
    .ccxd-icon-smoke1
  • server
    .ccxd-icon-server1
  • service
    .ccxd-icon-service1
  • wetTemperature
    .ccxd-icon-wetTemperature1
  • constantHumidityMachine
    .ccxd-icon-constantHumidityMachine1
  • infraRed
    .ccxd-icon-infraRed1
  • thresholdConfiguration
    .ccxd-icon-thresholdConfiguration
  • toConfigure
    .ccxd-icon-toConfigure
  • Dashboard
    .ccxd-icon-Dashboard
  • hydrogen
    .ccxd-icon-hydrogen
  • columnCabinet
    .ccxd-icon-columnCabinet
  • function
    .ccxd-icon-function1
  • heating
    .ccxd-icon-heating
  • firewall
    .ccxd-icon-firewall
  • fan
    .ccxd-icon-fan
  • ShutDown
    .ccxd-icon-ShutDown
  • Refresh
    .ccxd-icon-Refresh
  • Creating
    .ccxd-icon-Creating
  • Error
    .ccxd-icon-Error
  • InOperation
    .ccxd-icon-InOperation
  • delete
    .ccxd-icon-delete
  • collect
    .ccxd-icon-collect1
  • rightArrow
    .ccxd-icon-rightArrow
  • search
    .ccxd-icon-search
  • leftDoubleArrow
    .ccxd-icon-leftDoubleArrow
  • open
    .ccxd-icon-open1
  • leftArrow
    .ccxd-icon-leftArrow
  • calendar
    .ccxd-icon-calendar
  • close
    .ccxd-icon-close1
  • setUp
    .ccxd-icon-setUp
  • aveiconGps
    .ccxd-icon-aveiconGps
  • close
    .ccxd-icon-close
  • returnAirHumidity
    .ccxd-icon-returnAirHumidity
  • settingTemperature
    .ccxd-icon-settingTemperature1
  • longRange
    .ccxd-icon-longRange
  • powerSupply
    .ccxd-icon-powerSupply
  • PowerOn
    .ccxd-icon-PowerOn
  • tankLevel
    .ccxd-icon-tankLevel
  • returnAirTemperature
    .ccxd-icon-returnAirTemperature
  • cloudServices
    .ccxd-icon-cloudServices
  • dehumidification
    .ccxd-icon-dehumidification
  • duration
    .ccxd-icon-duration
  • disk
    .ccxd-icon-disk
  • client
    .ccxd-icon-client
  • function
    .ccxd-icon-function
  • airConditioningStatus
    .ccxd-icon-airConditioningStatus
  • oilPressure
    .ccxd-icon-oilPressure
  • control
    .ccxd-icon-control
  • onTheShelf
    .ccxd-icon-onTheShelf
  • switch
    .ccxd-icon-switch
  • setHumidity
    .ccxd-icon-setHumidity
  • police
    .ccxd-icon-police
  • humidification
    .ccxd-icon-humidification
  • settingTemperature
    .ccxd-icon-settingTemperature
  • Protection
    .ccxd-icon-Protection
  • collect
    .ccxd-icon-collect
  • plus
    .ccxd-icon-plus
  • backToFullScreen
    .ccxd-icon-backToFullScreen
  • minusSign
    .ccxd-icon-minusSign
  • trendChart
    .ccxd-icon-trendChart
  • open
    .ccxd-icon-open
  • fullScreen
    .ccxd-icon-fullScreen

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

<span class="font_family ccxd-icon-xxx"></span>

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

  • 日历
    #ccxd-icon-rili1
  • 下拉禁用
    #ccxd-icon-xialajinyong
  • 仪表板
    #ccxd-icon-yibiaoban2
  • 地图
    #ccxd-icon-ditu
  • 视频
    #ccxd-icon-shipin
  • 折叠面板
    #ccxd-icon-zhediemianban
  • 音频 2
    #ccxd-icon-a-yinpin2
  • 轮播图
    #ccxd-icon-lunbotu
  • 链接
    #ccxd-icon-lianjie1
  • 步骤条
    #ccxd-icon-buzhoutiao
  • 时间轴
    #ccxd-icon-shijianzhou
  • 表格
    #ccxd-icon-biaoge1
  • 过滤
    #ccxd-icon-guolv
  • 图表
    #ccxd-icon-tubiao
  • 容器
    #ccxd-icon-rongqi
  • 设置
    #ccxd-icon-shezhi1
  • 取消下钻
    #ccxd-icon-quxiaoxiazuan
  • 设置
    #ccxd-icon-shezhi
  • icon-页面
    #ccxd-icon-icon-yemian
  • 时间
    #ccxd-icon-shijian2
  • 日期时间
    #ccxd-icon-riqishijian
  • 日期
    #ccxd-icon-riqi
  • 组件库
    #ccxd-icon-zujianku
  • 组件树
    #ccxd-icon-zujianshu
  • 中风险
    #ccxd-icon-zhongfengxian
  • 高风险
    #ccxd-icon-gaofengxian
  • 低风险
    #ccxd-icon-difengxian
  • das
    #ccxd-icon-das
  • las
    #ccxd-icon-las
  • cbh
    #ccxd-icon-cbh
  • waf
    #ccxd-icon-waf
  • chs
    #ccxd-icon-chs
  • vss
    #ccxd-icon-vss
  • soc
    #ccxd-icon-soc
  • cfw
    #ccxd-icon-cfw
  • cwp
    #ccxd-icon-cwp1
  • tcs
    #ccxd-icon-tcs
  • 适配认证备份
    #ccxd-icon-cwp
  • 云防火墙CFW
    #ccxd-icon-yunfanghuoqiangCFW
  • 可信云服务器
    #ccxd-icon-kexinyunfuwuqi
  • 编组 3
    #ccxd-icon-a-bianzu31
  • 漏洞扫描配额 VSS
    #ccxd-icon-a-loudongsaomiaopeieVSS
  • 云主机安全CHS
    #ccxd-icon-yunzhujianquanCHS
  • Web应用安全防火墙配额 WAF
    #ccxd-icon-a-WebyingyonganquanfanghuoqiangpeieWAF
  • 云堡垒机
    #ccxd-icon-yunbaoleiji
  • 日志审计
    #ccxd-icon-rizhishenji
  • 数据库审计
    #ccxd-icon-shujukushenji
  • 导出
    #ccxd-icon-a-bianzu122
  • 左关联
    #ccxd-icon-zuoguanlian
  • 表格
    #ccxd-icon-biaoge
  • 内关联
    #ccxd-icon-neiguanlian
  • 地理
    #ccxd-icon-dili
  • 浮点
    #ccxd-icon-fudian
  • 客户端
    #ccxd-icon-kehuduan
  • 交互
    #ccxd-icon-jiaohu
  • 刷新
    #ccxd-icon-shuaxin
  • 数据
    #ccxd-icon-shuju1
  • 添加数据
    #ccxd-icon-tianjiashuju
  • 文本
    #ccxd-icon-wenben
  • 下钻
    #ccxd-icon-xiazuan
  • 仪表板
    #ccxd-icon-yibiaoban1
  • 整数
    #ccxd-icon-zhengshu
  • 左侧导航-发布
    #ccxd-icon-zuocedaohang-fabu1
  • 智能推荐
    #ccxd-icon-zhinengtuijian
  • 左侧导航-应用
    #ccxd-icon-zuocedaohang-yingyong
  • 左侧导航-资产
    #ccxd-icon-zuocedaohang-zichan1
  • SQL
    #ccxd-icon-SQL
  • 编辑器-保存
    #ccxd-icon-bianjiqi-baocun
  • 描述说明
    #ccxd-icon-miaoshushuoming2
  • 日历
    #ccxd-icon-rili
  • 展开
    #ccxd-icon-search2
  • 收起
    #ccxd-icon-search1
  • 左箭头
    #ccxd-icon-zuojiantou
  • 向下
    #ccxd-icon-xiangxia
  • 右箭头
    #ccxd-icon-youjiantou
  • 展开
    #ccxd-icon-zhankai
  • 开始
    #ccxd-icon-kaishi1
  • 运行中
    #ccxd-icon-yunhangzhong
  • icon:日历
    #ccxd-icon-a-iconrili
  • 复选-禁用未选
    #ccxd-icon-a-bianzu121
  • 悬停
    #ccxd-icon-xuanting
  • 隐藏
    #ccxd-icon-yincang
  • 攻击者
    #ccxd-icon-gongjizhebeifen
  • 数据
    #ccxd-icon-shujubeifen
  • 端口小尺寸
    #ccxd-icon-a-duankoubeifen4
  • 端口
    #ccxd-icon-a-duankoubeifen5
  • 删除
    #ccxd-icon-shanchu1
  • 自定义
    #ccxd-icon-zidingyi
  • 保存
    #ccxd-icon-baocun1
  • 预览
    #ccxd-icon-yulan
  • 折线图
    #ccxd-icon-zhexiantu
  • 柱状图
    #ccxd-icon-zhuzhuangtu
  • 条形图
    #ccxd-icon-tiaoxingtu
  • 指标题
    #ccxd-icon-zhibiaoti
  • 面积图
    #ccxd-icon-mianjitu
  • 饼图
    #ccxd-icon-bingtu
  • 导出
    #ccxd-icon-a-bianzu12
  • 导出
    #ccxd-icon-a-bianzu11
  • 大拇指灰
    #ccxd-icon-damuzhihui
  • 描述说明
    #ccxd-icon-miaoshushuoming1
  • 人员
    #ccxd-icon-renyuan
  • 进度条
    #ccxd-icon-jindutiao
  • 倒计时
    #ccxd-icon-daojishi
  • 富文本
    #ccxd-icon-fuwenben
  • 穿梭框
    #ccxd-icon-chuansuokuang
  • 矩阵量表
    #ccxd-icon-juzhenliangbiao
  • 下拉菜单
    #ccxd-icon-xialacaidan
  • 级联
    #ccxd-icon-jilian
  • 面包屑
    #ccxd-icon-mianbaoxie
  • 选项卡
    #ccxd-icon-xuanxiangka
  • header
    #ccxd-icon-header
  • 选项树
    #ccxd-icon-xuanxiangshu
  • 组织选择
    #ccxd-icon-zuzhixuanze
  • 区块组件
    #ccxd-icon-qukuaizujian
  • 绑定事件
    #ccxd-icon-bangdingshijian
  • 仪表板
    #ccxd-icon-yibiaoban
  • 手机端
    #ccxd-icon-shoujiduan
  • 接受任务
    #ccxd-icon-jieshourenwu
  • 分页
    #ccxd-icon-fenye
  • 弹窗关闭
    #ccxd-icon-a-closecopy4
  • 复选-默认状态
    #ccxd-icon-bianzu3
  • 禁用部分选择
    #ccxd-icon-bianzu2
  • 部分选择
    #ccxd-icon-bianzu1
  • 禁用已选
    #ccxd-icon-bianzu
  • 选中
    #ccxd-icon-xuanzhong
  • 关闭
    #ccxd-icon-a-bianzu10
  • 选中-收藏
    #ccxd-icon-a-bianzu91
  • 未选中-收藏
    #ccxd-icon-a-bianzu9
  • 选中-移动
    #ccxd-icon-a-bianzu81
  • 未选中-移动
    #ccxd-icon-a-bianzu8
  • 右箭头
    #ccxd-icon-a-bianzu7
  • 定位
    #ccxd-icon-dingwei
  • 斜体
    #ccxd-icon-xieti1
  • 下划线
    #ccxd-icon-xiahuaxian1
  • 删除线
    #ccxd-icon-shanchuxian1
  • icon. - 页面编辑器 - 事件
    #ccxd-icon-shijian1
  • icon - 页面编辑器 - 样式
    #ccxd-icon-yangshi
  • 数据
    #ccxd-icon-shuju
  • 左侧导航-部署
    #ccxd-icon-zuocedaohang-bushu
  • 左侧导航-全部资产
    #ccxd-icon-zuocedaohang-quanbuzichan
  • 左侧导航-分类
    #ccxd-icon-zuocedaohang-fenlei
  • 左侧导航-资产
    #ccxd-icon-zuocedaohang-zichan
  • 左侧导航-发布
    #ccxd-icon-zuocedaohang-fabu
  • 左侧导航-调测
    #ccxd-icon-zuocedaohang-tiaoce
  • 左侧导航-引用资产
    #ccxd-icon-zuocedaohang-yinyongzichan
  • 左侧导航-资源
    #ccxd-icon-zuocedaohang-ziyuan
  • 添加
    #ccxd-icon-a-bianzu3
  • 一级进程
    #ccxd-icon-yijijincheng
  • 二级进程
    #ccxd-icon-erjijincheng
  • 更新
    #ccxd-icon-gengxin1
  • 删除
    #ccxd-icon-shanchu
  • 查询对象数量
    #ccxd-icon-chaxunduixiangshuliang1
  • 查询关联对象
    #ccxd-icon-chaxunguanlianduixiang1
  • 搜索
    #ccxd-icon-sousuo
  • 添加
    #ccxd-icon-tianjia1
  • 赋值节点
    #ccxd-icon-fuzhijiedian
  • 调用服务
    #ccxd-icon-diaoyongfuwu
  • 默认
    #ccxd-icon-a-bianzu5
  • 收起
    #ccxd-icon-shouqi
  • 分组
    #ccxd-icon-fenzu
  • 按钮灰色
    #ccxd-icon-anniuhuise
  • 表格灰色
    #ccxd-icon-biaogehuise
  • 复选框灰色
    #ccxd-icon-fuxuankuanghuise
  • 单选框灰色
    #ccxd-icon-danxuankuanghuise
  • 图片灰色
    #ccxd-icon-tupianhuise
  • 表单灰色
    #ccxd-icon-biaodanhuise
  • 容器灰色
    #ccxd-icon-rongqihuise
  • 下拉框灰色
    #ccxd-icon-xialakuanghuise
  • 斜体
    #ccxd-icon-xieti
  • 居中对齐
    #ccxd-icon-juzhongduiqi1
  • 下划线
    #ccxd-icon-xiahuaxian
  • 删除线
    #ccxd-icon-shanchuxian
  • 右对齐
    #ccxd-icon-youduiqi
  • 左对齐
    #ccxd-icon-zuoduiqi
  • 左右拉满
    #ccxd-icon-zuoyoulaman
  • 描述说明
    #ccxd-icon-miaoshushuoming
  • 并行路由
    #ccxd-icon-binghangluyou
  • 多选路由
    #ccxd-icon-duoxuanluyou
  • 开始
    #ccxd-icon-kaishi
  • 脚本
    #ccxd-icon-jiaoben1
  • 结束
    #ccxd-icon-jieshu
  • 查询关联对象
    #ccxd-icon-chaxunguanlianduixiang
  • 添加
    #ccxd-icon-tianjia
  • 选择路由
    #ccxd-icon-xuanzeluyou
  • 调用函数
    #ccxd-icon-diaoyonghanshu
  • 人工
    #ccxd-icon-rengong
  • 校验
    #ccxd-icon-xiaoyan
  • 箭头左
    #ccxd-icon-jiantouzuo
  • 解锁
    #ccxd-icon-jiesuo
  • 保存
    #ccxd-icon-baocun
  • 变量属性
    #ccxd-icon-bianliangshuxing
  • 底部对齐
    #ccxd-icon-dibuduiqi
  • 垂直分布
    #ccxd-icon-chuizhifenbu
  • 导航器
    #ccxd-icon-daohangqi
  • 顶部对齐
    #ccxd-icon-dingbuduiqi
  • 基本属性
    #ccxd-icon-jibenshuxing
  • 调用节点
    #ccxd-icon-tiaoyongjiedian
  • 调用属性
    #ccxd-icon-tiaoyongshuxing
  • 脚本
    #ccxd-icon-jiaoben
  • 居中对齐
    #ccxd-icon-juzhongduiqi
  • 另存为
    #ccxd-icon-lingcunwei
  • 水平分布
    #ccxd-icon-shuipingfenbu
  • 启用
    #ccxd-icon-qiyong
  • 流程属性
    #ccxd-icon-liuchengshuxing
  • 右侧对齐
    #ccxd-icon-youceduiqi
  • 锁定
    #ccxd-icon-suoding
  • 条件属性
    #ccxd-icon-tiaojianshuxing
  • 左侧对齐
    #ccxd-icon-zuoceduiqi
  • 中部对齐
    #ccxd-icon-zhongbuduiqi
  • icon - 分层 - 灰
    #ccxd-icon-a-icon-fenceng-hui
  • icon - 输入框 - 灰
    #ccxd-icon-a-icon-shurukuang-hui
  • icon - 按钮 - 灰
    #ccxd-icon-a-icon-anniu-hui
  • icon - 单选框 - 灰
    #ccxd-icon-a-icon-danxuankuang-hui
  • icon - 表格 - 灰
    #ccxd-icon-a-icon-biaoge-hui
  • icon - 多行输入框 - 灰
    #ccxd-icon-a-icon-duohangshurukuang-hui
  • icon - 容器 - 灰
    #ccxd-icon-a-icon-rongqi-hui
  • icon - 表单 - 灰
    #ccxd-icon-a-icon-biaodan-hui
  • icon - 日期时间 - 灰
    #ccxd-icon-a-icon-riqishijian-hui
  • icon - 删格 - 灰
    #ccxd-icon-a-icon-shange-hui
  • icon - 复选框 - 灰
    #ccxd-icon-a-icon-fuxuankuang-hui
  • icon - 开关 - 灰
    #ccxd-icon-a-icon-kaiguan-hui
  • icon - 图片 - 灰
    #ccxd-icon-a-icon-tupian-hui
  • icon - 导航树 - 灰
    #ccxd-icon-a-icon-daohangshu-hui
  • icon - 上传 - 灰
    #ccxd-icon-a-icon-shangchuan-hui
  • icon - 下拉框 - 灰
    #ccxd-icon-a-icon-xialakuang-hui
  • icon - 文本 - 灰
    #ccxd-icon-a-icon-wenben-hui
  • icon - 数字 - 灰
    #ccxd-icon-a-icon-shuzi-hui
  • Folder
    #ccxd-icon-Folder
  • 成功
    #ccxd-icon-chenggong1
  • 失败
    #ccxd-icon-shibai
  • 未实名认证
    #ccxd-icon-weishimingrenzheng
  • 正常
    #ccxd-icon-zhengchang
  • 告警
    #ccxd-icon-gaojing
  • 新建文件夹
    #ccxd-icon-xinjianwenjianjia
  • 文件夹
    #ccxd-icon-wenjianjia
  • 资源
    #ccxd-icon-ziyuan
  • 页面
    #ccxd-icon-yemian
  • 分类
    #ccxd-icon-fenlei
  • 模型
    #ccxd-icon-moxing
  • 流程
    #ccxd-icon-liucheng
  • 撤销
    #ccxd-icon-chexiao
  • 重做
    #ccxd-icon-zhongzuo1
  • 云搜索服务CES
    #ccxd-icon-yunsousuofuwuCES
  • 流计算服务CSE
    #ccxd-icon-a-liujisuanfuwuCSEbeifen2
  • 大数据平台服务BDP
    #ccxd-icon-a-dashujupingtaifuwuBDPbeifen2
  • 数据湖服务BDL
    #ccxd-icon-a-shujuhufuwuBDLbeifen5
  • 分布式数据库RDBOB
    #ccxd-icon-fenbushishujukuRDBOB
  • 缓存数据库Redis
    #ccxd-icon-a-huancunshujukuRedisbeifen2
  • 云数据库RDB
    #ccxd-icon-a-yunshujukuRDBbeifen2
  • 文档数据库MongoDB
    #ccxd-icon-a-wendangshujukuMongoDBbeifen2
  • 对等连接
    #ccxd-icon-a-duidenglianjiebeifen3
  • DNS解析
    #ccxd-icon-a-DNSjiexibeifen2
  • VPN连接
    #ccxd-icon-a-VPNlianjiebeifen2
  • SD-WAN
    #ccxd-icon-a-SD-WANbeifen2
  • 全局负载均衡 GSLB
    #ccxd-icon-a-quanjufuzaijunhengGSLBbeifen2
  • 云专线
    #ccxd-icon-a-yunzhuanxianwulilianjie
  • 专有网络VPC
    #ccxd-icon-a-bianzu13
  • 负载均衡SLB
    #ccxd-icon-a-fuzaijunhengSLBbeifen2
  • NAT网关
    #ccxd-icon-a-NATwangguanbeifen2
  • 弹性公网IP
    #ccxd-icon-a-danxinggongwangIPEIPbeifen2
  • 云备份CBR
    #ccxd-icon-a-yunbeifenCBRbeifen2
  • 对象存储
    #ccxd-icon-a-duixiangcunchubeifen2
  • 块存储-ESSD
    #ccxd-icon-a-kuaicunchu-ESSDbeifen2
  • 文件存储
    #ccxd-icon-a-wenjiancunchubeifen2
  • 块存储-普通存储
    #ccxd-icon-a-kuaicunchu-putongcunchubeifen2
  • 裸金属
    #ccxd-icon-a-luojinshubeifen2
  • 云服务器ECS
    #ccxd-icon-a-yunfuwuqiECSbeifen2
  • 可用
    #ccxd-icon-keyong
  • 异常
    #ccxd-icon-yichang
  • 时间
    #ccxd-icon-shijian
  • 资产名称
    #ccxd-icon-zichanmingcheng
  • 已完成
    #ccxd-icon-yiwancheng
  • 云运营
    #ccxd-icon-a-bianzu22
  • 不可用
    #ccxd-icon-bukeyong
  • 待处理
    #ccxd-icon-daichuli
  • 正在学习
    #ccxd-icon-zhengzaixuexi
  • 中间态
    #ccxd-icon-zhongjiantai
  • 链接
    #ccxd-icon-lianjie
  • 导航下拉
    #ccxd-icon-daohangxiala
  • 编辑
    #ccxd-icon-bianji
  • 复制
    #ccxd-icon-fuzhi
  • screen
    #ccxd-icon-screen2
  • refresh
    #ccxd-icon-refresh
  • 云数据库RDB
    #ccxd-icon-yunshujukuRDB
  • 达梦数据库
    #ccxd-icon-bianzu12beifen
  • File
    #ccxd-icon-File
  • notAvailable
    #ccxd-icon-notAvailable
  • drag
    #ccxd-icon-drag
  • setHealthValue
    #ccxd-icon-setHealthValue
  • performanceServer
    #ccxd-icon-performanceServer
  • information
    #ccxd-icon-information1
  • scanning
    #ccxd-icon-scanning1
  • tips
    #ccxd-icon-tips1
  • performance
    #ccxd-icon-performance1
  • screen
    #ccxd-icon-screen1
  • memory
    #ccxd-icon-memory1
  • application
    #ccxd-icon-application2
  • alternator
    #ccxd-icon-alternator1
  • Battery
    #ccxd-icon-Battery1
  • database
    #ccxd-icon-database1
  • gateMagnetism
    #ccxd-icon-gateMagnetism1
  • equipment
    #ccxd-icon-equipment1
  • storage
    #ccxd-icon-storage1
  • cabinet
    #ccxd-icon-cabinet1
  • electricCurrent
    #ccxd-icon-electricCurrent1
  • computeRoom
    #ccxd-icon-computeRoom1
  • monitor
    #ccxd-icon-monitor1
  • fireControl
    #ccxd-icon-fireControl1
  • airSwitch
    #ccxd-icon-airSwitch1
  • newTrend
    #ccxd-icon-newTrend1
  • PowerSupply
    #ccxd-icon-PowerSupply1
  • ordinary
    #ccxd-icon-ordinary1
  • carbonMonoxide
    #ccxd-icon-carbonMonoxide1
  • waterLeakage
    #ccxd-icon-waterLeakage1
  • precise
    #ccxd-icon-precise1
  • electricCabinet
    #ccxd-icon-electricCabinet1
  • system
    #ccxd-icon-system1
  • hydrogen
    #ccxd-icon-hydrogen1
  • smoke
    #ccxd-icon-smoke1
  • server
    #ccxd-icon-server1
  • service
    #ccxd-icon-service1
  • wetTemperature
    #ccxd-icon-wetTemperature1
  • constantHumidityMachine
    #ccxd-icon-constantHumidityMachine1
  • infraRed
    #ccxd-icon-infraRed1
  • thresholdConfiguration
    #ccxd-icon-thresholdConfiguration
  • toConfigure
    #ccxd-icon-toConfigure
  • Dashboard
    #ccxd-icon-Dashboard
  • hydrogen
    #ccxd-icon-hydrogen
  • columnCabinet
    #ccxd-icon-columnCabinet
  • function
    #ccxd-icon-function1
  • heating
    #ccxd-icon-heating
  • firewall
    #ccxd-icon-firewall
  • fan
    #ccxd-icon-fan
  • ShutDown
    #ccxd-icon-ShutDown
  • Refresh
    #ccxd-icon-Refresh
  • Creating
    #ccxd-icon-Creating
  • Error
    #ccxd-icon-Error
  • InOperation
    #ccxd-icon-InOperation
  • delete
    #ccxd-icon-delete
  • collect
    #ccxd-icon-collect1
  • rightArrow
    #ccxd-icon-rightArrow
  • search
    #ccxd-icon-search
  • leftDoubleArrow
    #ccxd-icon-leftDoubleArrow
  • open
    #ccxd-icon-open1
  • leftArrow
    #ccxd-icon-leftArrow
  • calendar
    #ccxd-icon-calendar
  • close
    #ccxd-icon-close1
  • setUp
    #ccxd-icon-setUp
  • aveiconGps
    #ccxd-icon-aveiconGps
  • close
    #ccxd-icon-close
  • returnAirHumidity
    #ccxd-icon-returnAirHumidity
  • settingTemperature
    #ccxd-icon-settingTemperature1
  • longRange
    #ccxd-icon-longRange
  • powerSupply
    #ccxd-icon-powerSupply
  • PowerOn
    #ccxd-icon-PowerOn
  • tankLevel
    #ccxd-icon-tankLevel
  • returnAirTemperature
    #ccxd-icon-returnAirTemperature
  • cloudServices
    #ccxd-icon-cloudServices
  • dehumidification
    #ccxd-icon-dehumidification
  • duration
    #ccxd-icon-duration
  • disk
    #ccxd-icon-disk
  • client
    #ccxd-icon-client
  • function
    #ccxd-icon-function
  • airConditioningStatus
    #ccxd-icon-airConditioningStatus
  • oilPressure
    #ccxd-icon-oilPressure
  • control
    #ccxd-icon-control
  • onTheShelf
    #ccxd-icon-onTheShelf
  • switch
    #ccxd-icon-switch
  • setHumidity
    #ccxd-icon-setHumidity
  • police
    #ccxd-icon-police
  • humidification
    #ccxd-icon-humidification
  • settingTemperature
    #ccxd-icon-settingTemperature
  • Protection
    #ccxd-icon-Protection
  • collect
    #ccxd-icon-collect
  • plus
    #ccxd-icon-plus
  • backToFullScreen
    #ccxd-icon-backToFullScreen
  • minusSign
    #ccxd-icon-minusSign
  • trendChart
    #ccxd-icon-trendChart
  • open
    #ccxd-icon-open
  • fullScreen
    #ccxd-icon-fullScreen

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>