• 
  • 
  • XLS
    
  • shipin
    
  • yinyue
    
  • PPT
    
  • pptx
    
  • XLSX
    
  • tupiao
    
  • DOC
    
  • DOCX
    
  • PDF
    
  • 文件夹
    
  • 评价
    
  • 学生考核
    
  • 暂停
    
  • play3
    
  • 系统管理
    
  • 行政班课程
    
  • w_教学
    
  • 考试-选中
    
  • 导航
    
  • icon_专家答疑
    
  • 错题
    
  • 编辑文件
    
  • 讲师-01
    
  • 添加学员
    
  • 课程管理
    
  • 添加
    
  • 试卷
    
  • 直播
    
  • bg-upload
    
  • lock
    
  • username
    
  • logo
    
  • folder-open-fill
    
  • 编辑色块
    
  • 日志
    
  • 错误
    
  • 完成
    
  • 手机_填充
    
  • 法人身份证
    
  • 性别
    
  • 匹配职位-填充
    
  • 24组织架构、接口
    
  • 
  • 邮箱
    
  • 群组多人
    
  • 时间
    
  • 时间
    
  • 统计
    
  • 讲师
    
  • 自主学习
    
  • 标记
    
  • 考试
    
  • 5-左4
    
  • 24gf-playCircle
    
  • 
  • 
  • 文字
    
  • 矩形
    
  • 删除
    
  • 撤销
    
  • 橡皮
    
  • 直线
    
  • 全屏
    
  • 操作_氛围灯
    
  • 答题卡
    
  • 扬声器
    
  • 电脑
    
  • 摄像头
    
  • 麦克风
    
  • 课件-填充
    
  • 白板
    
  • 密码
    
  • 184会员
    
  • 菜单配置
    
  • 10D菜单
    
  • time-asc
    
  • time
    
  • time-desc
    
  • 关机
    
  • size
    
  • size-asc
    
  • size-desc
    
  • 回放
    
  • 下载-文件下载-16
    
  • 未开始
    
  • 重新上报
    
  • 详情
    
  • 日历
    
  • 预览
    
  • 删除_填充
    
  • 文本编辑_填充
    
  • 人员
    
  • 复制
    
  • icon_评语填写
    
  • 添加
    
  • add-plus-circle
    
  • close-circle
    
  • double-quotes-left
    
  • clean
    
  • bold
    
  • image
    
  • italic
    
  • paperclip-attechment-tilt
    
  • move-vertical
    
  • redo
    
  • underline
    
  • text-align-justify
    
  • table-remove
    
  • text-align-left
    
  • list-checked
    
  • move-horizontal
    
  • text-align-right
    
  • bg-color
    
  • painter
    
  • font-color
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • .i-cai
  • .i-zan
  • XLS
    .i-xls
  • shipin
    .i-shipin
  • yinyue
    .i-yinyue
  • PPT
    .i-ppt
  • pptx
    .i-pptx
  • XLSX
    .i-xlsx
  • tupiao
    .i-tupiao
  • DOC
    .i-doc
  • DOCX
    .i-docx
  • PDF
    .i-pdf
  • 文件夹
    .i-wenjianjia
  • 评价
    .i-pingjia
  • 学生考核
    .i-kaoheceping
  • 暂停
    .i-zanting
  • play3
    .i-bofang
  • 系统管理
    .i-xitongguanli
  • 行政班课程
    .i-zaixiankecheng
  • w_教学
    .i-zaixianjiaoxue
  • 考试-选中
    .i-ksrk-mnks
  • 导航
    .i-dao-hang
  • icon_专家答疑
    .i-dbsy-twdn
  • 错题
    .i-csrk-ctgg
  • 编辑文件
    .i-dbsy-sjpg
  • 讲师-01
    .i-dbsy-zbsk
  • 添加学员
    .i-ksrk-sczy
  • 课程管理
    .i-ksrk-kcgl
  • 添加
    .i-ksrk-tjst
  • 试卷
    .i-ksrk-jlsj
  • 直播
    .i-ksrk-cjzb
  • bg-upload
    .i-bg-upload
  • lock
    .i-lock
  • username
    .i-user
  • logo
    .i-logo
  • folder-open-fill
    .i-zy-folder
  • 编辑色块
    .i-j-ksap-bianji2
  • 日志
    .i-x-ctgg-gonggulianxi
  • 错误
    .i-h-sczy-cuowu
  • 完成
    .i-h-sczy-wancheng
  • 手机_填充
    .i-h-yhgl-shoujitianchong
  • 法人身份证
    .i-h-yhgl-farenshenfenzheng
  • 性别
    .i-h-yhgl-gender
  • 匹配职位-填充
    .i-h-yhgl-pipeizhiwei
  • 24组织架构、接口
    .i-h-yhgl-zuzhijiagoujiekou
  • .i-h-yhgl-wo
  • 邮箱
    .i-h-yhgl-youxiang
  • 群组多人
    .i-h-jsgl-duoren
  • 时间
    .i-x-wdkk-shijian
  • 时间
    .i-x-wdkk-jxxx
  • 统计
    .i-x-wdkk-tongji
  • 讲师
    .i-x-wdkk-jiangshi
  • 自主学习
    .i-x-wdkk-kaishixuexi
  • 标记
    .i-x-kskk-biaoji
  • 考试
    .i-x-zxks-canjiakaoshi
  • 5-左4
    .i-j-kcgl--zuo
  • 24gf-playCircle
    .i-j-hfzb--playCircle
  • .i-j-jxzb-yuan
  • .i-j-jxzb-checkin
  • 文字
    .i-j-jxzb-wenzi
  • 矩形
    .i-j-jxzb-juxing
  • 删除
    .i-j-jxzb-shanchu
  • 撤销
    .i-j-jxzb-chexiao
  • 橡皮
    .i-j-jxzb-xiangpi
  • 直线
    .i-j-jxzb-line
  • 全屏
    .i-j-jxzb-quanping
  • 操作_氛围灯
    .i-j-jxzb-nuanchang
  • 答题卡
    .i-j-jxzb-datika
  • 扬声器
    .i-j-jxzb-yangshengqi
  • 电脑
    .i-j-jxzb-diannao
  • 摄像头
    .i-j-jxzb--shiping
  • 麦克风
    .i-j-jxzb-maikefeng
  • 课件-填充
    .i-j-jxzb-kejian
  • 白板
    .i-j-jxzb-baiban
  • 密码
    .i-mima
  • 184会员
    .i-caidan
  • 菜单配置
    .i-zy-lb
  • 10D菜单
    .i-zy-slt
  • time-asc
    .i-zy-sj-d
  • time
    .i-zy-sj
  • time-desc
    .i-zy-sj-u
  • 关机
    .i-tb-tuichudenglu
  • size
    .i-zy-dx
  • size-asc
    .i-zy-dx-u
  • size-desc
    .i-zy-dx-d
  • 回放
    .i-j-zblb-huifang
  • 下载-文件下载-16
    .i-j-rypj-xiazai
  • 未开始
    .i-j-rypj-kaishi
  • 重新上报
    .i-j-rypj-zhongxin
  • 详情
    .i-j-rgpj-xiangqing
  • 日历
    .i-j-fbks-rili
  • 预览
    .i-j-fbks-yulan
  • 删除_填充
    .i-j-ksap-shanchu
  • 文本编辑_填充
    .i-j-ksap-bianji
  • 人员
    .i-j-ksap-renyuan
  • 复制
    .i-j-ksap-fuzhi
  • icon_评语填写
    .i-j-fbks-pingyu
  • 添加
    .i-x-ktbj-tianjia
  • add-plus-circle
    .i-x-ktbj-add-plus-circle
  • close-circle
    .i-x-ktbj-close-circle
  • double-quotes-left
    .i-x-ktbj-double-quotes-left
  • clean
    .i-x-ktbj-clean
  • bold
    .i-x-ktbj-bold
  • image
    .i-x-ktbj-image
  • italic
    .i-x-ktbj-italic
  • paperclip-attechment-tilt
    .i-x-ktbj-paperclip-attechment-tilt
  • move-vertical
    .i-x-ktbj-move-vertical
  • redo
    .i-x-ktbj-redo
  • underline
    .i-x-ktbj-underline
  • text-align-justify
    .i-x-ktbj-text-align-justify
  • table-remove
    .i-x-ktbj-table-remove
  • text-align-left
    .i-x-ktbj-text-align-left
  • list-checked
    .i-x-ktbj-list-checked
  • move-horizontal
    .i-x-ktbj-move-horizontal
  • text-align-right
    .i-x-ktbj-text-align-right
  • bg-color
    .i-x-ktbj-bg-color
  • painter
    .i-x-ktbj-painter
  • font-color
    .i-x-ktbj-font-color

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • #i-cai
  • #i-zan
  • XLS
    #i-xls
  • shipin
    #i-shipin
  • yinyue
    #i-yinyue
  • PPT
    #i-ppt
  • pptx
    #i-pptx
  • XLSX
    #i-xlsx
  • tupiao
    #i-tupiao
  • DOC
    #i-doc
  • DOCX
    #i-docx
  • PDF
    #i-pdf
  • 文件夹
    #i-wenjianjia
  • 评价
    #i-pingjia
  • 学生考核
    #i-kaoheceping
  • 暂停
    #i-zanting
  • play3
    #i-bofang
  • 系统管理
    #i-xitongguanli
  • 行政班课程
    #i-zaixiankecheng
  • w_教学
    #i-zaixianjiaoxue
  • 考试-选中
    #i-ksrk-mnks
  • 导航
    #i-dao-hang
  • icon_专家答疑
    #i-dbsy-twdn
  • 错题
    #i-csrk-ctgg
  • 编辑文件
    #i-dbsy-sjpg
  • 讲师-01
    #i-dbsy-zbsk
  • 添加学员
    #i-ksrk-sczy
  • 课程管理
    #i-ksrk-kcgl
  • 添加
    #i-ksrk-tjst
  • 试卷
    #i-ksrk-jlsj
  • 直播
    #i-ksrk-cjzb
  • bg-upload
    #i-bg-upload
  • lock
    #i-lock
  • username
    #i-user
  • logo
    #i-logo
  • folder-open-fill
    #i-zy-folder
  • 编辑色块
    #i-j-ksap-bianji2
  • 日志
    #i-x-ctgg-gonggulianxi
  • 错误
    #i-h-sczy-cuowu
  • 完成
    #i-h-sczy-wancheng
  • 手机_填充
    #i-h-yhgl-shoujitianchong
  • 法人身份证
    #i-h-yhgl-farenshenfenzheng
  • 性别
    #i-h-yhgl-gender
  • 匹配职位-填充
    #i-h-yhgl-pipeizhiwei
  • 24组织架构、接口
    #i-h-yhgl-zuzhijiagoujiekou
  • #i-h-yhgl-wo
  • 邮箱
    #i-h-yhgl-youxiang
  • 群组多人
    #i-h-jsgl-duoren
  • 时间
    #i-x-wdkk-shijian
  • 时间
    #i-x-wdkk-jxxx
  • 统计
    #i-x-wdkk-tongji
  • 讲师
    #i-x-wdkk-jiangshi
  • 自主学习
    #i-x-wdkk-kaishixuexi
  • 标记
    #i-x-kskk-biaoji
  • 考试
    #i-x-zxks-canjiakaoshi
  • 5-左4
    #i-j-kcgl--zuo
  • 24gf-playCircle
    #i-j-hfzb--playCircle
  • #i-j-jxzb-yuan
  • #i-j-jxzb-checkin
  • 文字
    #i-j-jxzb-wenzi
  • 矩形
    #i-j-jxzb-juxing
  • 删除
    #i-j-jxzb-shanchu
  • 撤销
    #i-j-jxzb-chexiao
  • 橡皮
    #i-j-jxzb-xiangpi
  • 直线
    #i-j-jxzb-line
  • 全屏
    #i-j-jxzb-quanping
  • 操作_氛围灯
    #i-j-jxzb-nuanchang
  • 答题卡
    #i-j-jxzb-datika
  • 扬声器
    #i-j-jxzb-yangshengqi
  • 电脑
    #i-j-jxzb-diannao
  • 摄像头
    #i-j-jxzb--shiping
  • 麦克风
    #i-j-jxzb-maikefeng
  • 课件-填充
    #i-j-jxzb-kejian
  • 白板
    #i-j-jxzb-baiban
  • 密码
    #i-mima
  • 184会员
    #i-caidan
  • 菜单配置
    #i-zy-lb
  • 10D菜单
    #i-zy-slt
  • time-asc
    #i-zy-sj-d
  • time
    #i-zy-sj
  • time-desc
    #i-zy-sj-u
  • 关机
    #i-tb-tuichudenglu
  • size
    #i-zy-dx
  • size-asc
    #i-zy-dx-u
  • size-desc
    #i-zy-dx-d
  • 回放
    #i-j-zblb-huifang
  • 下载-文件下载-16
    #i-j-rypj-xiazai
  • 未开始
    #i-j-rypj-kaishi
  • 重新上报
    #i-j-rypj-zhongxin
  • 详情
    #i-j-rgpj-xiangqing
  • 日历
    #i-j-fbks-rili
  • 预览
    #i-j-fbks-yulan
  • 删除_填充
    #i-j-ksap-shanchu
  • 文本编辑_填充
    #i-j-ksap-bianji
  • 人员
    #i-j-ksap-renyuan
  • 复制
    #i-j-ksap-fuzhi
  • icon_评语填写
    #i-j-fbks-pingyu
  • 添加
    #i-x-ktbj-tianjia
  • add-plus-circle
    #i-x-ktbj-add-plus-circle
  • close-circle
    #i-x-ktbj-close-circle
  • double-quotes-left
    #i-x-ktbj-double-quotes-left
  • clean
    #i-x-ktbj-clean
  • bold
    #i-x-ktbj-bold
  • image
    #i-x-ktbj-image
  • italic
    #i-x-ktbj-italic
  • paperclip-attechment-tilt
    #i-x-ktbj-paperclip-attechment-tilt
  • move-vertical
    #i-x-ktbj-move-vertical
  • redo
    #i-x-ktbj-redo
  • underline
    #i-x-ktbj-underline
  • text-align-justify
    #i-x-ktbj-text-align-justify
  • table-remove
    #i-x-ktbj-table-remove
  • text-align-left
    #i-x-ktbj-text-align-left
  • list-checked
    #i-x-ktbj-list-checked
  • move-horizontal
    #i-x-ktbj-move-horizontal
  • text-align-right
    #i-x-ktbj-text-align-right
  • bg-color
    #i-x-ktbj-bg-color
  • painter
    #i-x-ktbj-painter
  • font-color
    #i-x-ktbj-font-color

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>