• 开放
    
  • 在籍学生
    
  • icon_icon_ 学生管理
    
  • 教师
    
  • 学生
    
  • 微信 (1)
    
  • 地球
    
  • 手机未认证
    
  • 手机认证
    
  • 未认证
    
  • 已认证
    
  • 公式
    
  • 最低投标
    
  • 最高投标
    
  • 平均不平衡
    
  • 做任务
    
  • 专业课程
    
  • 通用
    
  • 退出
    
  • 左退出
    
  • 重阅客观题
    
  • 刷新
    
  • 放大镜
    
  • 开始批注
    
  • 取消全屏
    
  • 箭头
    
  • 笑脸
    
  • 矩形
    
  • 椭圆
    
  • 定位
    
  • 移动
    
  • 异常流程
    
  • 043操作_缩小
    
  • 全屏
    
  • 取消全屏_o
    
  • 多评仲裁
    
  • 扫描有误拷贝
    
  • 扫描
    
  • 箭头
    
  • 清屏
    
  • 文本
    
  • 撤销
    
  • 保存
    
  • 画笔
    
  • 函数模板
    
  • 移动
    
  • 保存
    
  • 函数
    
  • 链接
    
  • 链接
    
  • jpg
    
  • zip
    
  • PDF
    
  • ppt
    
  • mp3
    
  • video
    
  • 文件
    
  • word
    
  • xlsx
    
  • 转换
    
  • 半对
    
  • 完成
    
  • 表格
    
  • 试卷管理@3x
    
  • 选择
    
  • 二维码
    
  • 数据分析
    
  • 库存分析
    
  • 学校
    
  • 音频
    
  • 音频
    
  • 音频
    
  • 分享
    
  • 分享
    
  • 购物车
    
  • H
    
  • 云信补充资料-01
    
  • 翻牌
    
  • 饼图
    
  • 教师中心
    
  • 学生
    
  • 会议白板
    
  • 上传
    
  • 客服
    
  • 钥匙
    
  • 重置
    
  • 钥匙
    
  • 视频
    
  • 课前预习
    
  • hi
    
  • 双箭头 右
    
  • 留言
    
  • 班级&课堂
    
  • 公告
    
  • 主页
    
  • 问题
    
  • 双箭头
    
  • 周期服务时段
    
  • 投票
    
  • 活动
    
  • 作业
    
  • 学习活动-01
    
  • 老师管理
    
  • 学情
    
  • 文件
    
  • 班级管理
    
  • 学习园地
    
  • 学生管理
    
  • 我的班级
    
  • 题库
    
  • 知识点标定
    
  • 教师_教参教材
    
  • 课程管理-未点击
    
  • 统计分析
    
  • 排课
    
  • 星途学堂-逐题考试/测验
    
  • 基础设置
    
  • -_授权管理
    
  • 课程
    
  • 教材
    
  • 问卷调查
    
  • 我的课程
    
  • 智慧校园
    
  • 课程
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1624327216353') format('woff2'),
       url('iconfont.woff?t=1624327216353') format('woff'),
       url('iconfont.ttf?t=1624327216353') 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-open
  • 在籍学生
    .icon-student1
  • icon_icon_ 学生管理
    .icon-student2
  • 教师
    .icon-teacher
  • 学生
    .icon-student
  • 微信 (1)
    .icon-wechat
  • 地球
    .icon-earth
  • 手机未认证
    .icon-phone-unverify
  • 手机认证
    .icon-phone-verify
  • 未认证
    .icon-unverify
  • 已认证
    .icon-verify
  • 公式
    .icon-formula
  • 最低投标
    .icon-lowest
  • 最高投标
    .icon-highest
  • 平均不平衡
    .icon-avg
  • 做任务
    .icon-task
  • 专业课程
    .icon-profession
  • 通用
    .icon-general
  • 退出
    .icon-quit1
  • 左退出
    .icon-quit2
  • 重阅客观题
    .icon-review
  • 刷新
    .icon-fresh
  • 放大镜
    .icon-larger
  • 开始批注
    .icon-mark
  • 取消全屏
    .icon-cancel-full-screen
  • 箭头
    .icon-arrow-mark
  • 笑脸
    .icon-smile
  • 矩形
    .icon-rect
  • 椭圆
    .icon-oval
  • 定位
    .icon-position
  • 移动
    .icon-move1
  • 异常流程
    .icon-exception
  • 043操作_缩小
    .icon-smaller
  • 全屏
    .icon-full-screen
  • 取消全屏_o
    .icon-cancel-full
  • 多评仲裁
    .icon-arb
  • 扫描有误拷贝
    .icon-scanning-err
  • 扫描
    .icon-scanning
  • 箭头
    .icon-left-arrow
  • 清屏
    .icon-clear
  • 文本
    .icon-text
  • 撤销
    .icon-undo
  • 保存
    .icon-save
  • 画笔
    .icon-brush
  • 函数模板
    .icon-fn
  • 移动
    .icon-move
  • 保存
    .icon-baocun1
  • 函数
    .icon-function
  • 链接
    .icon-share_link
  • 链接
    .icon-link2
  • jpg
    .icon-jpg
  • zip
    .icon-zip
  • PDF
    .icon-pdf
  • ppt
    .icon-ppt
  • mp3
    .icon-mp3
  • video
    .icon-video1
  • 文件
    .icon-V
  • word
    .icon-word
  • xlsx
    .icon-xlsx
  • 转换
    .icon-convert
  • 半对
    .icon-half-right
  • 完成
    .icon-complete
  • 表格
    .icon-table
  • 试卷管理@3x
    .icon-scoring
  • 选择
    .icon-choose
  • 二维码
    .icon-qr-code
  • 数据分析
    .icon-shujufenxi
  • 库存分析
    .icon-school-analysis
  • 学校
    .icon-school
  • 音频
    .icon-audio3
  • 音频
    .icon-audio2
  • 音频
    .icon-audio1
  • 分享
    .icon-share1
  • 分享
    .icon-share
  • 购物车
    .icon-sp-car
  • H
    .icon-htex
  • 云信补充资料-01
    .icon-mini-note
  • 翻牌
    .icon-flop
  • 饼图
    .icon-pie
  • 教师中心
    .icon-in-class
  • 学生
    .icon-study
  • 会议白板
    .icon-whiteboard
  • 上传
    .icon-upload
  • 客服
    .icon-customer
  • 钥匙
    .icon-yuechi
  • 重置
    .icon-reset
  • 钥匙
    .icon-auth-key
  • 视频
    .icon-video
  • 课前预习
    .icon-prepare-study
  • hi
    .icon-hi
  • 双箭头 右
    .icon-arrow-right
  • 留言
    .icon-message
  • 班级&课堂
    .icon-class
  • 公告
    .icon-notice
  • 主页
    .icon-home
  • 问题
    .icon-feedback
  • 双箭头
    .icon-arrow
  • 周期服务时段
    .icon-time
  • 投票
    .icon-vote
  • 活动
    .icon-activityS
  • 作业
    .icon-hw
  • 学习活动-01
    .icon-activityT
  • 老师管理
    .icon-teacher-mgt
  • 学情
    .icon-xueqing
  • 文件
    .icon-file
  • 班级管理
    .icon-class-mgt
  • 学习园地
    .icon-learning-self
  • 学生管理
    .icon-student-mgt
  • 我的班级
    .icon-class-self
  • 题库
    .icon-question-bank
  • 知识点标定
    .icon-k-point
  • 教师_教参教材
    .icon-syllabus
  • 课程管理-未点击
    .icon-course-mgt
  • 统计分析
    .icon-analysis
  • 排课
    .icon-schedule
  • 星途学堂-逐题考试/测验
    .icon-test
  • 基础设置
    .icon-basic-setting
  • -_授权管理
    .icon-auth
  • 课程
    .icon-kecheng
  • 教材
    .icon-textbook
  • 问卷调查
    .icon-questionnaire
  • 我的课程
    .icon-course-self
  • 智慧校园
    .icon-smart-campus
  • 课程
    .icon-course

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-open
  • 在籍学生
    #icon-student1
  • icon_icon_ 学生管理
    #icon-student2
  • 教师
    #icon-teacher
  • 学生
    #icon-student
  • 微信 (1)
    #icon-wechat
  • 地球
    #icon-earth
  • 手机未认证
    #icon-phone-unverify
  • 手机认证
    #icon-phone-verify
  • 未认证
    #icon-unverify
  • 已认证
    #icon-verify
  • 公式
    #icon-formula
  • 最低投标
    #icon-lowest
  • 最高投标
    #icon-highest
  • 平均不平衡
    #icon-avg
  • 做任务
    #icon-task
  • 专业课程
    #icon-profession
  • 通用
    #icon-general
  • 退出
    #icon-quit1
  • 左退出
    #icon-quit2
  • 重阅客观题
    #icon-review
  • 刷新
    #icon-fresh
  • 放大镜
    #icon-larger
  • 开始批注
    #icon-mark
  • 取消全屏
    #icon-cancel-full-screen
  • 箭头
    #icon-arrow-mark
  • 笑脸
    #icon-smile
  • 矩形
    #icon-rect
  • 椭圆
    #icon-oval
  • 定位
    #icon-position
  • 移动
    #icon-move1
  • 异常流程
    #icon-exception
  • 043操作_缩小
    #icon-smaller
  • 全屏
    #icon-full-screen
  • 取消全屏_o
    #icon-cancel-full
  • 多评仲裁
    #icon-arb
  • 扫描有误拷贝
    #icon-scanning-err
  • 扫描
    #icon-scanning
  • 箭头
    #icon-left-arrow
  • 清屏
    #icon-clear
  • 文本
    #icon-text
  • 撤销
    #icon-undo
  • 保存
    #icon-save
  • 画笔
    #icon-brush
  • 函数模板
    #icon-fn
  • 移动
    #icon-move
  • 保存
    #icon-baocun1
  • 函数
    #icon-function
  • 链接
    #icon-share_link
  • 链接
    #icon-link2
  • jpg
    #icon-jpg
  • zip
    #icon-zip
  • PDF
    #icon-pdf
  • ppt
    #icon-ppt
  • mp3
    #icon-mp3
  • video
    #icon-video1
  • 文件
    #icon-V
  • word
    #icon-word
  • xlsx
    #icon-xlsx
  • 转换
    #icon-convert
  • 半对
    #icon-half-right
  • 完成
    #icon-complete
  • 表格
    #icon-table
  • 试卷管理@3x
    #icon-scoring
  • 选择
    #icon-choose
  • 二维码
    #icon-qr-code
  • 数据分析
    #icon-shujufenxi
  • 库存分析
    #icon-school-analysis
  • 学校
    #icon-school
  • 音频
    #icon-audio3
  • 音频
    #icon-audio2
  • 音频
    #icon-audio1
  • 分享
    #icon-share1
  • 分享
    #icon-share
  • 购物车
    #icon-sp-car
  • H
    #icon-htex
  • 云信补充资料-01
    #icon-mini-note
  • 翻牌
    #icon-flop
  • 饼图
    #icon-pie
  • 教师中心
    #icon-in-class
  • 学生
    #icon-study
  • 会议白板
    #icon-whiteboard
  • 上传
    #icon-upload
  • 客服
    #icon-customer
  • 钥匙
    #icon-yuechi
  • 重置
    #icon-reset
  • 钥匙
    #icon-auth-key
  • 视频
    #icon-video
  • 课前预习
    #icon-prepare-study
  • hi
    #icon-hi
  • 双箭头 右
    #icon-arrow-right
  • 留言
    #icon-message
  • 班级&课堂
    #icon-class
  • 公告
    #icon-notice
  • 主页
    #icon-home
  • 问题
    #icon-feedback
  • 双箭头
    #icon-arrow
  • 周期服务时段
    #icon-time
  • 投票
    #icon-vote
  • 活动
    #icon-activityS
  • 作业
    #icon-hw
  • 学习活动-01
    #icon-activityT
  • 老师管理
    #icon-teacher-mgt
  • 学情
    #icon-xueqing
  • 文件
    #icon-file
  • 班级管理
    #icon-class-mgt
  • 学习园地
    #icon-learning-self
  • 学生管理
    #icon-student-mgt
  • 我的班级
    #icon-class-self
  • 题库
    #icon-question-bank
  • 知识点标定
    #icon-k-point
  • 教师_教参教材
    #icon-syllabus
  • 课程管理-未点击
    #icon-course-mgt
  • 统计分析
    #icon-analysis
  • 排课
    #icon-schedule
  • 星途学堂-逐题考试/测验
    #icon-test
  • 基础设置
    #icon-basic-setting
  • -_授权管理
    #icon-auth
  • 课程
    #icon-kecheng
  • 教材
    #icon-textbook
  • 问卷调查
    #icon-questionnaire
  • 我的课程
    #icon-course-self
  • 智慧校园
    #icon-smart-campus
  • 课程
    #icon-course

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>