• 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 下载
    
  • 清空
    
  • 退出登录
    
  • 退出
    
  • 退出
    
  • 退出
    
  • 退出
    
  • 退出
    
  • 退出2
    
  • 退出
    
  • 退出
    
  • 退出登录
    
  • 退出
    
  • 左右转换
    
  • 04转换
    
  • 类型转换
    
  • 转换
    
  • 确认
    
  • 确认方案
    
  • 确认方案
    
  • 确认工单
    
  • 核销
    
  • 工单确认
    
  • 文件确认
    
  • 核查比对
    
  • 确认打款
    
  • 核实
    
  • 进入
    
  • checkin
    
  • 办理中心
    
  • 解决方案1-02
    
  • 进入@2x
    
  • 升级
    
  • 产品升版操作
    
  • 升版-升级
    
  • 快速升级
    
  • 查看
    
  • 查看
    
  • 查看详情
    
  • 查看
    
  • 查看
    
  • 查看
    
  • 延期完成
    
  • 延期
    
  • 延期
    
  • 编辑
    
  • 编辑
    
  • 编辑
    
  • 消息_right
    
  • 消息
    
  • 多级选择
    
  • 关联
    
  • 重命名
    
  • 并排比较
    
  • excel
    
  • 工单关联
    
  • 评论
    
  • Minus Circle
    
  • Plus Circle
    
  • 评分标准-zk
    
  • 书签
    
  • 打钩
    
  • 甘特图
    
  • 随机
    
  • 下载
    
  • 用户管理
    
  • 团队管理
    
  • 复制
    
  • 新建
    
  • 分析
    
  • 扳手
    
  • 数据
    
  • 对比分析
    
  • 数据
    
  • 计算器
    
  • 数据分析
    
  • 计算
    
  • 对比分析表analysis
    
  • 国可logo1
    
  • 功能特性
    
  • 导入
    
  • 导出
    
  • 基本信息
    
  • 垂直间距对齐
    
  • 水平间距对齐
    
  • 左对齐
    
  • 右对齐
    
  • 左右居中
    
  • 顶端对齐
    
  • 上下居中
    
  • 底端对齐
    
  • 回收站
    
  • 分析
    
  • 返回
    
  • 51show_折叠展开_向上
    
  • 50show_折叠展开_向下
    
  • 圆形
    
  • 右箭头
    
  • 工艺路径
    
  • 工艺管理-19
    
  • 工序管理
    
  • 流程
    
  • 菱形2
    
  • 加工制造
    
  • 设计管理
    
  • 正三角形 (1)
    
  • 21601428741_pic_hd
    
  • 21601428741_pic_hd-2
    
  • 21601428741_pic_hd-3
    
  • 4
    
  • 5
    
  • 显示
    
  • 隐藏
    
  • Excel-导入
    
  • XML
    
  • 升级
    
  • 降级
    
  • 升级
    
  • 降级
    
  • 列表
    
  • 上下移动-01
    
  • 知识库
    
  • 知识库
    
  • 用户
    
  • 知识库
    
  • 向上添加一行
    
  • 下级
    
  • 添加结构部件
    
  • 内关联
    
  • 复制
    
  • 粘贴
    
  • 剪切文件
    
  • 预防
    
  • 展开
    
  • 展开
    
  • 展开
    
  • 表格树
    
  • 删 除
    
  • 折叠
    
  • 折叠
    
  • 折叠
    
  • 折叠
    
  • 灯泡
    
  • 展开
    
  • 折叠1
    
  • 1
    
  • image_0
    
  • 1
    
  • 失效
    
  • 状态失效
    
  • 设备失效
    
  • 
    链接失效
    
  • 折叠
    
  • 摘卷结构化视图
    
  • 组织结构
    
  • 摘卷结构化视图
    
  • 树集结构-结构
    
  • 摘卷结构化视图
    
  • 合并
    
  • 合并
    
  • 未关联
    
  • 右关联
    
  • 左关联
    
  • 全关联
    
  • 测试
    
  • 测评
    
  • 环境监测
    
  • 
  • 回归-自定义
    
  • 最有计算方法
    
  • 环境
    
  • Flow-算子-线性回归
    
  • 
  • flow-算子-广义线性回归
    
  • 回归曲线
    
  • 
  • 深度算法建模
    
  • 决策树回归
    
  • 迭代加权最小二乘法
    
  • 迭代加权最小二乘法
    
  • 机器
    
  • 功能界面
    
  • 灯泡儿
    
  • 转换
    
  • 关联合并
    
  • 收缩
    
  • 组织结构
    
  • 根收缩
    
  • 结构树
    
  • 配置关联包
    
  • 灯泡
    
  • 功能
    
  • 结构树
    
  • 灯泡
    
  • 属性
    
  • 左关联
    
  • 全关联
    
  • 7-失效
    
  • 转换模式
    
  • 已关联
    
  • 
  • cog
    
  • cogs
    
  • infinite
    
  • move-down
    
  • move-up
    
  • 设置流程uSetupprocess
    
  • library
    
  • library
    
  • department
    
  • ProductionMonitoring2
    
  • Operation and maintenance management-01
    
  • gears
    
  • object-group
    
  • BizProcessMgmt
    
  • Operator management
    
  • process
    
  • process
    
  • main_process
    
  • vd Tool material
    
  • department
    
  • process
    
  • environment_selected
    
  • icon-process-instance-fill
    
  • material2
    
  • cc-process
    
  • icon-change-material-o
    
  • process
    
  • icon-process-management-fill
    
  • Partition
    
  • file-process-delete
    
  • library
    
  • Measurement
    
  • environment1
    
  • Gear-3
    
  • Product classification
    
  • 028-process
    
  • poi-method-3-fill
    
  • icon_wetrident_special_function_03
    
  • Machine
    
  • function Introduction
    
  • y-process
    
  • process
    
  • prj-smart-material-manage
    
  • machinery
    
  • process-site
    
  • processSystem
    
  • material
    
  • process
    
  • customicon-process-resume
    
  • customicon-process-end
    
  • customicon-process-pause
    
  • Partition
    
  • process_branch
    
  • function
    
  • Component 22
    
  • product
    
  • process_category
    
  • material
    
  • apartment-fill
    
  • operator
    
  • production
    
  • 居民大电量
    
  • 神经外科
    
  • 感叹号
    
  • 35
    
  • 37eflogo
    
  • 7
    
  • 8
    
  • 9
    
  • 10
    
  • 11
    
  • 12
    
  • 13
    
  • 1
    
  • 2
    
  • 4
    
  • 5
    
  • 6
    
  • 功能网络
    
  • 知识库
    
  • 评分标准
    
  • 设 置
    
  • 不良反应报告
    
  • 检查
    
  • 数据探测
    
  • 预防措施
    
  • 控制
    
  • 措施清单管理
    
  • 位置调整
    
  • 属性
    
  • 折叠-展开-列表
    
  • 服务端显示控制台
    
  • 折叠_展开
    
  • 结构
    
  • 产品特性-4
    
  • 零电量用户
    
  • 居民大电量
    
  • 4改进措施落地
    
  • 工艺设备管理
    
  • 零电量用户
    
  • 零电量用户
    
  • 结构
    
  • 事故整改措施单
    
  • 粘贴
    
  • 转换 (2)
    
  • 合并
    
  • 279,位置调整
    
  • 任务位置-下移
    
  • 任务位置-上移
    
  • 删除筛选项
    
  • 用户
    
  • 剪切
    
  • 导出
    
  • 协作
    
  • 用户
    
  • 另存为
    
  • 分 享
    
  • 复制
    
  • 添加下级分组
    
  • 发布
    
  • 保存
    
  • 已保存
    
  • 列表
    
  • 列表
    
  • 窗格解锁
    
  • xml
    
  • excel导入
    
  • Excel导入
    
  • Excel导入
    
  • 矩阵
    
  • 表格
    
  • 边界_图形对象_jurassic
    
  • 会员
    
  • delete
    
  • find1
    
  • HTSCIT_find3
    
  • Iconspace_planner
    
  • 员工院级计划 hr/college/staffCollegePlan
    
  • wi-moon-new
    
  • wi-moon-alt-third-quarter
    
  • wi-moon-alt-first-quarter
    
  • wi-moon-full
    
  • wi-moon-alt-third-quarter
    
  • wi-moon-new
    
  • wi-moon-full
    
  • wi-moon-alt-first-quarter
    
  • wi-moon-alt-third-quarter
    
  • wi-moon-new
    
  • wi-moon-full
    
  • wi-moon-alt-first-quarter
    
  • wi-moon-alt-third-quarter
    
  • wi-moon-new
    
  • wi-moon-full
    
  • wi-moon-alt-first-quarter
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

