• 垂直居中对齐
    
  • 上对齐
    
  • 水平居中对齐
    
  • 下对齐
    
  • 右对齐
    
  • 左对齐
    
  • 置顶
    
  • 置底
    
  • 取消组合
    
  • 组合
    
  • 横向分布
    
  • 纵向分布
    
  • 等宽
    
  • 等高
    
  • 赞2
    
  • 
  • 视频
    
  • 进度
    
  • 通讯录
    
  • 工作台
    
  • 知识产权
    
  • 知识产权
    
  • 工作台未选中
    
  • 人员通讯录
    
  • 消息
    
  • 消息
    
  • 发送
    
  • 收藏
    
  • 添加
    
  • 关注
    
  • 缩小
    
  • 放大
    
  • 半屏手写
    
  • 消息
    
  • 颜色
    
  • 申请
    
  • 添加信息
    
  • 领用
    
  • 代理跟踪
    
  • 签名
    
  • console-24
    
  • 邮件
    
  • 待办
    
  • 箭头
    
  • 居中对齐
    
  • 左对齐
    
  • 标签
    
  • 投票
    
  • 生活
    
  • 我的_业务办理
    
  • 显示比例
    
  • 运行
    
  • 列表
    
  • 用户登录-1-输入手机号_复制
    
  • 高度
    
  • 宽度
    
  • 签收
    
  • 关机
    
  • 问卷
    
  • 已办
    
  • 切换
    
  • 颜色
    
  • 文件
    
  • 流程
    
  • 文件夹
    
  • 斜体
    
  • 字体大小
    
  • 分档值_颜色
    
  • 手写,中
    
  • 手写,粗
    
  • 预受理查询
    
  • 出错
    
  • 受理2
    
  • 草稿箱
    
  • 已发送
    
  • 出错
    
  • 设置
    
  • 终止流程
    
  • b_毛笔
    
  • 查询
    
  • 收件箱
    
  • 已删除
    
  • 附件
    
  • 审核
    
  • 用户
    
  • 撤销
    
  • 有序列表
    
  • 500
    
  • 执行力
    
  • 粗体
    
  • 保存
    
  • 登记农产品
    
  • 办理补办
    
  • 业务办理
    
  • 审核
    
  • 文件夹
    
  • 恢复
    
  • 右对齐
    
  • 设置
    
  • 完成
    
  • 出错
    
  • 任务已完成
    
  • 任务未开始
    
  • 任务进行中
    
  • 完成
    
  • 引用
    
  • 移动到分组
    
  • 下属
    
  • 集团
    
  • 部门 (6)
    
  • 无序列表
    
  • 添加
    
  • 登记
    
  • 办理结果通知
    
  • 登记信息
    
  • 加油
    
  • 4事务协助
    
  • 车巴巴-油耗2
    
  • 人员
    
  • 已逾期-选中
    
  • 完成
    
  • 
  • 
  • 
  • 定位
    
  • 单位
    
  • 日程
    
  • 保存
    
  • 表决
    
  • 便贴
    
  • 参会人员
    
  • 不赞成
    
  • 会议材料
    
  • 签到
    
  • 签到一览表
    
  • 赞成
    
  • 跟屏
    
  • 会议材料下一步
    
  • 会议议程
    
  • 下属
    
  • 添加
    
  • 事项交流
    
  • 知识库
    
  • 我收到
    
  • 关注
    
  • 
  • 提醒
    
  • 新建
    
  • 提醒
    
  • 第三名
    
  • 通知
    
  • 第一名
    
  • 确定(1)
    
  • 第二名
    
  • 闹钟
    
  • 栏目
    
  • 闹钟-实心
    
  • 会议
    
  • 已查阅-01
    
  • 通讯录
    
  • 附件
    
  • 邮件
    
  • 列表
    
  • 通讯录
    
  • 正文
    
  • 文档
    
  • 图片
    
  • 选中
    
  • 发送
    
  • 审批
    
  • doc
    
  • 日志
    
  • files-png
    
  • 导入
    
  • 流程
    
  • 保存
    
  • pdf
    
  • 邮件
    
  • zip
    
  • 展开侧边栏
    
  • xls
    
  • 办公(6)
    
  • ppt
    
  • 版本新建
    
  • 保存
    
  • 全屏幕
    
  • 保存
    
  • 表格2
    
  • 填写表单
    
  • 资产汇总
    
  • 流程
    
  • 打印
    
  • 打印
    
  • 附件资料
    
  • 预警
    
  • 关闭
    
  • 提示
    
  • 会议基础信息
    
  • 上传
    
  • 监控
    
  • 下载
    
  • 文件
    
  • 写信
    
  • 系统管理
    
  • 讨论
    
  • 搜索
    
  • 退出
    
  • 返回
    
  • 消息
    
  • 车辆信息
    
  • 通知
    
  • 门户
    
  • 删除
    
  • 系统
    
  • 邮件
    
  • 关 闭
    
  • 设置
    
  • 屏幕
    
  • 
  • 会议
    
  • 首页
    
  • 日历
    
  • 修改
    
  • 用户
    
  • 转发
    
  • 密码
    
  • 撤销
    
  • 账户 安全
    
  • 流程包
    
  • 旅行车
    
  • 报销
    
  • 吉普车_jeep1
    
  • 个人
    
  • 轿车
    
  • 邮件回复全部
    
  • 商务车
    
  • 请假
    
  • 大巴车
    
  • 语音
    
  • 扫码
    
  • 打电话
    
  • 手机
    
  • 取消
    
  • 通讯录
    
  • 字典
    
  • 出差
    
  • 短信
    
  • 文件夹
    
  • 回复
    
  • 多选
    
  • 通讯录
    
  • 取消
    
  • 文件夹
    
  • 文档
    
  • 上一步
    
  • FY_写信
    
  • 清空
    
  • 多选
    
  • 报表
    
  • 确定
    
  • 批阅
    
  • 取消
    
  • 1手机短信提醒
    
  • 橡皮-实心
    
  • 下一步
    
  • 更多
    
  • 会议室
    
  • 用章
    
  • 删除
    
  • 自定义
    
  • 修改
    
  • 500
    
  • 审批
    
  • 通讯录
    
  • 领取
    
  • 商业领导
    
  • 组织机构
    
  • 组织
    
  • 指引
    
  • 人才
    
  • 项目
    
  • 创意值-实心
    
  • 咨询专家
    
  • 部门发文
    
  • 相关流程
    
  • 表单完成
    
  • 邮件
    
  • 子流程
    
  • 流程
    
  • 费用
    
  • 流程
    
  • 发文_文档
    
  • 查询
    
  • 指标
    
  • 效率
    
  • 资料
    
  • 手机
    
  • 下一页
    
  • 任务
    
  • 知识库
    
  • 大脑
    
  • 项目
    
  • 趋势
    
  • 发文管理
    
  • 知识
    
  • 知识
    
  • 技术2
    
  • 专家
    
  • 小助手
    
  • 报销
    
  • 部门
    
  • 电话
    
  • 周报
    
  • 进程
    
  • 座位
    
  • 下一页
    
  • 个人中心-大事记
    
  • 简介
    
  • 部门
    
  • 密码
    
  • 简介
    
  • 资讯
    
  • 债权债务台账
    
  • 财务 (1)
    
  • 文档库
    
  • 新建 添加 表单 页面
    
  • 已办
    
  • down
    
  • up
    
  • 上传
    
  • 下载
    
  • 发文
    
  • 收文
    
  • 代理商管理
    
  • 刷新
    
  • 回收站
    
  • 授权
    
  • 我的申请
    
  • 清除
    
  • 固定
    
  • 日历
    
  • 二维码
    
  • 日历
    
  • 名片2
    
  • 分享
    
  • 收藏
    
  • 阅读
    
  • 阅读小
    
  • 分享
    
  • 分享
    
  • AB岗转办
    
  • txt
    
  • 文件
    
  • 跳转
    
  • 归档
    
  • 督办
    
  • 车辆
    
  • 文件夹
    
  • 暂停
    
  • 导出
    
  • 等待
    
  • 倒计时框
    
  • 空心圆
    
  • 设置
    
  • 授权设置
    
  • 授权
    
  • 验证码
    
  • 回收站
    
  • 手机
    
  • 车辆报废
    
  • 待阅事项
    
  • 代办事项
    
  • 密码
    
  • 设置
    
  • 用户
    
  • 子流程
    
  • 作废
    
  • 董事会OA
    
  • 共享
    
  • 批量操作
    
  • 备忘录
    
  • 发送
    
  • 帮助
    
  • 授权设置
    
  • 导入
    
  • 时间
    
  • 导入
    
  • 导出
    
  • 任务分解
    
  • 库存量
    
  • 停止使用
    
  • 逾期
    
  • 完成
    
  • 任务反馈
    
  • 申请中止
    
  • 申请办结
    
  • 申请延期
    
  • 我的申请
    
  • 没有结果
    
  • 
  • 正常推进
    
  • 草稿
    
  • 逾期
    
  • 未签收
    
  • 已签收
    
  • 帮助
    
  • 播放
    
  • HTML图标
    
  • html
    
  • 暂停
    
  • 实体分组
    
  • 隐藏
    
  • 输入框
    
  • 富文本框
    
  • 单选框 选中
    
  • 多选框
    
  • 主题词
    
  • 时间线
    
  • 缩略图
    
  • 按钮
    
  • 下拉框
    
  • 符号-数字输入框
    
  • 意见
    
  • 查看
    
  • 表单
    
  • 复选框
    
  • 
  • 
  • new
    
  • fsux_图表_饼图
    
  • fsux_图表_指标卡
    
  • fsux_图表_气泡图
    
  • fsux_图表_桑基图
    
  • fsux_图表_堆积柱状图
    
  • fsux_图表_环图
    
  • 确定
    
  • fsux_图表_面积图
    
  • 新建
    
  • fsux_图表_表格
    
  • 最近播放
    
  • fsux_图表_散点图
    
  • 向右
    
  • fsux_图表_折线图
    
  • 向左
    
  • fsux_图表_仪表盘
    
  • 向下
    
  • fsux_图表_条形图
    
  • 向右
    
  • fsux_图表_对比图
    
  • 另存为
    
  • fsux_图表_瀑布图
    
  • 当前项
    
  • fsux_图表_柱状图
    
  • 圆圈
    
  • 10堆叠条形图
    
  • 定位
    
  • 切换
    
  • 定位
    
  • 图片加载失败
    
  • 通知
    
  • 文件
    
  • 关注
    
  • 文件
    
  • 服务
    
  • 安全
    
  • 房屋
    
  • 车辆
    
  • 对账单
    
  • 资产采购
    
  • 财产
    
  • 标准
    
  • 预测
    
  • 刷新
    
  • 物品
    
  • 库存
    
  • 任务
    
  • 报表
    
  • 设置
    
  • 上报
    
  • 搜索
    
  • 归还
    
  • 维修
    
  • 评价
    
  • 食物
    
  • 申请
    
  • 美食
    
  • 检查
    
  • 借用
    
  • 货车
    
  • 盘点
    
  • 会议
    
  • 计划
    
  • 领用
    
  • 购物车
    
  • 采购
    
  • 出库
    
  • 列表
    
  • 装修
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1639447279155') format('woff2'),
       url('iconfont.woff?t=1639447279155') format('woff'),
       url('iconfont.ttf?t=1639447279155') 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"。

  • 垂直居中对齐
    .icon-chuizhijuzhongduiqi
  • 上对齐
    .icon-shangduiqi
  • 水平居中对齐
    .icon-shuipingjuzhongduiqi
  • 下对齐
    .icon-xiaduiqi
  • 右对齐
    .icon-youduiqi1
  • 左对齐
    .icon-zuoduiqi1
  • 置顶
    .icon-zhiding
  • 置底
    .icon-zhidi
  • 取消组合
    .icon-quxiaozuhe
  • 组合
    .icon-zuhe
  • 横向分布
    .icon-hengxiangfenbu
  • 纵向分布
    .icon-zongxiangfenbu
  • 等宽
    .icon-dengkuan
  • 等高
    .icon-denggao
  • 赞2
    .icon-zan
  • .icon-zan1
  • 视频
    .icon-shipin
  • 进度
    .icon-jindu
  • 通讯录
    .icon-tongxunlu3
  • 工作台
    .icon-gongzuotai1
  • 知识产权
    .icon-zhishichanquan
  • 知识产权
    .icon-zhishichanquan1
  • 工作台未选中
    .icon-gongzuotai
  • 人员通讯录
    .icon-tongxunlu12
  • 消息
    .icon-xiaoxi1
  • 消息
    .icon-xiaoxi11
  • 发送
    .icon-fasong2
  • 收藏
    .icon-shoucang1
  • 添加
    .icon-tianjia
  • 关注
    .icon-guanzhu1
  • 缩小
    .icon-suoxiao
  • 放大
    .icon-fangda
  • 半屏手写
    .icon-banpingshouxie
  • 消息
    .icon-xiaoxi21
  • 颜色
    .icon-yanse
  • 申请
    .icon-qingshi
  • 添加信息
    .icon-addInfo
  • 领用
    .icon-lingyong
  • 代理跟踪
    .icon-dailigenzong
  • 签名
    .icon-qianming
  • console-24
    .icon-yingyong
  • 邮件
    .icon-neibuyoujian
  • 待办
    .icon-daiban
  • 箭头
    .icon-jiantou-you
  • 居中对齐
    .icon-juzhongduiqi
  • 左对齐
    .icon-zuoduiqi
  • 标签
    .icon-biaoqian
  • 投票
    .icon-toupiao
  • 生活
    .icon-shenghuo
  • 我的_业务办理
    .icon-wodeyewubanli
  • 显示比例
    .icon-yuanshi
  • 运行
    .icon-17
  • 列表
    .icon-ai-list
  • 用户登录-1-输入手机号_复制
    .icon-yonghudenglu1shurushoujihaofuzhi
  • 高度
    .icon-gaodu
  • 宽度
    .icon-kuandu
  • 签收
    .icon-sign-for
  • 关机
    .icon-guanji
  • 问卷
    .icon-wenjuan
  • 已办
    .icon-yiban1
  • 切换
    .icon-qiehuan1
  • 颜色
    .icon-yanse1
  • 文件
    .icon-wenjian3
  • 流程
    .icon-gongwen2
  • 文件夹
    .icon-wenjianjia11
  • 斜体
    .icon-xieti
  • 字体大小
    .icon-zitidaxiao
  • 分档值_颜色
    .icon-yanse11
  • 手写,中
    .icon-shouxie_zhong
  • 手写,粗
    .icon-shouxie_cu
  • 预受理查询
    .icon-yushoulichaxun
  • 出错
    .icon-ku
  • 受理2
    .icon-shouli2
  • 草稿箱
    .icon-caogaoxiang
  • 已发送
    .icon-yifasong
  • 出错
    .icon-chucuo1
  • 设置
    .icon-shezhi11
  • 终止流程
    .icon-zhongzhiliucheng
  • b_毛笔
    .icon-maobi
  • 查询
    .icon-chaxun1
  • 收件箱
    .icon-shoujianxiang
  • 已删除
    .icon-yishanchu
  • 附件
    .icon-fujian11
  • 审核
    .icon-shenhe
  • 用户
    .icon-yonghu2
  • 撤销
    .icon-chehui
  • 有序列表
    .icon-youxuliebiao
  • 500
    .icon-icon-test1
  • 执行力
    .icon-zhihangli
  • 粗体
    .icon-cuti
  • 保存
    .icon-baocun3
  • 登记农产品
    .icon-dengjinongchanpin
  • 办理补办
    .icon-banlibuban
  • 业务办理
    .icon-yewubanli
  • 审核
    .icon-shenhe1
  • 文件夹
    .icon-wenjianjia111
  • 恢复
    .icon-huifu11
  • 右对齐
    .icon-youduiqi
  • 设置
    .icon-shezhi21
  • 完成
    .icon-wancheng1
  • 出错
    .icon-chucuo2
  • 任务已完成
    .icon-renwuyiwancheng
  • 任务未开始
    .icon-renwuweikaishi
  • 任务进行中
    .icon-renwujinhangzhong
  • 完成
    .icon-wancheng11
  • 引用
    .icon-quote
  • 移动到分组
    .icon-yidongdaofenzu
  • 下属
    .icon-xiashu
  • 集团
    .icon-jituan
  • 部门 (6)
    .icon-bumen11
  • 无序列表
    .icon-wuxuliebiao
  • 添加
    .icon-shouyetubiao-
  • 登记
    .icon-dengji
  • 办理结果通知
    .icon-renwudan
  • 登记信息
    .icon-dengjixinxi
  • 加油
    .icon-gas-station
  • 4事务协助
    .icon-shiwuxiezhu
  • 车巴巴-油耗2
    .icon-chebaba-youhao
  • 人员
    .icon-cdb_member
  • 已逾期-选中
    .icon-yiyuqi-xuanzhong
  • 完成
    .icon-wancheng2
  • .icon-ri
  • .icon-yue
  • .icon-zhou
  • 定位
    .icon-dingwei2
  • 单位
    .icon-danwei
  • 日程
    .icon-richeng
  • 保存
    .icon-baocun11
  • 表决
    .icon-biaojue
  • 便贴
    .icon-biantie
  • 参会人员
    .icon-canhuirenyuan
  • 不赞成
    .icon-buzancheng
  • 会议材料
    .icon-huiyicailiao
  • 签到
    .icon-qiandao
  • 签到一览表
    .icon-qiandaoyilanbiao
  • 赞成
    .icon-zancheng
  • 跟屏
    .icon-genping
  • 会议材料下一步
    .icon-huiyicailiaoxiayibu
  • 会议议程
    .icon-huiyiyicheng
  • 下属
    .icon-xiashu1
  • 添加
    .icon-icon-add-02
  • 事项交流
    .icon-shixiangjiaoliu
  • 知识库
    .icon-weibiaoti9
  • 我收到
    .icon-shoudao
  • 关注
    .icon-guanzhu2
  • .icon-jian1
  • 提醒
    .icon-tixing
  • 新建
    .icon-xinjian1
  • 提醒
    .icon-tixing3
  • 第三名
    .icon-disanming
  • 通知
    .icon-tongzhi
  • 第一名
    .icon-diyiming
  • 确定(1)
    .icon-ok
  • 第二名
    .icon-dierming
  • 闹钟
    .icon-naozhong
  • 栏目
    .icon-lanmu
  • 闹钟-实心
    .icon-naozhong2
  • 会议
    .icon-huiyi1
  • 已查阅-01
    .icon-yiyue
  • 通讯录
    .icon-tongxunlu2
  • 附件
    .icon-fujian
  • 邮件
    .icon-youjian2
  • 列表
    .icon-liebiao
  • 通讯录
    .icon-tongxunlu11
  • 正文
    .icon-zhengwen
  • 文档
    .icon-wendang1
  • 图片
    .icon-tupian
  • 选中
    .icon-xuanzhong
  • 发送
    .icon-fasong
  • 审批
    .icon-shenpi1
  • doc
    .icon-docx
  • 日志
    .icon-rizhi
  • files-png
    .icon-png
  • 导入
    .icon-daoru2
  • 流程
    .icon-gongwen
  • 保存
    .icon-baocun1
  • pdf
    .icon-pdf
  • 邮件
    .icon-youjian11
  • zip
    .icon-zip
  • 展开侧边栏
    .icon-zhankaicebianlan
  • xls
    .icon-xlsx
  • 办公(6)
    .icon-bangong
  • ppt
    .icon-pptx
  • 版本新建
    .icon-banbenxinjian
  • 保存
    .icon-baocun
  • 全屏幕
    .icon-quanpingmu
  • 保存
    .icon-baocun2
  • 表格2
    .icon-biaoge
  • 填写表单
    .icon-biaodan
  • 资产汇总
    .icon-asset-management-the-asset-summary
  • 流程
    .icon-liucheng
  • 打印
    .icon-V
  • 打印
    .icon-dayin
  • 附件资料
    .icon-fujianziliao
  • 预警
    .icon-alarm
  • 关闭
    .icon-guanbi
  • 提示
    .icon-tishi
  • 会议基础信息
    .icon-huiyijichuxinxi
  • 上传
    .icon-shangchuan
  • 监控
    .icon-221
  • 下载
    .icon-yunxiazai
  • 文件
    .icon-wenjian2
  • 写信
    .icon-bianji
  • 系统管理
    .icon-xitongguanli
  • 讨论
    .icon-taolun
  • 搜索
    .icon-sousuo
  • 退出
    .icon-tuichu
  • 返回
    .icon-fanhui
  • 消息
    .icon-xiaoxi
  • 车辆信息
    .icon-menu_clxx
  • 通知
    .icon-gonggao
  • 门户
    .icon-menhu
  • 删除
    .icon-shanchu
  • 系统
    .icon-xitong
  • 邮件
    .icon-youjian
  • 关 闭
    .icon-guanbi1
  • 设置
    .icon-shezhi
  • 屏幕
    .icon-pingmu
  • .icon-bi
  • 会议
    .icon-huiyi2
  • 首页
    .icon-bumen
  • 日历
    .icon-rili1
  • 修改
    .icon-xiugai3
  • 用户
    .icon-yonghu1
  • 转发
    .icon-zhuanfa
  • 密码
    .icon-mima2
  • 撤销
    .icon-chexiao
  • 账户 安全
    .icon-zhanghuanquan
  • 流程包
    .icon-waichu
  • 旅行车
    .icon-lvxingche
  • 报销
    .icon-baoxiao
  • 吉普车_jeep1
    .icon-jipuchejeep1
  • 个人
    .icon-geren
  • 轿车
    .icon-jiaoche
  • 邮件回复全部
    .icon-huifuquanbu
  • 商务车
    .icon-shangwuche
  • 请假
    .icon-qingjia
  • 大巴车
    .icon-dabache
  • 语音
    .icon-yuyin
  • 扫码
    .icon-saoma
  • 打电话
    .icon-dadianhua
  • 手机
    .icon-shouji1
  • 取消
    .icon-quxiao
  • 通讯录
    .icon-tongxunlu
  • 字典
    .icon-citiao
  • 出差
    .icon-chuchai
  • 短信
    .icon-xiaoxi2
  • 文件夹
    .icon-wenjianjia
  • 回复
    .icon-huifu
  • 多选
    .icon-duoxuan
  • 通讯录
    .icon-wo
  • 取消
    .icon-cancel2
  • 文件夹
    .icon-dakai
  • 文档
    .icon-wendang
  • 上一步
    .icon-shangyibu
  • FY_写信
    .icon-shouxie_xi
  • 清空
    .icon-qingkong
  • 多选
    .icon-duoxuan1
  • 报表
    .icon-baobiao
  • 确定
    .icon-queding
  • 批阅
    .icon-piyue
  • 取消
    .icon-cancel
  • 1手机短信提醒
    .icon-duanxin
  • 橡皮-实心
    .icon-xiangpi
  • 下一步
    .icon-xiayibu
  • 更多
    .icon-gengduo
  • 会议室
    .icon-huiyi
  • 用章
    .icon-gongzhang
  • 删除
    .icon-shanchu1
  • 自定义
    .icon-zidingyi
  • 修改
    .icon-xiugai
  • 500
    .icon-500
  • 审批
    .icon-shenpi
  • 通讯录
    .icon-tongxunlu1
  • 领取
    .icon-lingqu
  • 商业领导
    .icon-gongwenbao
  • 组织机构
    .icon-zuzhijigou
  • 组织
    .icon-zuzhi
  • 指引
    .icon-zhiyin
  • 人才
    .icon-rencai
  • 项目
    .icon-wendang4
  • 创意值-实心
    .icon-chuangyi
  • 咨询专家
    .icon-zhuanjia2
  • 部门发文
    .icon-wendang2
  • 相关流程
    .icon-xiangguanliucheng
  • 表单完成
    .icon-biaodanwancheng
  • 邮件
    .icon-youjian1
  • 子流程
    .icon-ziliucheng
  • 流程
    .icon-gongwen1
  • 费用
    .icon-feiyong1
  • 流程
    .icon-flow
  • 发文_文档
    .icon-wendang3
  • 查询
    .icon-chaxun
  • 指标
    .icon-zhibiao
  • 效率
    .icon-xiaolv
  • 资料
    .icon-ziliao
  • 手机
    .icon-shouji
  • 下一页
    .icon-xiayiye
  • 任务
    .icon-renwu
  • 知识库
    .icon-zhishiku
  • 大脑
    .icon-danao
  • 项目
    .icon-xiangmu
  • 趋势
    .icon-qushi
  • 发文管理
    .icon-fawenguanli
  • 知识
    .icon-zhishi2
  • 知识
    .icon-zhishi
  • 技术2
    .icon-jishu
  • 专家
    .icon-zhuanjia
  • 小助手
    .icon-xiaozhushou
  • 报销
    .icon-baoxiao2
  • 部门
    .icon-bumen2
  • 电话
    .icon-dianhua
  • 周报
    .icon-zhoubao1
  • 进程
    .icon-jincheng
  • 座位
    .icon-zuowei
  • 下一页
    .icon-shangyiye
  • 个人中心-大事记
    .icon-dashiji
  • 简介
    .icon-intro
  • 部门
    .icon-jigou
  • 密码
    .icon-mima
  • 简介
    .icon-jianjie
  • 资讯
    .icon-zixun
  • 债权债务台账
    .icon-taizhang
  • 财务 (1)
    .icon-caiwu
  • 文档库
    .icon-wendangku
  • 新建 添加 表单 页面
    .icon-xinjian2
  • 已办
    .icon-yiban
  • down
    .icon-down
  • up
    .icon-up
  • 上传
    .icon-upload
  • 下载
    .icon-xiazai
  • 发文
    .icon-fawen
  • 收文
    .icon-shouwen
  • 代理商管理
    .icon-agent
  • 刷新
    .icon-shuaxin
  • 回收站
    .icon-huishouzhan
  • 授权
    .icon-shouquan
  • 我的申请
    .icon-wodeshenqing
  • 清除
    .icon-qingchu
  • 固定
    .icon-guding
  • 日历
    .icon-rili31
  • 二维码
    .icon-erweima
  • 日历
    .icon-rili
  • 名片2
    .icon-mingpian
  • 分享
    .icon-fenxiang
  • 收藏
    .icon-shoucang
  • 阅读
    .icon-yuedu2
  • 阅读小
    .icon-yuedu
  • 分享
    .icon-fenxiang1
  • 分享
    .icon-fenxiang2
  • AB岗转办
    .icon-zhuanban
  • txt
    .icon-txt
  • 文件
    .icon-wenjian
  • 跳转
    .icon-tiaozhuan
  • 归档
    .icon-guidang
  • 督办
    .icon-duban
  • 车辆
    .icon-cheliang
  • 文件夹
    .icon-wenjianjia1
  • 暂停
    .icon-pause
  • 导出
    .icon-daochu
  • 等待
    .icon-dengdai
  • 倒计时框
    .icon-countDown
  • 空心圆
    .icon-kongxinyuan
  • 设置
    .icon-shezhi1
  • 授权设置
    .icon-shouquanshezhi
  • 授权
    .icon-shouquan1
  • 验证码
    .icon-yanzhengma
  • 回收站
    .icon-huishouzhan1
  • 手机
    .icon-shouji2
  • 车辆报废
    .icon-cheliangbaofei
  • 待阅事项
    .icon-daiyueshixiang
  • 代办事项
    .icon-daibanshixiang
  • 密码
    .icon-mima1
  • 设置
    .icon-shezhi2
  • 用户
    .icon-yonghu
  • 子流程
    .icon-ziliucheng1
  • 作废
    .icon-zuofei
  • 董事会OA
    .icon-dongshihuiOA
  • 共享
    .icon-gongxiang
  • 批量操作
    .icon-plcz
  • 备忘录
    .icon-beiwanglu
  • 发送
    .icon-fasong1
  • 帮助
    .icon-bangzhu
  • 授权设置
    .icon-shouquanshezhi1
  • 导入
    .icon-daoru
  • 时间
    .icon-shijian
  • 导入
    .icon-daoru1
  • 导出
    .icon-daochu1
  • 任务分解
    .icon-renwufenjie
  • 库存量
    .icon-kucunliang
  • 停止使用
    .icon-tingzhishiyong
  • 逾期
    .icon-yuqi
  • 完成
    .icon-wancheng
  • 任务反馈
    .icon-renwufankui
  • 申请中止
    .icon-shenqingzhongzhi
  • 申请办结
    .icon-shenqingbanjie
  • 申请延期
    .icon-shenqingyanqi
  • 我的申请
    .icon-wodeshenqing1
  • 没有结果
    .icon-meiyoujieguo
  • .icon-party
  • 正常推进
    .icon-zhengchangtuijin
  • 草稿
    .icon-caogao
  • 逾期
    .icon-yuqi1
  • 未签收
    .icon-weiqianshou
  • 已签收
    .icon-yiqianshou
  • 帮助
    .icon-bangzhu1
  • 播放
    .icon-bofang
  • HTML图标
    .icon-HTMLtubiao
  • html
    .icon-html
  • 暂停
    .icon-zanting
  • 实体分组
    .icon-shitifenzu
  • 隐藏
    .icon-yincang
  • 输入框
    .icon-shurukuang
  • 富文本框
    .icon-wenben
  • 单选框 选中
    .icon-danxuankuangxuanzhong
  • 多选框
    .icon-duoxuankuang
  • 主题词
    .icon-zhutici
  • 时间线
    .icon-shijianxian
  • 缩略图
    .icon-suolvetu
  • 按钮
    .icon-anniu
  • 下拉框
    .icon-xialakuang
  • 符号-数字输入框
    .icon-shuzishurukuang
  • 意见
    .icon-yijian
  • 查看
    .icon-chakan
  • 表单
    .icon-form
  • 复选框
    .icon-fuxuankuang
  • .icon-jia
  • .icon-zhen
  • new
    .icon-new
  • fsux_图表_饼图
    .icon-fsux_tubiao_bingtu
  • fsux_图表_指标卡
    .icon-fsux_tubiao_zhibiaoka
  • fsux_图表_气泡图
    .icon-SmartAnalysis-20
  • fsux_图表_桑基图
    .icon-sankey
  • fsux_图表_堆积柱状图
    .icon-fsux_tubiao_duijizhuzhuangtu
  • fsux_图表_环图
    .icon-fsux_tubiao_huantu
  • 确定
    .icon-ok2
  • fsux_图表_面积图
    .icon-ic_tubiao_mianji
  • 新建
    .icon-xinjian
  • fsux_图表_表格
    .icon-widget-table
  • 最近播放
    .icon-zuijinbofang
  • fsux_图表_散点图
    .icon-fsux_tubiao_sandiantu
  • 向右
    .icon-xiangyou
  • fsux_图表_折线图
    .icon-fsux_tubiao_zhexiantu
  • 向左
    .icon-xiangzuo
  • fsux_图表_仪表盘
    .icon-fsux_tubiao_yibiaopan
  • 向下
    .icon-xiangxia
  • fsux_图表_条形图
    .icon-fsux_tubiao_tiaoxingtu
  • 向右
    .icon-xiangshang
  • fsux_图表_对比图
    .icon-fsux_tubiao_duibitu
  • 另存为
    .icon-lingcun
  • fsux_图表_瀑布图
    .icon-fsux_tubiao_pubutu
  • 当前项
    .icon-iconNow
  • fsux_图表_柱状图
    .icon-fsux_tubiao_zhuzhuangtu
  • 圆圈
    .icon-rectangle
  • 10堆叠条形图
    .icon-ic_stacked_horizontal_bar
  • 定位
    .icon-dingwei
  • 切换
    .icon-qiehuan
  • 定位
    .icon-dingwei1
  • 图片加载失败
    .icon-bianzu
  • 通知
    .icon-cuiban
  • 文件
    .icon-21file
  • 关注
    .icon-guanzhu
  • 文件
    .icon-wenjian1
  • 服务
    .icon-extend-fuwu
  • 安全
    .icon-extend-anquan
  • 房屋
    .icon-extend-fangwu
  • 车辆
    .icon-extend-cheliang
  • 对账单
    .icon-extend-duizhangdan
  • 资产采购
    .icon-extend-caigou2
  • 财产
    .icon-extend-caichan
  • 标准
    .icon-extend-biaozhun
  • 预测
    .icon-extend-yuce
  • 刷新
    .icon-extend-shuaxing
  • 物品
    .icon-extend-wupin
  • 库存
    .icon-extend-kucun
  • 任务
    .icon-extend-renwu
  • 报表
    .icon-extend-tianbao
  • 设置
    .icon-extend-shezhi
  • 上报
    .icon-extend-shaobao
  • 搜索
    .icon-extend-sousuo
  • 归还
    .icon-extend-guihuan
  • 维修
    .icon-extend-weixiu
  • 评价
    .icon-extend-pingjia
  • 食物
    .icon-extend-shiwu
  • 申请
    .icon-extend-shenqing
  • 美食
    .icon-extend-meishi
  • 检查
    .icon-extend-jiancha
  • 借用
    .icon-extend-jieyong
  • 货车
    .icon-extend-huoche
  • 盘点
    .icon-extend-pandian
  • 会议
    .icon-extend-huiyi
  • 计划
    .icon-extend-jihua
  • 领用
    .icon-extend-lingyong
  • 购物车
    .icon-extend-gouwuche
  • 采购
    .icon-extend-caigou
  • 出库
    .icon-extend-chuku
  • 列表
    .icon-extend-liebiao
  • 装修
    .icon-extend-zhuangxiu

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 垂直居中对齐
    #icon-chuizhijuzhongduiqi
  • 上对齐
    #icon-shangduiqi
  • 水平居中对齐
    #icon-shuipingjuzhongduiqi
  • 下对齐
    #icon-xiaduiqi
  • 右对齐
    #icon-youduiqi1
  • 左对齐
    #icon-zuoduiqi1
  • 置顶
    #icon-zhiding
  • 置底
    #icon-zhidi
  • 取消组合
    #icon-quxiaozuhe
  • 组合
    #icon-zuhe
  • 横向分布
    #icon-hengxiangfenbu
  • 纵向分布
    #icon-zongxiangfenbu
  • 等宽
    #icon-dengkuan
  • 等高
    #icon-denggao
  • 赞2
    #icon-zan
  • #icon-zan1
  • 视频
    #icon-shipin
  • 进度
    #icon-jindu
  • 通讯录
    #icon-tongxunlu3
  • 工作台
    #icon-gongzuotai1
  • 知识产权
    #icon-zhishichanquan
  • 知识产权
    #icon-zhishichanquan1
  • 工作台未选中
    #icon-gongzuotai
  • 人员通讯录
    #icon-tongxunlu12
  • 消息
    #icon-xiaoxi1
  • 消息
    #icon-xiaoxi11
  • 发送
    #icon-fasong2
  • 收藏
    #icon-shoucang1
  • 添加
    #icon-tianjia
  • 关注
    #icon-guanzhu1
  • 缩小
    #icon-suoxiao
  • 放大
    #icon-fangda
  • 半屏手写
    #icon-banpingshouxie
  • 消息
    #icon-xiaoxi21
  • 颜色
    #icon-yanse
  • 申请
    #icon-qingshi
  • 添加信息
    #icon-addInfo
  • 领用
    #icon-lingyong
  • 代理跟踪
    #icon-dailigenzong
  • 签名
    #icon-qianming
  • console-24
    #icon-yingyong
  • 邮件
    #icon-neibuyoujian
  • 待办
    #icon-daiban
  • 箭头
    #icon-jiantou-you
  • 居中对齐
    #icon-juzhongduiqi
  • 左对齐
    #icon-zuoduiqi
  • 标签
    #icon-biaoqian
  • 投票
    #icon-toupiao
  • 生活
    #icon-shenghuo
  • 我的_业务办理
    #icon-wodeyewubanli
  • 显示比例
    #icon-yuanshi
  • 运行
    #icon-17
  • 列表
    #icon-ai-list
  • 用户登录-1-输入手机号_复制
    #icon-yonghudenglu1shurushoujihaofuzhi
  • 高度
    #icon-gaodu
  • 宽度
    #icon-kuandu
  • 签收
    #icon-sign-for
  • 关机
    #icon-guanji
  • 问卷
    #icon-wenjuan
  • 已办
    #icon-yiban1
  • 切换
    #icon-qiehuan1
  • 颜色
    #icon-yanse1
  • 文件
    #icon-wenjian3
  • 流程
    #icon-gongwen2
  • 文件夹
    #icon-wenjianjia11
  • 斜体
    #icon-xieti
  • 字体大小
    #icon-zitidaxiao
  • 分档值_颜色
    #icon-yanse11
  • 手写,中
    #icon-shouxie_zhong
  • 手写,粗
    #icon-shouxie_cu
  • 预受理查询
    #icon-yushoulichaxun
  • 出错
    #icon-ku
  • 受理2
    #icon-shouli2
  • 草稿箱
    #icon-caogaoxiang
  • 已发送
    #icon-yifasong
  • 出错
    #icon-chucuo1
  • 设置
    #icon-shezhi11
  • 终止流程
    #icon-zhongzhiliucheng
  • b_毛笔
    #icon-maobi
  • 查询
    #icon-chaxun1
  • 收件箱
    #icon-shoujianxiang
  • 已删除
    #icon-yishanchu
  • 附件
    #icon-fujian11
  • 审核
    #icon-shenhe
  • 用户
    #icon-yonghu2
  • 撤销
    #icon-chehui
  • 有序列表
    #icon-youxuliebiao
  • 500
    #icon-icon-test1
  • 执行力
    #icon-zhihangli
  • 粗体
    #icon-cuti
  • 保存
    #icon-baocun3
  • 登记农产品
    #icon-dengjinongchanpin
  • 办理补办
    #icon-banlibuban
  • 业务办理
    #icon-yewubanli
  • 审核
    #icon-shenhe1
  • 文件夹
    #icon-wenjianjia111
  • 恢复
    #icon-huifu11
  • 右对齐
    #icon-youduiqi
  • 设置
    #icon-shezhi21
  • 完成
    #icon-wancheng1
  • 出错
    #icon-chucuo2
  • 任务已完成
    #icon-renwuyiwancheng
  • 任务未开始
    #icon-renwuweikaishi
  • 任务进行中
    #icon-renwujinhangzhong
  • 完成
    #icon-wancheng11
  • 引用
    #icon-quote
  • 移动到分组
    #icon-yidongdaofenzu
  • 下属
    #icon-xiashu
  • 集团
    #icon-jituan
  • 部门 (6)
    #icon-bumen11
  • 无序列表
    #icon-wuxuliebiao
  • 添加
    #icon-shouyetubiao-
  • 登记
    #icon-dengji
  • 办理结果通知
    #icon-renwudan
  • 登记信息
    #icon-dengjixinxi
  • 加油
    #icon-gas-station
  • 4事务协助
    #icon-shiwuxiezhu
  • 车巴巴-油耗2
    #icon-chebaba-youhao
  • 人员
    #icon-cdb_member
  • 已逾期-选中
    #icon-yiyuqi-xuanzhong
  • 完成
    #icon-wancheng2
  • #icon-ri
  • #icon-yue
  • #icon-zhou
  • 定位
    #icon-dingwei2
  • 单位
    #icon-danwei
  • 日程
    #icon-richeng
  • 保存
    #icon-baocun11
  • 表决
    #icon-biaojue
  • 便贴
    #icon-biantie
  • 参会人员
    #icon-canhuirenyuan
  • 不赞成
    #icon-buzancheng
  • 会议材料
    #icon-huiyicailiao
  • 签到
    #icon-qiandao
  • 签到一览表
    #icon-qiandaoyilanbiao
  • 赞成
    #icon-zancheng
  • 跟屏
    #icon-genping
  • 会议材料下一步
    #icon-huiyicailiaoxiayibu
  • 会议议程
    #icon-huiyiyicheng
  • 下属
    #icon-xiashu1
  • 添加
    #icon-icon-add-02
  • 事项交流
    #icon-shixiangjiaoliu
  • 知识库
    #icon-weibiaoti9
  • 我收到
    #icon-shoudao
  • 关注
    #icon-guanzhu2
  • #icon-jian1
  • 提醒
    #icon-tixing
  • 新建
    #icon-xinjian1
  • 提醒
    #icon-tixing3
  • 第三名
    #icon-disanming
  • 通知
    #icon-tongzhi
  • 第一名
    #icon-diyiming
  • 确定(1)
    #icon-ok
  • 第二名
    #icon-dierming
  • 闹钟
    #icon-naozhong
  • 栏目
    #icon-lanmu
  • 闹钟-实心
    #icon-naozhong2
  • 会议
    #icon-huiyi1
  • 已查阅-01
    #icon-yiyue
  • 通讯录
    #icon-tongxunlu2
  • 附件
    #icon-fujian
  • 邮件
    #icon-youjian2
  • 列表
    #icon-liebiao
  • 通讯录
    #icon-tongxunlu11
  • 正文
    #icon-zhengwen
  • 文档
    #icon-wendang1
  • 图片
    #icon-tupian
  • 选中
    #icon-xuanzhong
  • 发送
    #icon-fasong
  • 审批
    #icon-shenpi1
  • doc
    #icon-docx
  • 日志
    #icon-rizhi
  • files-png
    #icon-png
  • 导入
    #icon-daoru2
  • 流程
    #icon-gongwen
  • 保存
    #icon-baocun1
  • pdf
    #icon-pdf
  • 邮件
    #icon-youjian11
  • zip
    #icon-zip
  • 展开侧边栏
    #icon-zhankaicebianlan
  • xls
    #icon-xlsx
  • 办公(6)
    #icon-bangong
  • ppt
    #icon-pptx
  • 版本新建
    #icon-banbenxinjian
  • 保存
    #icon-baocun
  • 全屏幕
    #icon-quanpingmu
  • 保存
    #icon-baocun2
  • 表格2
    #icon-biaoge
  • 填写表单
    #icon-biaodan
  • 资产汇总
    #icon-asset-management-the-asset-summary
  • 流程
    #icon-liucheng
  • 打印
    #icon-V
  • 打印
    #icon-dayin
  • 附件资料
    #icon-fujianziliao
  • 预警
    #icon-alarm
  • 关闭
    #icon-guanbi
  • 提示
    #icon-tishi
  • 会议基础信息
    #icon-huiyijichuxinxi
  • 上传
    #icon-shangchuan
  • 监控
    #icon-221
  • 下载
    #icon-yunxiazai
  • 文件
    #icon-wenjian2
  • 写信
    #icon-bianji
  • 系统管理
    #icon-xitongguanli
  • 讨论
    #icon-taolun
  • 搜索
    #icon-sousuo
  • 退出
    #icon-tuichu
  • 返回
    #icon-fanhui
  • 消息
    #icon-xiaoxi
  • 车辆信息
    #icon-menu_clxx
  • 通知
    #icon-gonggao
  • 门户
    #icon-menhu
  • 删除
    #icon-shanchu
  • 系统
    #icon-xitong
  • 邮件
    #icon-youjian
  • 关 闭
    #icon-guanbi1
  • 设置
    #icon-shezhi
  • 屏幕
    #icon-pingmu
  • #icon-bi
  • 会议
    #icon-huiyi2
  • 首页
    #icon-bumen
  • 日历
    #icon-rili1
  • 修改
    #icon-xiugai3
  • 用户
    #icon-yonghu1
  • 转发
    #icon-zhuanfa
  • 密码
    #icon-mima2
  • 撤销
    #icon-chexiao
  • 账户 安全
    #icon-zhanghuanquan
  • 流程包
    #icon-waichu
  • 旅行车
    #icon-lvxingche
  • 报销
    #icon-baoxiao
  • 吉普车_jeep1
    #icon-jipuchejeep1
  • 个人
    #icon-geren
  • 轿车
    #icon-jiaoche
  • 邮件回复全部
    #icon-huifuquanbu
  • 商务车
    #icon-shangwuche
  • 请假
    #icon-qingjia
  • 大巴车
    #icon-dabache
  • 语音
    #icon-yuyin
  • 扫码
    #icon-saoma
  • 打电话
    #icon-dadianhua
  • 手机
    #icon-shouji1
  • 取消
    #icon-quxiao
  • 通讯录
    #icon-tongxunlu
  • 字典
    #icon-citiao
  • 出差
    #icon-chuchai
  • 短信
    #icon-xiaoxi2
  • 文件夹
    #icon-wenjianjia
  • 回复
    #icon-huifu
  • 多选
    #icon-duoxuan
  • 通讯录
    #icon-wo
  • 取消
    #icon-cancel2
  • 文件夹
    #icon-dakai
  • 文档
    #icon-wendang
  • 上一步
    #icon-shangyibu
  • FY_写信
    #icon-shouxie_xi
  • 清空
    #icon-qingkong
  • 多选
    #icon-duoxuan1
  • 报表
    #icon-baobiao
  • 确定
    #icon-queding
  • 批阅
    #icon-piyue
  • 取消
    #icon-cancel
  • 1手机短信提醒
    #icon-duanxin
  • 橡皮-实心
    #icon-xiangpi
  • 下一步
    #icon-xiayibu
  • 更多
    #icon-gengduo
  • 会议室
    #icon-huiyi
  • 用章
    #icon-gongzhang
  • 删除
    #icon-shanchu1
  • 自定义
    #icon-zidingyi
  • 修改
    #icon-xiugai
  • 500
    #icon-500
  • 审批
    #icon-shenpi
  • 通讯录
    #icon-tongxunlu1
  • 领取
    #icon-lingqu
  • 商业领导
    #icon-gongwenbao
  • 组织机构
    #icon-zuzhijigou
  • 组织
    #icon-zuzhi
  • 指引
    #icon-zhiyin
  • 人才
    #icon-rencai
  • 项目
    #icon-wendang4
  • 创意值-实心
    #icon-chuangyi
  • 咨询专家
    #icon-zhuanjia2
  • 部门发文
    #icon-wendang2
  • 相关流程
    #icon-xiangguanliucheng
  • 表单完成
    #icon-biaodanwancheng
  • 邮件
    #icon-youjian1
  • 子流程
    #icon-ziliucheng
  • 流程
    #icon-gongwen1
  • 费用
    #icon-feiyong1
  • 流程
    #icon-flow
  • 发文_文档
    #icon-wendang3
  • 查询
    #icon-chaxun
  • 指标
    #icon-zhibiao
  • 效率
    #icon-xiaolv
  • 资料
    #icon-ziliao
  • 手机
    #icon-shouji
  • 下一页
    #icon-xiayiye
  • 任务
    #icon-renwu
  • 知识库
    #icon-zhishiku
  • 大脑
    #icon-danao
  • 项目
    #icon-xiangmu
  • 趋势
    #icon-qushi
  • 发文管理
    #icon-fawenguanli
  • 知识
    #icon-zhishi2
  • 知识
    #icon-zhishi
  • 技术2
    #icon-jishu
  • 专家
    #icon-zhuanjia
  • 小助手
    #icon-xiaozhushou
  • 报销
    #icon-baoxiao2
  • 部门
    #icon-bumen2
  • 电话
    #icon-dianhua
  • 周报
    #icon-zhoubao1
  • 进程
    #icon-jincheng
  • 座位
    #icon-zuowei
  • 下一页
    #icon-shangyiye
  • 个人中心-大事记
    #icon-dashiji
  • 简介
    #icon-intro
  • 部门
    #icon-jigou
  • 密码
    #icon-mima
  • 简介
    #icon-jianjie
  • 资讯
    #icon-zixun
  • 债权债务台账
    #icon-taizhang
  • 财务 (1)
    #icon-caiwu
  • 文档库
    #icon-wendangku
  • 新建 添加 表单 页面
    #icon-xinjian2
  • 已办
    #icon-yiban
  • down
    #icon-down
  • up
    #icon-up
  • 上传
    #icon-upload
  • 下载
    #icon-xiazai
  • 发文
    #icon-fawen
  • 收文
    #icon-shouwen
  • 代理商管理
    #icon-agent
  • 刷新
    #icon-shuaxin
  • 回收站
    #icon-huishouzhan
  • 授权
    #icon-shouquan
  • 我的申请
    #icon-wodeshenqing
  • 清除
    #icon-qingchu
  • 固定
    #icon-guding
  • 日历
    #icon-rili31
  • 二维码
    #icon-erweima
  • 日历
    #icon-rili
  • 名片2
    #icon-mingpian
  • 分享
    #icon-fenxiang
  • 收藏
    #icon-shoucang
  • 阅读
    #icon-yuedu2
  • 阅读小
    #icon-yuedu
  • 分享
    #icon-fenxiang1
  • 分享
    #icon-fenxiang2
  • AB岗转办
    #icon-zhuanban
  • txt
    #icon-txt
  • 文件
    #icon-wenjian
  • 跳转
    #icon-tiaozhuan
  • 归档
    #icon-guidang
  • 督办
    #icon-duban
  • 车辆
    #icon-cheliang
  • 文件夹
    #icon-wenjianjia1
  • 暂停
    #icon-pause
  • 导出
    #icon-daochu
  • 等待
    #icon-dengdai
  • 倒计时框
    #icon-countDown
  • 空心圆
    #icon-kongxinyuan
  • 设置
    #icon-shezhi1
  • 授权设置
    #icon-shouquanshezhi
  • 授权
    #icon-shouquan1
  • 验证码
    #icon-yanzhengma
  • 回收站
    #icon-huishouzhan1
  • 手机
    #icon-shouji2
  • 车辆报废
    #icon-cheliangbaofei
  • 待阅事项
    #icon-daiyueshixiang
  • 代办事项
    #icon-daibanshixiang
  • 密码
    #icon-mima1
  • 设置
    #icon-shezhi2
  • 用户
    #icon-yonghu
  • 子流程
    #icon-ziliucheng1
  • 作废
    #icon-zuofei
  • 董事会OA
    #icon-dongshihuiOA
  • 共享
    #icon-gongxiang
  • 批量操作
    #icon-plcz
  • 备忘录
    #icon-beiwanglu
  • 发送
    #icon-fasong1
  • 帮助
    #icon-bangzhu
  • 授权设置
    #icon-shouquanshezhi1
  • 导入
    #icon-daoru
  • 时间
    #icon-shijian
  • 导入
    #icon-daoru1
  • 导出
    #icon-daochu1
  • 任务分解
    #icon-renwufenjie
  • 库存量
    #icon-kucunliang
  • 停止使用
    #icon-tingzhishiyong
  • 逾期
    #icon-yuqi
  • 完成
    #icon-wancheng
  • 任务反馈
    #icon-renwufankui
  • 申请中止
    #icon-shenqingzhongzhi
  • 申请办结
    #icon-shenqingbanjie
  • 申请延期
    #icon-shenqingyanqi
  • 我的申请
    #icon-wodeshenqing1
  • 没有结果
    #icon-meiyoujieguo
  • #icon-party
  • 正常推进
    #icon-zhengchangtuijin
  • 草稿
    #icon-caogao
  • 逾期
    #icon-yuqi1
  • 未签收
    #icon-weiqianshou
  • 已签收
    #icon-yiqianshou
  • 帮助
    #icon-bangzhu1
  • 播放
    #icon-bofang
  • HTML图标
    #icon-HTMLtubiao
  • html
    #icon-html
  • 暂停
    #icon-zanting
  • 实体分组
    #icon-shitifenzu
  • 隐藏
    #icon-yincang
  • 输入框
    #icon-shurukuang
  • 富文本框
    #icon-wenben
  • 单选框 选中
    #icon-danxuankuangxuanzhong
  • 多选框
    #icon-duoxuankuang
  • 主题词
    #icon-zhutici
  • 时间线
    #icon-shijianxian
  • 缩略图
    #icon-suolvetu
  • 按钮
    #icon-anniu
  • 下拉框
    #icon-xialakuang
  • 符号-数字输入框
    #icon-shuzishurukuang
  • 意见
    #icon-yijian
  • 查看
    #icon-chakan
  • 表单
    #icon-form
  • 复选框
    #icon-fuxuankuang
  • #icon-jia
  • #icon-zhen
  • new
    #icon-new
  • fsux_图表_饼图
    #icon-fsux_tubiao_bingtu
  • fsux_图表_指标卡
    #icon-fsux_tubiao_zhibiaoka
  • fsux_图表_气泡图
    #icon-SmartAnalysis-20
  • fsux_图表_桑基图
    #icon-sankey
  • fsux_图表_堆积柱状图
    #icon-fsux_tubiao_duijizhuzhuangtu
  • fsux_图表_环图
    #icon-fsux_tubiao_huantu
  • 确定
    #icon-ok2
  • fsux_图表_面积图
    #icon-ic_tubiao_mianji
  • 新建
    #icon-xinjian
  • fsux_图表_表格
    #icon-widget-table
  • 最近播放
    #icon-zuijinbofang
  • fsux_图表_散点图
    #icon-fsux_tubiao_sandiantu
  • 向右
    #icon-xiangyou
  • fsux_图表_折线图
    #icon-fsux_tubiao_zhexiantu
  • 向左
    #icon-xiangzuo
  • fsux_图表_仪表盘
    #icon-fsux_tubiao_yibiaopan
  • 向下
    #icon-xiangxia
  • fsux_图表_条形图
    #icon-fsux_tubiao_tiaoxingtu
  • 向右
    #icon-xiangshang
  • fsux_图表_对比图
    #icon-fsux_tubiao_duibitu
  • 另存为
    #icon-lingcun
  • fsux_图表_瀑布图
    #icon-fsux_tubiao_pubutu
  • 当前项
    #icon-iconNow
  • fsux_图表_柱状图
    #icon-fsux_tubiao_zhuzhuangtu
  • 圆圈
    #icon-rectangle
  • 10堆叠条形图
    #icon-ic_stacked_horizontal_bar
  • 定位
    #icon-dingwei
  • 切换
    #icon-qiehuan
  • 定位
    #icon-dingwei1
  • 图片加载失败
    #icon-bianzu
  • 通知
    #icon-cuiban
  • 文件
    #icon-21file
  • 关注
    #icon-guanzhu
  • 文件
    #icon-wenjian1
  • 服务
    #icon-extend-fuwu
  • 安全
    #icon-extend-anquan
  • 房屋
    #icon-extend-fangwu
  • 车辆
    #icon-extend-cheliang
  • 对账单
    #icon-extend-duizhangdan
  • 资产采购
    #icon-extend-caigou2
  • 财产
    #icon-extend-caichan
  • 标准
    #icon-extend-biaozhun
  • 预测
    #icon-extend-yuce
  • 刷新
    #icon-extend-shuaxing
  • 物品
    #icon-extend-wupin
  • 库存
    #icon-extend-kucun
  • 任务
    #icon-extend-renwu
  • 报表
    #icon-extend-tianbao
  • 设置
    #icon-extend-shezhi
  • 上报
    #icon-extend-shaobao
  • 搜索
    #icon-extend-sousuo
  • 归还
    #icon-extend-guihuan
  • 维修
    #icon-extend-weixiu
  • 评价
    #icon-extend-pingjia
  • 食物
    #icon-extend-shiwu
  • 申请
    #icon-extend-shenqing
  • 美食
    #icon-extend-meishi
  • 检查
    #icon-extend-jiancha
  • 借用
    #icon-extend-jieyong
  • 货车
    #icon-extend-huoche
  • 盘点
    #icon-extend-pandian
  • 会议
    #icon-extend-huiyi
  • 计划
    #icon-extend-jihua
  • 领用
    #icon-extend-lingyong
  • 购物车
    #icon-extend-gouwuche
  • 采购
    #icon-extend-caigou
  • 出库
    #icon-extend-chuku
  • 列表
    #icon-extend-liebiao
  • 装修
    #icon-extend-zhuangxiu

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>