• 权限
    
  • 错误
    
  • 插入链接-22
    
  • 删除
    
  • 查看详情
    
  • 学生异动
    
  • 报考
    
  • 成绩
    
  • 阅卷
    
  • 考核设置
    
  • 论文管理
    
  • 申报
    
  • 课程
    
  • 题库
    
  • 教务设置
    
  • 自定义设置
    
  • 超级统计
    
  • 招生统计
    
  • 推广统计
    
  • 学习统计
    
  • 地区数据统计
    
  • 数据导入
    
  • 成考管理
    
  • 远程管理
    
  • 书籍管理
    
  • 过程性考核
    
  • 学分认定
    
  • 课程订单
    
  • 问题反馈
    
  • 资产
    
  • KPI管理
    
  • 项目管理
    
  • 微信公众号
    
  • 安全设置
    
  • 服务中心
    
  • 企业服务
    
  • 网课服务
    
  • 收费管理
    
  • 权限设置
    
  • 教务统计
    
  • 教学统计
    
  • 收费统计
    
  • 服务统计
    
  • 通知统计
    
  • 考核统计
    
  • 用户活跃度
    
  • 学生报名
    
  • 学生录取
    
  • 学生注册
    
  • 在籍学生
    
  • 花名册
    
  • 服务分类管理
    
  • 学生服务列表
    
  • 通知分类管理
    
  • 通知列表
    
  • 教学计划
    
  • 教学安排
    
  • 成绩管理
    
  • 图片管理
    
  • 考试计划
    
  • 考试配置
    
  • 学习中心管理
    
  • 考核管理
    
  • 教师管理
    
  • 网课管理
    
  • 补录结算
    
  • 毕业管理
    
  • 考核指标
    
  • 企业管理
    
  • 初步管理
    
  • 呼叫报表
    
  • 扫描电镜
    
  • 结账
    
  • 销售报表
    
  • 凭证
    
  • 合同异动
    
  • 销售品
    
  • 学术管理
    
  • 易耗品
    
  • 任务管理
    
  • 电商
    
  • 固定资产
    
  • 动态管理
    
  • 基础配置
    
  • 大数据
    
  • 呼叫设置
    
  • 分销市场
    
  • 成绩统计
    
  • 推广设置
    
  • 课程中心
    
  • 合同设置
    
  • 课程包管理
    
  • 用户管理
    
  • 用户画像
    
  • 帐号管理
    
  • SEM管理
    
  • 预算
    
  • 名片报表
    
  • 订单管理
    
  • 推广管理
    
  • 专题管理
    
  • 信息流
    
  • 销售设置
    
  • 素材管理
    
  • 学生导入
    
  • 商品管理
    
  • 排课管理
    
  • 信息导入
    
  • 收费配置
    
  • 用户权限
    
  • 在籍学生管理
    
  • 学号管理
    
  • 课程资源管理
    
  • 面授教学安排
    
  • 账房
    
  • 开课管理
    
  • 毕业统计
    
  • 招生准备
    
  • 排课设置
    
  • 班级管理
    
  • 精品课堂
    
  • 员工提点
    
  • 考试安排
    
  • 网络教学安排
    
  • 入学成绩
    
  • 面授教学
    
  • 教师教室管理
    
  • 录取管理
    
  • 录取成绩
    
  • 资源
    
  • 课件
    
  • 外部课件
    
  • 日志管理
    
  • 模版管理
    
  • 学历认证
    
  • 异议处理
    
  • 论文申报
    
  • 论文设置
    
  • 教学点设置
    
  • 补录沉降
    
  • 模块设置
    
  • 资料管理
    
  • 集团管理
    
  • 应用管理
    
  • 官网试卷
    
  • 我的网课
    
  • 脚本管理
    
  • 专业管理员
    
  • 学生成绩
    
  • 服务管理
    
  • 代金券
    
  • 引进收费
    
  • 应缴清单
    
  • 对账单
    
  • 商机管理
    
  • 企微会话存档
    
  • 用户设置
    
  • 消息设置
    
  • 营销设置
    
  • 服务市场
    
  • 素材资源
    
  • 营销玩法
    
  • 推广
    
  • 用户列表
    
  • 资源管理
    
  • 课程管理
    
  • 课程包
    
  • 题库管理
    
  • 网课市场
    
  • 工单
    
  • 访客管理
    
  • 线索管理
    
  • 客户管理
    
  • 集团客户
    
  • 跟进记录
    
  • 呼叫管理
    
  • 工作台
    
  • 数据报表
    
  • 访客报表
    
  • 账簿管理
    
  • 账簿管理_子系统
    
  • 账簿管理_子系统
    
  • 合同管理
    
  • 运营者管理
    
  • 招聘管理
    
  • 工资管理
    
  • 我的审批
    
  • 标准模版设置
    
  • 基础设置
    
  • 财务设置
    
  • 产品设置
    
  • 审批设置
    
  • 目标管理
    
  • 站点设置
    
  • 人事设置
    
  • CRM设置
    
  • 名片设置
    
  • 网校设置
    
  • 我的点评
    
  • 我的学生
    
  • 联系记录
    
  • 投诉提问
    
  • 培训计划
    
  • 费用查询
    
  • 学生缴费
    
  • 记账
    
  • 查账
    
  • 查账
    
  • 报表
    
  • 设置
    
  • 招生报表
    
  • 打卡记录
    
  • 网络班级
    
  • 小程序
    
  • 后台设置
    
  • 招生设置
    
  • 消息中心
    
  • 菜单管理
    
  • 创建系统
    
  • 工单管理
    
  • 短信
    
  • 帮助中心
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • 权限
    .icon-quanxian
  • 错误
    .icon-cuowu
  • 插入链接-22
    .icon-charulianjie-
  • 删除
    .icon-shanchu
  • 查看详情
    .icon-chakanxiangqing
  • 学生异动
    .icon-xueshengyidong
  • 报考
    .icon-baokao
  • 成绩
    .icon-chengji
  • 阅卷
    .icon-yuejuan
  • 考核设置
    .icon-kaoheshezhi
  • 论文管理
    .icon-lunwenguanli
  • 申报
    .icon-shenbao
  • 课程
    .icon-kecheng
  • 题库
    .icon-tiku
  • 教务设置
    .icon-jiaowushezhi
  • 自定义设置
    .icon-zidingyishezhi
  • 超级统计
    .icon-chaojitongji
  • 招生统计
    .icon-zhaoshengtongji
  • 推广统计
    .icon-tuiguangtongji
  • 学习统计
    .icon-xuexitongji
  • 地区数据统计
    .icon-diqushujutongji
  • 数据导入
    .icon-shujudaoru
  • 成考管理
    .icon-chengkaoguanli
  • 远程管理
    .icon-yuanchengguanli
  • 书籍管理
    .icon-shujiguanli
  • 过程性考核
    .icon-guochengxingkaohe
  • 学分认定
    .icon-xuefenrending
  • 课程订单
    .icon-kechengdingdan
  • 问题反馈
    .icon-wentifankui
  • 资产
    .icon-zichan
  • KPI管理
    .icon-KPIguanli
  • 项目管理
    .icon-xiangmuguanli
  • 微信公众号
    .icon-weixingongzhonghao
  • 安全设置
    .icon-anquanshezhi
  • 服务中心
    .icon-fuwuzhongxin
  • 企业服务
    .icon-qiyefuwu
  • 网课服务
    .icon-wangkefuwu
  • 收费管理
    .icon-shoufeiguanli
  • 权限设置
    .icon-quanxianshezhi
  • 教务统计
    .icon-jiaowutongji
  • 教学统计
    .icon-jiaoxuetongji
  • 收费统计
    .icon-shoufeitongji
  • 服务统计
    .icon-fuwutongji
  • 通知统计
    .icon-tongzhitongji
  • 考核统计
    .icon-kaohetongji
  • 用户活跃度
    .icon-yonghuhuoyuedu
  • 学生报名
    .icon-xueshengbaoming
  • 学生录取
    .icon-xueshengluqu
  • 学生注册
    .icon-xueshengzhuce
  • 在籍学生
    .icon-zaijixuesheng
  • 花名册
    .icon-huamingce
  • 服务分类管理
    .icon-fenleiguanli
  • 学生服务列表
    .icon-fuwuliebiao
  • 通知分类管理
    .icon-fenleiliebiao
  • 通知列表
    .icon-tongzhiliebiao
  • 教学计划
    .icon-jiaoxuejihua
  • 教学安排
    .icon-jiaoxueanpai
  • 成绩管理
    .icon-chengjiguanli
  • 图片管理
    .icon-tupianguanli
  • 考试计划
    .icon-kaoshijihua
  • 考试配置
    .icon-kaoshipeizhi
  • 学习中心管理
    .icon-xuexizhongxinguanli
  • 考核管理
    .icon-kaoheguanli
  • 教师管理
    .icon-jiaoshiguanli
  • 网课管理
    .icon-wangkeguanli
  • 补录结算
    .icon-bulujiesuan
  • 毕业管理
    .icon-biyeguanli
  • 考核指标
    .icon-kaohezhibiao
  • 企业管理
    .icon-qiyeguanli
  • 初步管理
    .icon-chubuguanli
  • 呼叫报表
    .icon-hujiaobaobiao
  • 扫描电镜
    .icon-saomiaodianjing
  • 结账
    .icon-jiezhang
  • 销售报表
    .icon-xiaoshoubaobiao
  • 凭证
    .icon-pingzheng
  • 合同异动
    .icon-hetongyidong
  • 销售品
    .icon-xiaoshoupin
  • 学术管理
    .icon-xueshuguanli
  • 易耗品
    .icon-yihaopin
  • 任务管理
    .icon-renwuguanli
  • 电商
    .icon-dianshang
  • 固定资产
    .icon-gudingzichan
  • 动态管理
    .icon-dongtaiguanli
  • 基础配置
    .icon-jichupeizhi
  • 大数据
    .icon-dashuju
  • 呼叫设置
    .icon-hujiaoshezhi
  • 分销市场
    .icon-fenxiaoshichang
  • 成绩统计
    .icon-chengjitongji
  • 推广设置
    .icon-tuiguangshezhi
  • 课程中心
    .icon-kechengzhongxin
  • 合同设置
    .icon-hetongshezhi
  • 课程包管理
    .icon-kechengbaoguanli
  • 用户管理
    .icon-yonghuguanli
  • 用户画像
    .icon-yonghuhuaxiang
  • 帐号管理
    .icon-zhanghaoguanli
  • SEM管理
    .icon-SEMguanli
  • 预算
    .icon-yusuan
  • 名片报表
    .icon-mingpianbaobiao
  • 订单管理
    .icon-dingdanguanli
  • 推广管理
    .icon-tuiguangguanli
  • 专题管理
    .icon-zhuantiguanli
  • 信息流
    .icon-xinxiliu
  • 销售设置
    .icon-xiaoshoushezhi
  • 素材管理
    .icon-sucaiguanli
  • 学生导入
    .icon-xueshengdaoru
  • 商品管理
    .icon-shangpinguanli
  • 排课管理
    .icon-paikeguanli
  • 信息导入
    .icon-xinxidaoru
  • 收费配置
    .icon-shoufeipeizhi
  • 用户权限
    .icon-yonghuquanxian
  • 在籍学生管理
    .icon-zaijixueshengguanli
  • 学号管理
    .icon-xuehaoguanli
  • 课程资源管理
    .icon-kechengziyuanguanli
  • 面授教学安排
    .icon-mianshoujiaoxueanpai
  • 账房
    .icon-zhangfang
  • 开课管理
    .icon-kaikeguanli
  • 毕业统计
    .icon-biyetongji
  • 招生准备
    .icon-zhaoshengzhunbei
  • 排课设置
    .icon-paikeshezhi
  • 班级管理
    .icon-banjiguanli
  • 精品课堂
    .icon-jingpinketang
  • 员工提点
    .icon-yuangongtidian
  • 考试安排
    .icon-kaoshianpai
  • 网络教学安排
    .icon-wangluojiaoxueanpai
  • 入学成绩
    .icon-ruxuechengji
  • 面授教学
    .icon-mianshoujiaoxue
  • 教师教室管理
    .icon-jiaoshijiaoshiguanli
  • 录取管理
    .icon-luquguanli
  • 录取成绩
    .icon-luquchengji
  • 资源
    .icon-ziyuan
  • 课件
    .icon-kejian
  • 外部课件
    .icon-waibukejian
  • 日志管理
    .icon-rizhiguanli
  • 模版管理
    .icon-mobanguanli
  • 学历认证
    .icon-xuelirenzheng
  • 异议处理
    .icon-yiyichuli
  • 论文申报
    .icon-lunwenshenbao
  • 论文设置
    .icon-lunwenshezhi
  • 教学点设置
    .icon-jiaoxuedianshezhi
  • 补录沉降
    .icon-buluchenjiang
  • 模块设置
    .icon-mokuaishezhi
  • 资料管理
    .icon-ziliaoguanli
  • 集团管理
    .icon-jituanguanli
  • 应用管理
    .icon-yingyongguanli
  • 官网试卷
    .icon-guanwangshijuan
  • 我的网课
    .icon-wodewangke
  • 脚本管理
    .icon-jiaobenguanli
  • 专业管理员
    .icon-zhuanyeguanliyuan
  • 学生成绩
    .icon-xueshengchengji
  • 服务管理
    .icon-fuwuguanli
  • 代金券
    .icon-daijinquan
  • 引进收费
    .icon-yinjinshoufei
  • 应缴清单
    .icon-yingjiaoqingdan
  • 对账单
    .icon-duizhangdan
  • 商机管理
    .icon-shangjiguanli
  • 企微会话存档
    .icon-qiyehuihuacundang
  • 用户设置
    .icon-yonghushezhi
  • 消息设置
    .icon-xiaoxishezhi
  • 营销设置
    .icon-yingxiaoshezhi
  • 服务市场
    .icon-fuwushichang
  • 素材资源
    .icon-sucaiziyuan
  • 营销玩法
    .icon-yingxiaowanfa
  • 推广
    .icon-tuiguang
  • 用户列表
    .icon-yonghuliebiao
  • 资源管理
    .icon-ziyuanguanli
  • 课程管理
    .icon-kechengguanli
  • 课程包
    .icon-kechengbao
  • 题库管理
    .icon-tikuguanli
  • 网课市场
    .icon-wangkeshichang
  • 工单
    .icon-gongdan
  • 访客管理
    .icon-fangkeguanli
  • 线索管理
    .icon-xiansuoguanli
  • 客户管理
    .icon-kehuguanli
  • 集团客户
    .icon-jituankehu
  • 跟进记录
    .icon-genjinjilu
  • 呼叫管理
    .icon-hujiaoguanli
  • 工作台
    .icon-gongzuotai
  • 数据报表
    .icon-shujubaobiao
  • 访客报表
    .icon-fangkebaobiao
  • 账簿管理
    .icon-zhangbuguanli
  • 账簿管理_子系统
    .icon-zhangbuguanli_zi
  • 账簿管理_子系统
    .icon-zhangbuguanli_zixitong_A
  • 合同管理
    .icon-hetongguanli
  • 运营者管理
    .icon-yunyingzheguanli
  • 招聘管理
    .icon-zhaopinguanli
  • 工资管理
    .icon-gongziguanli
  • 我的审批
    .icon-wodeshenpi
  • 标准模版设置
    .icon-biaozhunmobanshezhi
  • 基础设置
    .icon-jichushezhi
  • 财务设置
    .icon-caiwushezhi
  • 产品设置
    .icon-chanpinshezhi
  • 审批设置
    .icon-shenpishezhi
  • 目标管理
    .icon-mubiaoguanli
  • 站点设置
    .icon-zhandianshezhi
  • 人事设置
    .icon-renshishezhi
  • CRM设置
    .icon-CRMshezhi
  • 名片设置
    .icon-mingpianshezhi
  • 网校设置
    .icon-wangxiaoshezhi
  • 我的点评
    .icon-wodedianping
  • 我的学生
    .icon-wodexuesheng
  • 联系记录
    .icon-lianxijilu
  • 投诉提问
    .icon-tousutiwen
  • 培训计划
    .icon-peixunjihua
  • 费用查询
    .icon-feiyongchaxun
  • 学生缴费
    .icon-xueshengjiaofei
  • 记账
    .icon-jizhang
  • 查账
    .icon-chaxun
  • 查账
    .icon-chazhang
  • 报表
    .icon-baobiao
  • 设置
    .icon-shezhi
  • 招生报表
    .icon-daqiajilu
  • 打卡记录
    .icon-wangluobanji
  • 网络班级
    .icon-wangxiaoshezhi1
  • 小程序
    .icon-houtaishezhi
  • 后台设置
    .icon-zhaoshengshezhi
  • 招生设置
    .icon-xiaoxizhongxin
  • 消息中心
    .icon-zhaoshengbaobiao
  • 菜单管理
    .icon-caidanguanli
  • 创建系统
    .icon-chuangjianxitong
  • 工单管理
    .icon-gongdanguanli
  • 短信
    .icon-duanxin
  • 帮助中心
    .icon-bangzhuzhongxin

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-quanxian
  • 错误
    #icon-cuowu
  • 插入链接-22
    #icon-charulianjie-
  • 删除
    #icon-shanchu
  • 查看详情
    #icon-chakanxiangqing
  • 学生异动
    #icon-xueshengyidong
  • 报考
    #icon-baokao
  • 成绩
    #icon-chengji
  • 阅卷
    #icon-yuejuan
  • 考核设置
    #icon-kaoheshezhi
  • 论文管理
    #icon-lunwenguanli
  • 申报
    #icon-shenbao
  • 课程
    #icon-kecheng
  • 题库
    #icon-tiku
  • 教务设置
    #icon-jiaowushezhi
  • 自定义设置
    #icon-zidingyishezhi
  • 超级统计
    #icon-chaojitongji
  • 招生统计
    #icon-zhaoshengtongji
  • 推广统计
    #icon-tuiguangtongji
  • 学习统计
    #icon-xuexitongji
  • 地区数据统计
    #icon-diqushujutongji
  • 数据导入
    #icon-shujudaoru
  • 成考管理
    #icon-chengkaoguanli
  • 远程管理
    #icon-yuanchengguanli
  • 书籍管理
    #icon-shujiguanli
  • 过程性考核
    #icon-guochengxingkaohe
  • 学分认定
    #icon-xuefenrending
  • 课程订单
    #icon-kechengdingdan
  • 问题反馈
    #icon-wentifankui
  • 资产
    #icon-zichan
  • KPI管理
    #icon-KPIguanli
  • 项目管理
    #icon-xiangmuguanli
  • 微信公众号
    #icon-weixingongzhonghao
  • 安全设置
    #icon-anquanshezhi
  • 服务中心
    #icon-fuwuzhongxin
  • 企业服务
    #icon-qiyefuwu
  • 网课服务
    #icon-wangkefuwu
  • 收费管理
    #icon-shoufeiguanli
  • 权限设置
    #icon-quanxianshezhi
  • 教务统计
    #icon-jiaowutongji
  • 教学统计
    #icon-jiaoxuetongji
  • 收费统计
    #icon-shoufeitongji
  • 服务统计
    #icon-fuwutongji
  • 通知统计
    #icon-tongzhitongji
  • 考核统计
    #icon-kaohetongji
  • 用户活跃度
    #icon-yonghuhuoyuedu
  • 学生报名
    #icon-xueshengbaoming
  • 学生录取
    #icon-xueshengluqu
  • 学生注册
    #icon-xueshengzhuce
  • 在籍学生
    #icon-zaijixuesheng
  • 花名册
    #icon-huamingce
  • 服务分类管理
    #icon-fenleiguanli
  • 学生服务列表
    #icon-fuwuliebiao
  • 通知分类管理
    #icon-fenleiliebiao
  • 通知列表
    #icon-tongzhiliebiao
  • 教学计划
    #icon-jiaoxuejihua
  • 教学安排
    #icon-jiaoxueanpai
  • 成绩管理
    #icon-chengjiguanli
  • 图片管理
    #icon-tupianguanli
  • 考试计划
    #icon-kaoshijihua
  • 考试配置
    #icon-kaoshipeizhi
  • 学习中心管理
    #icon-xuexizhongxinguanli
  • 考核管理
    #icon-kaoheguanli
  • 教师管理
    #icon-jiaoshiguanli
  • 网课管理
    #icon-wangkeguanli
  • 补录结算
    #icon-bulujiesuan
  • 毕业管理
    #icon-biyeguanli
  • 考核指标
    #icon-kaohezhibiao
  • 企业管理
    #icon-qiyeguanli
  • 初步管理
    #icon-chubuguanli
  • 呼叫报表
    #icon-hujiaobaobiao
  • 扫描电镜
    #icon-saomiaodianjing
  • 结账
    #icon-jiezhang
  • 销售报表
    #icon-xiaoshoubaobiao
  • 凭证
    #icon-pingzheng
  • 合同异动
    #icon-hetongyidong
  • 销售品
    #icon-xiaoshoupin
  • 学术管理
    #icon-xueshuguanli
  • 易耗品
    #icon-yihaopin
  • 任务管理
    #icon-renwuguanli
  • 电商
    #icon-dianshang
  • 固定资产
    #icon-gudingzichan
  • 动态管理
    #icon-dongtaiguanli
  • 基础配置
    #icon-jichupeizhi
  • 大数据
    #icon-dashuju
  • 呼叫设置
    #icon-hujiaoshezhi
  • 分销市场
    #icon-fenxiaoshichang
  • 成绩统计
    #icon-chengjitongji
  • 推广设置
    #icon-tuiguangshezhi
  • 课程中心
    #icon-kechengzhongxin
  • 合同设置
    #icon-hetongshezhi
  • 课程包管理
    #icon-kechengbaoguanli
  • 用户管理
    #icon-yonghuguanli
  • 用户画像
    #icon-yonghuhuaxiang
  • 帐号管理
    #icon-zhanghaoguanli
  • SEM管理
    #icon-SEMguanli
  • 预算
    #icon-yusuan
  • 名片报表
    #icon-mingpianbaobiao
  • 订单管理
    #icon-dingdanguanli
  • 推广管理
    #icon-tuiguangguanli
  • 专题管理
    #icon-zhuantiguanli
  • 信息流
    #icon-xinxiliu
  • 销售设置
    #icon-xiaoshoushezhi
  • 素材管理
    #icon-sucaiguanli
  • 学生导入
    #icon-xueshengdaoru
  • 商品管理
    #icon-shangpinguanli
  • 排课管理
    #icon-paikeguanli
  • 信息导入
    #icon-xinxidaoru
  • 收费配置
    #icon-shoufeipeizhi
  • 用户权限
    #icon-yonghuquanxian
  • 在籍学生管理
    #icon-zaijixueshengguanli
  • 学号管理
    #icon-xuehaoguanli
  • 课程资源管理
    #icon-kechengziyuanguanli
  • 面授教学安排
    #icon-mianshoujiaoxueanpai
  • 账房
    #icon-zhangfang
  • 开课管理
    #icon-kaikeguanli
  • 毕业统计
    #icon-biyetongji
  • 招生准备
    #icon-zhaoshengzhunbei
  • 排课设置
    #icon-paikeshezhi
  • 班级管理
    #icon-banjiguanli
  • 精品课堂
    #icon-jingpinketang
  • 员工提点
    #icon-yuangongtidian
  • 考试安排
    #icon-kaoshianpai
  • 网络教学安排
    #icon-wangluojiaoxueanpai
  • 入学成绩
    #icon-ruxuechengji
  • 面授教学
    #icon-mianshoujiaoxue
  • 教师教室管理
    #icon-jiaoshijiaoshiguanli
  • 录取管理
    #icon-luquguanli
  • 录取成绩
    #icon-luquchengji
  • 资源
    #icon-ziyuan
  • 课件
    #icon-kejian
  • 外部课件
    #icon-waibukejian
  • 日志管理
    #icon-rizhiguanli
  • 模版管理
    #icon-mobanguanli
  • 学历认证
    #icon-xuelirenzheng
  • 异议处理
    #icon-yiyichuli
  • 论文申报
    #icon-lunwenshenbao
  • 论文设置
    #icon-lunwenshezhi
  • 教学点设置
    #icon-jiaoxuedianshezhi
  • 补录沉降
    #icon-buluchenjiang
  • 模块设置
    #icon-mokuaishezhi
  • 资料管理
    #icon-ziliaoguanli
  • 集团管理
    #icon-jituanguanli
  • 应用管理
    #icon-yingyongguanli
  • 官网试卷
    #icon-guanwangshijuan
  • 我的网课
    #icon-wodewangke
  • 脚本管理
    #icon-jiaobenguanli
  • 专业管理员
    #icon-zhuanyeguanliyuan
  • 学生成绩
    #icon-xueshengchengji
  • 服务管理
    #icon-fuwuguanli
  • 代金券
    #icon-daijinquan
  • 引进收费
    #icon-yinjinshoufei
  • 应缴清单
    #icon-yingjiaoqingdan
  • 对账单
    #icon-duizhangdan
  • 商机管理
    #icon-shangjiguanli
  • 企微会话存档
    #icon-qiyehuihuacundang
  • 用户设置
    #icon-yonghushezhi
  • 消息设置
    #icon-xiaoxishezhi
  • 营销设置
    #icon-yingxiaoshezhi
  • 服务市场
    #icon-fuwushichang
  • 素材资源
    #icon-sucaiziyuan
  • 营销玩法
    #icon-yingxiaowanfa
  • 推广
    #icon-tuiguang
  • 用户列表
    #icon-yonghuliebiao
  • 资源管理
    #icon-ziyuanguanli
  • 课程管理
    #icon-kechengguanli
  • 课程包
    #icon-kechengbao
  • 题库管理
    #icon-tikuguanli
  • 网课市场
    #icon-wangkeshichang
  • 工单
    #icon-gongdan
  • 访客管理
    #icon-fangkeguanli
  • 线索管理
    #icon-xiansuoguanli
  • 客户管理
    #icon-kehuguanli
  • 集团客户
    #icon-jituankehu
  • 跟进记录
    #icon-genjinjilu
  • 呼叫管理
    #icon-hujiaoguanli
  • 工作台
    #icon-gongzuotai
  • 数据报表
    #icon-shujubaobiao
  • 访客报表
    #icon-fangkebaobiao
  • 账簿管理
    #icon-zhangbuguanli
  • 账簿管理_子系统
    #icon-zhangbuguanli_zi
  • 账簿管理_子系统
    #icon-zhangbuguanli_zixitong_A
  • 合同管理
    #icon-hetongguanli
  • 运营者管理
    #icon-yunyingzheguanli
  • 招聘管理
    #icon-zhaopinguanli
  • 工资管理
    #icon-gongziguanli
  • 我的审批
    #icon-wodeshenpi
  • 标准模版设置
    #icon-biaozhunmobanshezhi
  • 基础设置
    #icon-jichushezhi
  • 财务设置
    #icon-caiwushezhi
  • 产品设置
    #icon-chanpinshezhi
  • 审批设置
    #icon-shenpishezhi
  • 目标管理
    #icon-mubiaoguanli
  • 站点设置
    #icon-zhandianshezhi
  • 人事设置
    #icon-renshishezhi
  • CRM设置
    #icon-CRMshezhi
  • 名片设置
    #icon-mingpianshezhi
  • 网校设置
    #icon-wangxiaoshezhi
  • 我的点评
    #icon-wodedianping
  • 我的学生
    #icon-wodexuesheng
  • 联系记录
    #icon-lianxijilu
  • 投诉提问
    #icon-tousutiwen
  • 培训计划
    #icon-peixunjihua
  • 费用查询
    #icon-feiyongchaxun
  • 学生缴费
    #icon-xueshengjiaofei
  • 记账
    #icon-jizhang
  • 查账
    #icon-chaxun
  • 查账
    #icon-chazhang
  • 报表
    #icon-baobiao
  • 设置
    #icon-shezhi
  • 招生报表
    #icon-daqiajilu
  • 打卡记录
    #icon-wangluobanji
  • 网络班级
    #icon-wangxiaoshezhi1
  • 小程序
    #icon-houtaishezhi
  • 后台设置
    #icon-zhaoshengshezhi
  • 招生设置
    #icon-xiaoxizhongxin
  • 消息中心
    #icon-zhaoshengbaobiao
  • 菜单管理
    #icon-caidanguanli
  • 创建系统
    #icon-chuangjianxitong
  • 工单管理
    #icon-gongdanguanli
  • 短信
    #icon-duanxin
  • 帮助中心
    #icon-bangzhuzhongxin

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>