第二步:定义使用 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"。

  • 下载
    .iconxiazai-xue
  • 下载
    .iconxiazai2
  • 下载
    .iconicon--
  • 下载
    .iconxiazai3
  • 下载
    .iconxiazai4
  • 下载
    .iconxiazai5
  • 下载
    .iconxiazai6
  • 下载
    .iconxiazai7
  • 下载
    .iconxiazai8
  • 下载
    .iconxinbaniconshangchuan-
  • 下载
    .iconxiazai9
  • 下载
    .icon0-19
  • 下载
    .iconhanhan-01-01
  • 下载
    .iconxiazai1
  • 清空
    .iconempty
  • 退出登录
    .icontuichudenglu
  • 退出
    .iconqiehuanzuhu
  • 退出
    .icontuichu
  • 退出
    .icontuichu1
  • 退出
    .icontuichu2
  • 退出
    .icontuichu3
  • 退出2
    .iconsign-out2
  • 退出
    .iconicon-out-light
  • 退出
    .icontuichu4
  • 退出登录
    .icontuichudenglu1
  • 退出
    .icontuichu5
  • 左右转换
    .iconweibiaoti8
  • 04转换
    .icon04zhuanhuan
  • 类型转换
    .iconleixingzhuanhuan
  • 转换
    .iconzhuanhuan1
  • 确认
    .iconqueren
  • 确认方案
    .iconsousuoliebiao
  • 确认方案
    .iconquerenfangan
  • 确认工单
    .iconquerengongdan
  • 核销
    .iconhexiao
  • 工单确认
    .icongongdanqueren
  • 文件确认
    .icon21ok
  • 核查比对
    .iconhechabidui
  • 确认打款
    .iconquerendakuan
  • 核实
    .iconheshi
  • 进入
    .iconai226
  • checkin
    .iconcheckin
  • 办理中心
    .iconbanlizhongxin
  • 解决方案1-02
    .iconjiejuefangan1-02
  • 进入@2x
    .iconjinru2x
  • 升级
    .iconupdate
  • 产品升版操作
    .iconchanpinshengbancaozuo
  • 升版-升级
    .iconshengban-shengji
  • 快速升级
    .iconkuaisushengjix
  • 查看
    .iconchakan
  • 查看
    .iconchakan1
  • 查看详情
    .iconicon-chakanxq
  • 查看
    .iconchakan-copy
  • 查看
    .iconchakan2
  • 查看
    .iconchakan3
  • 延期完成
    .icondelay_completed
  • 延期
    .iconyanchi
  • 延期
    .iconyanqi
  • 编辑
    .iconbianji
  • 编辑
    .iconicon6
  • 编辑
    .iconicon-bainji
  • 消息_right
    .iconxiaoxi_right
  • 消息
    .iconxiaoxi1
  • 多级选择
    .iconduojixuanze
  • 关联
    .iconguanlian2
  • 重命名
    .iconzhongmingming
  • 并排比较
    .iconbingpaibijiao
  • excel
    .iconexcel
  • 工单关联
    .icongongdanguanlian
  • 评论
    .iconpinglun
  • Minus Circle
    .iconMinusCircle
  • Plus Circle
    .iconPlusCircle
  • 评分标准-zk
    .iconzk
  • 书签
    .iconshuqian
  • 打钩
    .icondagou
  • 甘特图
    .icongantetu
  • 随机
    .iconsuiji
  • 下载
    .iconxiazai
  • 用户管理
    .iconyonghuguanli
  • 团队管理
    .icontuandui
  • 复制
    .iconcopy
  • 新建
    .iconxinjian
  • 分析
    .iconico_fenxi
  • 扳手
    .iconbanshou
  • 数据
    .iconshuju1
  • 对比分析
    .iconduibifenxi
  • 数据
    .iconshuju
  • 计算器
    .iconjisuanqi
  • 数据分析
    .iconshujufenxi
  • 计算
    .iconicon1
  • 对比分析表analysis
    .iconduibifenxibiaoanalysis
  • 国可logo1
    .iconguokelogo1
  • 功能特性
    .icongongnengtexing
  • 导入
    .icondaoru
  • 导出
    .icondaochu1
  • 基本信息
    .iconjibenxinxi
  • 垂直间距对齐
    .iconchuizhijianjuduiqi
  • 水平间距对齐
    .iconshuipingjianjuduiqi
  • 左对齐
    .iconzuoduiqi
  • 右对齐
    .iconyouduiqi
  • 左右居中
    .iconzuoyoujuzhong
  • 顶端对齐
    .icondingduanduiqi
  • 上下居中
    .iconshangxiajuzhong
  • 底端对齐
    .icondiduanduiqi
  • 回收站
    .iconhuishouzhan
  • 分析
    .iconfenxi
  • 返回
    .iconfanhui
  • 51show_折叠展开_向上
    .iconshow_zhediezhankai_xiangshang
  • 50show_折叠展开_向下
    .iconshow_zhediezhankai_xiangxia
  • 圆形
    .iconweibiaoti1fuzhi
  • 右箭头
    .iconyoujiantou
  • 工艺路径
    .icongongyilujing
  • 工艺管理-19
    .icongongyiguanli-
  • 工序管理
    .icongxgl
  • 流程
    .iconliucheng
  • 菱形2
    .iconlingxing
  • 加工制造
    .iconjiagongzhizao
  • 设计管理
    .iconshejiguanli
  • 正三角形 (1)
    .iconzhengsanjiaoxing
  • 21601428741_pic_hd
    .icon21601428741_pic_hd
  • 21601428741_pic_hd-2
    .icon21601428741_pic_hd-2
  • 21601428741_pic_hd-3
    .icon21601428741_pic_hd-3
  • 4
    .icon41
  • 5
    .icon51
  • 显示
    .iconxianshi
  • 隐藏
    .iconyincang
  • Excel-导入
    .iconExcel-daoru
  • XML
    .iconXML
  • 升级
    .iconshengji1
  • 降级
    .iconjiangji1
  • 升级
    .iconshengji
  • 降级
    .iconjiangji
  • 列表
    .iconliebiao1
  • 上下移动-01
    .iconshangxiayidong-
  • 知识库
    .iconiconfontzhishiku1
  • 知识库
    .iconzhishiku1
  • 用户
    .iconyonghu
  • 知识库
    .iconzhishiku2
  • 向上添加一行
    .iconxiangshangtianjiayihang
  • 下级
    .iconxiaji
  • 添加结构部件
    .icontianjiajiegoubujian
  • 内关联
    .iconbingji
  • 复制
    .iconfuzhi1
  • 粘贴
    .iconniantie1
  • 剪切文件
    .iconjianqiewenjian
  • 预防
    .iconyufang
  • 展开
    .iconzhankai
  • 展开
    .iconzhankai1
  • 展开
    .iconzhankai2
  • 表格树
    .iconbiaogeshu
  • 删 除
    .iconshanchu
  • 折叠
    .iconzhedie2
  • 折叠
    .iconzhedie1
  • 折叠
    .iconzhedie11
  • 折叠
    .iconzd
  • 灯泡
    .icon21
  • 展开
    .iconzhankai3
  • 折叠1
    .iconzhedie111
  • 1
    .icon14-copy
  • image_0
    .iconimage_0
  • 1
    .icon14
  • 失效
    .iconqiangzhishixiao
  • 状态失效
    .iconzhuangtaishixiao
  • 设备失效
    .iconshebeishixiao
  • 链接失效
    .iconlianjieshixiao
  • 折叠
    .iconzhedie
  • 摘卷结构化视图
    .iconnet-copy-copy
  • 组织结构
    .iconzuzhijiegou1
  • 摘卷结构化视图
    .icon1
  • 树集结构-结构
    .iconshujijiegou-jiegou
  • 摘卷结构化视图
    .iconnet-copy
  • 合并
    .iconhebing1
  • 合并
    .iconhebing1-copy
  • 未关联
    .iconweiguanlian
  • 右关联
    .iconyouguanlian
  • 左关联
    .iconzuoguanlian1
  • 全关联
    .iconquanguanlian
  • 测试
    .iconcloud-test
  • 测评
    .iconceping
  • 环境监测
    .iconhuanjingjiance
  • .iconce
  • 回归-自定义
    .iconhuigui
  • 最有计算方法
    .iconzuiyoujisuanfangfa
  • 环境
    .iconfangxiang-huanjing-moban
  • Flow-算子-线性回归
    .iconFlow-suanzi-xianxinghuigui
  • .iconfa
  • flow-算子-广义线性回归
    .iconflow-suanzi-guangyixianxinghuigui
  • 回归曲线
    .iconlianhe71
  • .iconliao
  • 深度算法建模
    .iconshendusuanfajianmo
  • 决策树回归
    .iconjueceshuhuigui
  • 迭代加权最小二乘法
    .icondiedaijiaquanzuixiaoerchengfa
  • 迭代加权最小二乘法
    .icondiedaijiaquanzuixiaoerchengfa1
  • 机器
    .iconjiqi
  • 功能界面
    .iconfunctionjie
  • 灯泡儿
    .icondengpaoer
  • 转换
    .iconGroup-
  • 关联合并
    .iconguanlianhebing
  • 收缩
    .iconshousuo
  • 组织结构
    .iconzuzhijiegou
  • 根收缩
    .icongenshousuo
  • 结构树
    .iconjiegoushu
  • 配置关联包
    .iconpeizhiguanlianbao
  • 灯泡
    .icondengpao
  • 功能
    .icongongneng
  • 结构树
    .iconjiegoushu1
  • 灯泡
    .icondengpao1
  • 属性
    .iconshuxing1
  • 左关联
    .iconzuoguanlian
  • 全关联
    .iconheji
  • 7-失效
    .icon-shixiao
  • 转换模式
    .iconzhuanhuanmoshi
  • 已关联
    .iconyiguanlian
  • .iconji
  • cog
    .iconcog
  • cogs
    .iconcogs
  • infinite
    .iconinfinite
  • move-down
    .iconmovedown
  • move-up
    .iconmoveup
  • 设置流程uSetupprocess
    .iconshezhiliuchengusetupprocess
  • library
    .iconlibrary
  • library
    .iconlibrary1
  • department
    .icondepartment
  • ProductionMonitoring2
    .iconproductionmonitoring2
  • Operation and maintenance management-01
    .iconoperationandmaintenancemanagement01
  • gears
    .icongears
  • object-group
    .iconobject-group
  • BizProcessMgmt
    .iconyewuliuchengguanli
  • Operator management
    .iconcaozuoyuanguanli
  • process
    .iconprocess
  • process
    .iconprocess1
  • main_process
    .iconmain_process
  • vd Tool material
    .iconvdToolmaterial
  • department
    .icondepartment1
  • process
    .iconprocess2
  • environment_selected
    .iconenvironment_selected
  • icon-process-instance-fill
    .iconicon-process-instanc
  • material2
    .iconmaterial
  • cc-process
    .iconcc-process
  • icon-change-material-o
    .iconicon-change-material-o
  • process
    .iconprocess3
  • icon-process-management-fill
    .iconicon-process-management-fill
  • Partition
    .iconPartition
  • file-process-delete
    .iconfile-process-delete
  • library
    .iconlibrary2
  • Measurement
    .iconMeasurement
  • environment1
    .iconenvironment
  • Gear-3
    .iconGear-
  • Product classification
    .iconProductclassification
  • 028-process
    .icon-process
  • poi-method-3-fill
    .iconpoi-method--fill
  • icon_wetrident_special_function_03
    .iconicon_wetrident_special_function_
  • Machine
    .iconMachine
  • function Introduction
    .iconfunctionIntroduction
  • y-process
    .icony-process
  • process
    .iconprocess4
  • prj-smart-material-manage
    .iconprj-smart-material-manage
  • machinery
    .iconmachinery
  • process-site
    .iconprocess-site
  • processSystem
    .iconprocessSystem
  • material
    .iconmaterial1
  • process
    .iconprocess5
  • customicon-process-resume
    .iconcustomicon-process-resume
  • customicon-process-end
    .iconcustomicon-process-end
  • customicon-process-pause
    .iconcustomicon-process-pause
  • Partition
    .iconPartition1
  • process_branch
    .iconprocess_branch
  • function
    .iconfunction
  • Component 22
    .iconComponent22
  • product
    .iconproduct
  • process_category
    .iconprocess_category
  • material
    .iconmaterial2
  • apartment-fill
    .iconapartment-fill
  • operator
    .iconcaozuoyuanguanli-hui
  • production
    .iconproduction
  • 居民大电量
    .iconjumindadianliang1
  • 神经外科
    .iconshenjingwaike
  • 感叹号
    .iconpoint
  • 35
    .icon35
  • 37eflogo
    .icon37eflogo
  • 7
    .icon7
  • 8
    .icon8
  • 9
    .icon9
  • 10
    .icon10
  • 11
    .icon111
  • 12
    .icon12
  • 13
    .icon13
  • 1
    .icon11
  • 2
    .icon2
  • 4
    .icon4
  • 5
    .icon5
  • 6
    .icon6
  • 功能网络
    .icongongnengwangluo
  • 知识库
    .iconzhishiku
  • 评分标准
    .iconpingfenbiaozhun
  • 设 置
    .iconshezhi
  • 不良反应报告
    .iconbuliangfanyingbaogao
  • 检查
    .iconjiancha
  • 数据探测
    .iconshujutance
  • 预防措施
    .iconyufangcuoshi
  • 控制
    .iconkongzhi
  • 措施清单管理
    .iconcuoshiqingdanguanli
  • 位置调整
    .iconweizhitiaozheng
  • 属性
    .iconshuxing
  • 折叠-展开-列表
    .icondown
  • 服务端显示控制台
    .iconfuwuduanxianshikongzhitai
  • 折叠_展开
    .iconzhedie_zhankai
  • 结构
    .iconjiegou
  • 产品特性-4
    .iconchanpintexing-
  • 零电量用户
    .iconlingdianliangyonghu
  • 居民大电量
    .iconjumindadianliang
  • 4改进措施落地
    .icongaijincuoshiladi
  • 工艺设备管理
    .iconico_gongyishebei
  • 零电量用户
    .iconlingdianliangyonghu1
  • 零电量用户
    .iconlingdianliangyonghu2
  • 结构
    .iconjiegou-copy
  • 事故整改措施单
    .iconshijianzhenggaicuoshidan
  • 粘贴
    .iconniantie
  • 转换 (2)
    .iconzhuanhuan
  • 合并
    .iconhebing
  • 279,位置调整
    .iconicon-test
  • 任务位置-下移
    .iconrenwuweizhi-xiayi
  • 任务位置-上移
    .iconrenwuweizhi-shangyi
  • 删除筛选项
    .icondelete1
  • 用户
    .icon27
  • 剪切
    .iconjianqie
  • 导出
    .icondaochu
  • 协作
    .iconxiezuo
  • 用户
    .icon271
  • 另存为
    .iconlingcunwei
  • 分 享
    .iconfenxiang
  • 复制
    .iconfuzhi
  • 添加下级分组
    .icontianjiaxiajifenzu
  • 发布
    .iconfabu
  • 保存
    .iconbaocun
  • 已保存
    .iconyibaocun
  • 列表
    .iconfenzu
  • 列表
    .iconliebiao
  • 窗格解锁
    .iconchuanggejiesuo
  • xml
    .iconxml
  • excel导入
    .iconexceldaoru
  • Excel导入
    .iconExceldaoru
  • Excel导入
    .iconExceldaoru1
  • 矩阵
    .iconjuzhen
  • 表格
    .iconbiaoge
  • 边界_图形对象_jurassic
    .iconjurassic_border
  • 会员
    .iconhuiyuan
  • delete
    .icondelete
  • find1
    .iconfind1
  • HTSCIT_find3
    .iconHTSCIT_find
  • Iconspace_planner
    .iconIconspace_planner
  • 员工院级计划 hr/college/staffCollegePlan
    .iconhrcollegestaffCollegePlan
  • wi-moon-new
    .iconwi-moon-new
  • wi-moon-alt-third-quarter
    .iconwi-moon-alt-third-quarter
  • wi-moon-alt-first-quarter
    .iconwi-moon-alt-first-quarter
  • wi-moon-full
    .iconwi-moon-full
  • wi-moon-alt-third-quarter
    .iconwi-moon-alt-third-quarter-red
  • wi-moon-new
    .iconwi-moon-new-red
  • wi-moon-full
    .iconwi-moon-full-blue
  • wi-moon-alt-first-quarter
    .iconwi-moon-alt-first-quarter-blue
  • wi-moon-alt-third-quarter
    .iconwi-moon-alt-third-quarter-blue
  • wi-moon-new
    .iconwi-moon-new-blue
  • wi-moon-full
    .iconwi-moon-full-green
  • wi-moon-alt-first-quarter
    .iconwi-moon-alt-first-quarter-green
  • wi-moon-alt-third-quarter
    .iconwi-moon-alt-third-quarter-green
  • wi-moon-new
    .iconwi-moon-new-green
  • wi-moon-full
    .iconwi-moon-full-red
  • wi-moon-alt-first-quarter
    .iconwi-moon-alt-first-quarter-red

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont iconxxx"></span>

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

  • 下载
    #iconxiazai-xue
  • 下载
    #iconxiazai2
  • 下载
    #iconicon--
  • 下载
    #iconxiazai3
  • 下载
    #iconxiazai4
  • 下载
    #iconxiazai5
  • 下载
    #iconxiazai6
  • 下载
    #iconxiazai7
  • 下载
    #iconxiazai8
  • 下载
    #iconxinbaniconshangchuan-
  • 下载
    #iconxiazai9
  • 下载
    #icon0-19
  • 下载
    #iconhanhan-01-01
  • 下载
    #iconxiazai1
  • 清空
    #iconempty
  • 退出登录
    #icontuichudenglu
  • 退出
    #iconqiehuanzuhu
  • 退出
    #icontuichu
  • 退出
    #icontuichu1
  • 退出
    #icontuichu2
  • 退出
    #icontuichu3
  • 退出2
    #iconsign-out2
  • 退出
    #iconicon-out-light
  • 退出
    #icontuichu4
  • 退出登录
    #icontuichudenglu1
  • 退出
    #icontuichu5
  • 左右转换
    #iconweibiaoti8
  • 04转换
    #icon04zhuanhuan
  • 类型转换
    #iconleixingzhuanhuan
  • 转换
    #iconzhuanhuan1
  • 确认
    #iconqueren
  • 确认方案
    #iconsousuoliebiao
  • 确认方案
    #iconquerenfangan
  • 确认工单
    #iconquerengongdan
  • 核销
    #iconhexiao
  • 工单确认
    #icongongdanqueren
  • 文件确认
    #icon21ok
  • 核查比对
    #iconhechabidui
  • 确认打款
    #iconquerendakuan
  • 核实
    #iconheshi
  • 进入
    #iconai226
  • checkin
    #iconcheckin
  • 办理中心
    #iconbanlizhongxin
  • 解决方案1-02
    #iconjiejuefangan1-02
  • 进入@2x
    #iconjinru2x
  • 升级
    #iconupdate
  • 产品升版操作
    #iconchanpinshengbancaozuo
  • 升版-升级
    #iconshengban-shengji
  • 快速升级
    #iconkuaisushengjix
  • 查看
    #iconchakan
  • 查看
    #iconchakan1
  • 查看详情
    #iconicon-chakanxq
  • 查看
    #iconchakan-copy
  • 查看
    #iconchakan2
  • 查看
    #iconchakan3
  • 延期完成
    #icondelay_completed
  • 延期
    #iconyanchi
  • 延期
    #iconyanqi
  • 编辑
    #iconbianji
  • 编辑
    #iconicon6
  • 编辑
    #iconicon-bainji
  • 消息_right
    #iconxiaoxi_right
  • 消息
    #iconxiaoxi1
  • 多级选择
    #iconduojixuanze
  • 关联
    #iconguanlian2
  • 重命名
    #iconzhongmingming
  • 并排比较
    #iconbingpaibijiao
  • excel
    #iconexcel
  • 工单关联
    #icongongdanguanlian
  • 评论
    #iconpinglun
  • Minus Circle
    #iconMinusCircle
  • Plus Circle
    #iconPlusCircle
  • 评分标准-zk
    #iconzk
  • 书签
    #iconshuqian
  • 打钩
    #icondagou
  • 甘特图
    #icongantetu
  • 随机
    #iconsuiji
  • 下载
    #iconxiazai
  • 用户管理
    #iconyonghuguanli
  • 团队管理
    #icontuandui
  • 复制
    #iconcopy
  • 新建
    #iconxinjian
  • 分析
    #iconico_fenxi
  • 扳手
    #iconbanshou
  • 数据
    #iconshuju1
  • 对比分析
    #iconduibifenxi
  • 数据
    #iconshuju
  • 计算器
    #iconjisuanqi
  • 数据分析
    #iconshujufenxi
  • 计算
    #iconicon1
  • 对比分析表analysis
    #iconduibifenxibiaoanalysis
  • 国可logo1
    #iconguokelogo1
  • 功能特性
    #icongongnengtexing
  • 导入
    #icondaoru
  • 导出
    #icondaochu1
  • 基本信息
    #iconjibenxinxi
  • 垂直间距对齐
    #iconchuizhijianjuduiqi
  • 水平间距对齐
    #iconshuipingjianjuduiqi
  • 左对齐
    #iconzuoduiqi
  • 右对齐
    #iconyouduiqi
  • 左右居中
    #iconzuoyoujuzhong
  • 顶端对齐
    #icondingduanduiqi
  • 上下居中
    #iconshangxiajuzhong
  • 底端对齐
    #icondiduanduiqi
  • 回收站
    #iconhuishouzhan
  • 分析
    #iconfenxi
  • 返回
    #iconfanhui
  • 51show_折叠展开_向上
    #iconshow_zhediezhankai_xiangshang
  • 50show_折叠展开_向下
    #iconshow_zhediezhankai_xiangxia
  • 圆形
    #iconweibiaoti1fuzhi
  • 右箭头
    #iconyoujiantou
  • 工艺路径
    #icongongyilujing
  • 工艺管理-19
    #icongongyiguanli-
  • 工序管理
    #icongxgl
  • 流程
    #iconliucheng
  • 菱形2
    #iconlingxing
  • 加工制造
    #iconjiagongzhizao
  • 设计管理
    #iconshejiguanli
  • 正三角形 (1)
    #iconzhengsanjiaoxing
  • 21601428741_pic_hd
    #icon21601428741_pic_hd
  • 21601428741_pic_hd-2
    #icon21601428741_pic_hd-2
  • 21601428741_pic_hd-3
    #icon21601428741_pic_hd-3
  • 4
    #icon41
  • 5
    #icon51
  • 显示
    #iconxianshi
  • 隐藏
    #iconyincang
  • Excel-导入
    #iconExcel-daoru
  • XML
    #iconXML
  • 升级
    #iconshengji1
  • 降级
    #iconjiangji1
  • 升级
    #iconshengji
  • 降级
    #iconjiangji
  • 列表
    #iconliebiao1
  • 上下移动-01
    #iconshangxiayidong-
  • 知识库
    #iconiconfontzhishiku1
  • 知识库
    #iconzhishiku1
  • 用户
    #iconyonghu
  • 知识库
    #iconzhishiku2
  • 向上添加一行
    #iconxiangshangtianjiayihang
  • 下级
    #iconxiaji
  • 添加结构部件
    #icontianjiajiegoubujian
  • 内关联
    #iconbingji
  • 复制
    #iconfuzhi1
  • 粘贴
    #iconniantie1
  • 剪切文件
    #iconjianqiewenjian
  • 预防
    #iconyufang
  • 展开
    #iconzhankai
  • 展开
    #iconzhankai1
  • 展开
    #iconzhankai2
  • 表格树
    #iconbiaogeshu
  • 删 除
    #iconshanchu
  • 折叠
    #iconzhedie2
  • 折叠
    #iconzhedie1
  • 折叠
    #iconzhedie11
  • 折叠
    #iconzd
  • 灯泡
    #icon21
  • 展开
    #iconzhankai3
  • 折叠1
    #iconzhedie111
  • 1
    #icon14-copy
  • image_0
    #iconimage_0
  • 1
    #icon14
  • 失效
    #iconqiangzhishixiao
  • 状态失效
    #iconzhuangtaishixiao
  • 设备失效
    #iconshebeishixiao
  • 链接失效
    #iconlianjieshixiao
  • 折叠
    #iconzhedie
  • 摘卷结构化视图
    #iconnet-copy-copy
  • 组织结构
    #iconzuzhijiegou1
  • 摘卷结构化视图
    #icon1
  • 树集结构-结构
    #iconshujijiegou-jiegou
  • 摘卷结构化视图
    #iconnet-copy
  • 合并
    #iconhebing1
  • 合并
    #iconhebing1-copy
  • 未关联
    #iconweiguanlian
  • 右关联
    #iconyouguanlian
  • 左关联
    #iconzuoguanlian1
  • 全关联
    #iconquanguanlian
  • 测试
    #iconcloud-test
  • 测评
    #iconceping
  • 环境监测
    #iconhuanjingjiance
  • #iconce
  • 回归-自定义
    #iconhuigui
  • 最有计算方法
    #iconzuiyoujisuanfangfa
  • 环境
    #iconfangxiang-huanjing-moban
  • Flow-算子-线性回归
    #iconFlow-suanzi-xianxinghuigui
  • #iconfa
  • flow-算子-广义线性回归
    #iconflow-suanzi-guangyixianxinghuigui
  • 回归曲线
    #iconlianhe71
  • #iconliao
  • 深度算法建模
    #iconshendusuanfajianmo
  • 决策树回归
    #iconjueceshuhuigui
  • 迭代加权最小二乘法
    #icondiedaijiaquanzuixiaoerchengfa
  • 迭代加权最小二乘法
    #icondiedaijiaquanzuixiaoerchengfa1
  • 机器
    #iconjiqi
  • 功能界面
    #iconfunctionjie
  • 灯泡儿
    #icondengpaoer
  • 转换
    #iconGroup-
  • 关联合并
    #iconguanlianhebing
  • 收缩
    #iconshousuo
  • 组织结构
    #iconzuzhijiegou
  • 根收缩
    #icongenshousuo
  • 结构树
    #iconjiegoushu
  • 配置关联包
    #iconpeizhiguanlianbao
  • 灯泡
    #icondengpao
  • 功能
    #icongongneng
  • 结构树
    #iconjiegoushu1
  • 灯泡
    #icondengpao1
  • 属性
    #iconshuxing1
  • 左关联
    #iconzuoguanlian
  • 全关联
    #iconheji
  • 7-失效
    #icon-shixiao
  • 转换模式
    #iconzhuanhuanmoshi
  • 已关联
    #iconyiguanlian
  • #iconji
  • cog
    #iconcog
  • cogs
    #iconcogs
  • infinite
    #iconinfinite
  • move-down
    #iconmovedown
  • move-up
    #iconmoveup
  • 设置流程uSetupprocess
    #iconshezhiliuchengusetupprocess
  • library
    #iconlibrary
  • library
    #iconlibrary1
  • department
    #icondepartment
  • ProductionMonitoring2
    #iconproductionmonitoring2
  • Operation and maintenance management-01
    #iconoperationandmaintenancemanagement01
  • gears
    #icongears
  • object-group
    #iconobject-group
  • BizProcessMgmt
    #iconyewuliuchengguanli
  • Operator management
    #iconcaozuoyuanguanli
  • process
    #iconprocess
  • process
    #iconprocess1
  • main_process
    #iconmain_process
  • vd Tool material
    #iconvdToolmaterial
  • department
    #icondepartment1
  • process
    #iconprocess2
  • environment_selected
    #iconenvironment_selected
  • icon-process-instance-fill
    #iconicon-process-instanc
  • material2
    #iconmaterial
  • cc-process
    #iconcc-process
  • icon-change-material-o
    #iconicon-change-material-o
  • process
    #iconprocess3
  • icon-process-management-fill
    #iconicon-process-management-fill
  • Partition
    #iconPartition
  • file-process-delete
    #iconfile-process-delete
  • library
    #iconlibrary2
  • Measurement
    #iconMeasurement
  • environment1
    #iconenvironment
  • Gear-3
    #iconGear-
  • Product classification
    #iconProductclassification
  • 028-process
    #icon-process
  • poi-method-3-fill
    #iconpoi-method--fill
  • icon_wetrident_special_function_03
    #iconicon_wetrident_special_function_
  • Machine
    #iconMachine
  • function Introduction
    #iconfunctionIntroduction
  • y-process
    #icony-process
  • process
    #iconprocess4
  • prj-smart-material-manage
    #iconprj-smart-material-manage
  • machinery
    #iconmachinery
  • process-site
    #iconprocess-site
  • processSystem
    #iconprocessSystem
  • material
    #iconmaterial1
  • process
    #iconprocess5
  • customicon-process-resume
    #iconcustomicon-process-resume
  • customicon-process-end
    #iconcustomicon-process-end
  • customicon-process-pause
    #iconcustomicon-process-pause
  • Partition
    #iconPartition1
  • process_branch
    #iconprocess_branch
  • function
    #iconfunction
  • Component 22
    #iconComponent22
  • product
    #iconproduct
  • process_category
    #iconprocess_category
  • material
    #iconmaterial2
  • apartment-fill
    #iconapartment-fill
  • operator
    #iconcaozuoyuanguanli-hui
  • production
    #iconproduction
  • 居民大电量
    #iconjumindadianliang1
  • 神经外科
    #iconshenjingwaike
  • 感叹号
    #iconpoint
  • 35
    #icon35
  • 37eflogo
    #icon37eflogo
  • 7
    #icon7
  • 8
    #icon8
  • 9
    #icon9
  • 10
    #icon10
  • 11
    #icon111
  • 12
    #icon12
  • 13
    #icon13
  • 1
    #icon11
  • 2
    #icon2
  • 4
    #icon4
  • 5
    #icon5
  • 6
    #icon6
  • 功能网络
    #icongongnengwangluo
  • 知识库
    #iconzhishiku
  • 评分标准
    #iconpingfenbiaozhun
  • 设 置
    #iconshezhi
  • 不良反应报告
    #iconbuliangfanyingbaogao
  • 检查
    #iconjiancha
  • 数据探测
    #iconshujutance
  • 预防措施
    #iconyufangcuoshi
  • 控制
    #iconkongzhi
  • 措施清单管理
    #iconcuoshiqingdanguanli
  • 位置调整
    #iconweizhitiaozheng
  • 属性
    #iconshuxing
  • 折叠-展开-列表
    #icondown
  • 服务端显示控制台
    #iconfuwuduanxianshikongzhitai
  • 折叠_展开
    #iconzhedie_zhankai
  • 结构
    #iconjiegou
  • 产品特性-4
    #iconchanpintexing-
  • 零电量用户
    #iconlingdianliangyonghu
  • 居民大电量
    #iconjumindadianliang
  • 4改进措施落地
    #icongaijincuoshiladi
  • 工艺设备管理
    #iconico_gongyishebei
  • 零电量用户
    #iconlingdianliangyonghu1
  • 零电量用户
    #iconlingdianliangyonghu2
  • 结构
    #iconjiegou-copy
  • 事故整改措施单
    #iconshijianzhenggaicuoshidan
  • 粘贴
    #iconniantie
  • 转换 (2)
    #iconzhuanhuan
  • 合并
    #iconhebing
  • 279,位置调整
    #iconicon-test
  • 任务位置-下移
    #iconrenwuweizhi-xiayi
  • 任务位置-上移
    #iconrenwuweizhi-shangyi
  • 删除筛选项
    #icondelete1
  • 用户
    #icon27
  • 剪切
    #iconjianqie
  • 导出
    #icondaochu
  • 协作
    #iconxiezuo
  • 用户
    #icon271
  • 另存为
    #iconlingcunwei
  • 分 享
    #iconfenxiang
  • 复制
    #iconfuzhi
  • 添加下级分组
    #icontianjiaxiajifenzu
  • 发布
    #iconfabu
  • 保存
    #iconbaocun
  • 已保存
    #iconyibaocun
  • 列表
    #iconfenzu
  • 列表
    #iconliebiao
  • 窗格解锁
    #iconchuanggejiesuo
  • xml
    #iconxml
  • excel导入
    #iconexceldaoru
  • Excel导入
    #iconExceldaoru
  • Excel导入
    #iconExceldaoru1
  • 矩阵
    #iconjuzhen
  • 表格
    #iconbiaoge
  • 边界_图形对象_jurassic
    #iconjurassic_border
  • 会员
    #iconhuiyuan
  • delete
    #icondelete
  • find1
    #iconfind1
  • HTSCIT_find3
    #iconHTSCIT_find
  • Iconspace_planner
    #iconIconspace_planner
  • 员工院级计划 hr/college/staffCollegePlan
    #iconhrcollegestaffCollegePlan
  • wi-moon-new
    #iconwi-moon-new
  • wi-moon-alt-third-quarter
    #iconwi-moon-alt-third-quarter
  • wi-moon-alt-first-quarter
    #iconwi-moon-alt-first-quarter
  • wi-moon-full
    #iconwi-moon-full
  • wi-moon-alt-third-quarter
    #iconwi-moon-alt-third-quarter-red
  • wi-moon-new
    #iconwi-moon-new-red
  • wi-moon-full
    #iconwi-moon-full-blue
  • wi-moon-alt-first-quarter
    #iconwi-moon-alt-first-quarter-blue
  • wi-moon-alt-third-quarter
    #iconwi-moon-alt-third-quarter-blue
  • wi-moon-new
    #iconwi-moon-new-blue
  • wi-moon-full
    #iconwi-moon-full-green
  • wi-moon-alt-first-quarter
    #iconwi-moon-alt-first-quarter-green
  • wi-moon-alt-third-quarter
    #iconwi-moon-alt-third-quarter-green
  • wi-moon-new
    #iconwi-moon-new-green
  • wi-moon-full
    #iconwi-moon-full-red
  • wi-moon-alt-first-quarter
    #iconwi-moon-alt-first-quarter-red

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>