• 帮助
    
  • 加号
    
  • 支出
    
  • 云端
    
  • 返回
    
  • 排行
    
  • 日间模式
    
  • 返回
    
  • 减号
    
  • 免费
    
  • 错误
    
  • 图表
    
  • 试题管理
    
  • 公文包
    
  • 更多
    
  • 主页
    
  • 收藏
    
  • 兑换
    
  • 时间
    
  • 回顾
    
  • 主页
    
  • 退出
    
  • 主页
    
  • 充值
    
  • 人民币
    
  • 分享
    
  • 免费
    
  • 推荐
    
  • 视频
    
  • 搜索
    
  • 没有
    
  • 手机
    
  • 关于
    
  • 收藏
    
  • 注册
    
  • 积分
    
  • 更多
    
  • 分享
    
  • 返回
    
  • 列表
    
  • 明细
    
  • 最新
    
  • nlife_除号
    
  • nlife_等号
    
  • 没有内容
    
  • 学科
    
  • 邮件
    
  • 试卷
    
  • 限时打折
    
  • pptx
    
  • 操作-收藏-line
    
  • 增加
    
  • 登录
    
  • 更多
    
  • 积分
    
  • 单选题
    
  • 直播
    
  • 新闻
    
  • 答题卡
    
  • 小节练习
    
  • 
  • 报错
    
  • 视频
    
  • 判断-对
    
  • 判断-错
    
  • 提交
    
  • 头像 (2x)
    
  • null
    
  • 点击右上角
    
  • 专业
    
  • 解答管理
    
  • 访问
    
  • 关闭
    
  • 密码
    
  • 课程
    
  • 验证码
    
  • 考试
    
  • 短信-侧滑 -信息详情
    
  • 随机
    
  • 提交
    
  • 不及格
    
  • 充值卡管理
    
  • 钱5
    
  • 钱7
    
  • 图表
    
  • 三角下标(正方形)
    
  • 
  • 手势放大
    
  • 手势缩小
    
  • 手势-向上
    
  • 手势-向下
    
  • 手势-向右_2
    
  • 手势-向左_2
    
  • 多选项
    
  • 简答
    
  • 护眼模式
    
  • checkbox-checked
    
  • rar
    
  • 三角下标(正方形)
    
  • 放大
    
  • 三角下标(正方形)
    
  • 右下角
    
  • 左上角
    
  • 左下角
    
  • 右上角
    
  • 同步
    
  • 删除小节
    
  • 下一小节
    
  • 上一小节
    
  • 支出
    
  • 列表
    
  • 钱6
    
  • 姓名
    
  • 答案设置
    
  • 没有数据
    
  • 积分
    
  • 热门
    
  • 下一页
    
  • 图表
    
  • 年龄
    
  • loading
    
  • 钱包
    
  • 账单
    
  • 窗体-最大化
    
  • 窗体-缩小
    
  • 年龄
    
  • 解析
    
  • pdf
    
  • 提交
    
  • 缩小
    
  • 答案
    
  • 上一页
    
  • 地址
    
  • 播放
    
  • 
  • docx
    
  • 正确
    
  • 
  • 没有更多
    
  • 分 享
    
  • 滑动拉条
    
  • 记事本 日志
    
  • 聊天
    
  • 
  • 资金
    
  • 
  • 文档
    
  • zip
    
  • 团队
    
  • 人员
    
  • 收入
    
  • 试卷
    
  • 菜单
    
  • 附件
    
  • 赞手势
    
  • 回顾引导
    
  • 验证码
    
  • 人民币
    
  • 夜间模式
    
  • 答案解析
    
  • 单选
    
  • 支付宝
    
  • 余额
    
  • 图表
    
  • 电话
    
  • 单选框 选中
    
  • 更多
    
  • 百分号
    
  • 账号
    
  • XLSX
    
  • 判断题
    
  • 填空题
    
  • 章节
    
  • 报错
    
  • 收藏
    
  • docx
    
  • 聊天
    
  • 升级
    
  • 关闭
    
  • 没有内容
    
  • 热门
    
  • 学历
    
  • QQ
    
  • 收入
    
  • 
  • 乘号
    
  • 模块
    
  • 学习卡
    
  • 全屏
    
  • 应用
    
  • 三角下标(正方形)
    
  • 公告
    
  • 退出
    
  • 免费
    
  • 限免
    
  • 视频
    
  • 兑换
    
  • 不及格
    
  • 推荐
    
  • 云点播
    
  • 卡券
    
  • 网络课程
    
  • 左右滑动
    
  • 得分
    
  • 顺序
    
  • 学科
    
  • 课程
    
  • 最新更新
    
  • 积分
    
  • 上下滑动
    
  • 得分
    
  • 试题库
    
  • 优秀
    
  • 人民币
    
  • 微信
    
  • PPT
    
  • doc
    
  • xls
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#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-bangzhu
  • 加号
    .icon-jiahao
  • 支出
    .icon-lose
  • 云端
    .icon-yunduan
  • 返回
    .icon-fanhui
  • 排行
    .icon-paixing
  • 日间模式
    .icon-rijianmoshi
  • 返回
    .icon-fanhui1
  • 减号
    .icon-jianhao
  • 免费
    .icon-icon6
  • 错误
    .icon-icon105
  • 图表
    .icon-chart
  • 试题管理
    .icon-shitiguanli
  • 公文包
    .icon-iconset0190
  • 更多
    .icon-gengduo
  • 主页
    .icon-zhuye
  • 收藏
    .icon-icon3
  • 兑换
    .icon-duihuan1
  • 时间
    .icon-shijian
  • 回顾
    .icon-review
  • 主页
    .icon-zhuye1
  • 退出
    .icon-tuichu
  • 主页
    .icon-zhuye2
  • 充值
    .icon-chongzhi
  • 人民币
    .icon-icon-yxj-money-copy
  • 分享
    .icon-fenxiang
  • 免费
    .icon-mianfei
  • 推荐
    .icon-tuijian-copy
  • 视频
    .icon-chakantiezishipin
  • 搜索
    .icon-sousuo
  • 没有
    .icon-meiyou
  • 手机
    .icon-shouji
  • 关于
    .icon-icon77
  • 收藏
    .icon-shoucang
  • 注册
    .icon-zhuce
  • 积分
    .icon-jifen1
  • 更多
    .icon-weibiaoti1
  • 分享
    .icon-fenxiang1
  • 返回
    .icon-fanhui-copy
  • 列表
    .icon-liebiao1
  • 明细
    .icon-mingxi
  • 最新
    .icon-zuixin
  • nlife_除号
    .icon-nlife_chuhao
  • nlife_等号
    .icon-nlife_denghao
  • 没有内容
    .icon-empty
  • 学科
    .icon-xueke
  • 邮件
    .icon-kongzhiguanli
  • 试卷
    .icon-shijuan
  • 限时打折
    .icon-xianshidazhe
  • pptx
    .icon-pptx
  • 操作-收藏-line
    .icon-shoucang1
  • 增加
    .icon-zengjia
  • 登录
    .icon-shiliangzhinengduixiang
  • 更多
    .icon-gengduo1
  • 积分
    .icon-jifen
  • 单选题
    .icon-danxuanti
  • 直播
    .icon-zhibo
  • 新闻
    .icon-NEWS-copy
  • 答题卡
    .icon-datiqia
  • 小节练习
    .icon-xiaojielianxi
  • .icon-qian
  • 报错
    .icon-baocuo
  • 视频
    .icon-shipin
  • 判断-对
    .icon-panduan-dui
  • 判断-错
    .icon-panduan-cuo
  • 提交
    .icon-ziyuan1
  • 头像 (2x)
    .icon-touxiang
  • null
    .icon-null
  • 点击右上角
    .icon-dianjiyoushangjiao
  • 专业
    .icon-zhuanye
  • 解答管理
    .icon-jiedaguanli
  • 访问
    .icon-fangwen
  • 关闭
    .icon-icon-test1
  • 密码
    .icon-mima
  • 课程
    .icon-kecheng-
  • 验证码
    .icon-yanzhengma
  • 考试
    .icon-kaoshi
  • 短信-侧滑 -信息详情
    .icon-duanxin-cehua-xinxixiangqing
  • 随机
    .icon-suiji
  • 提交
    .icon-tijiao
  • 不及格
    .icon-bujige
  • 充值卡管理
    .icon-chongzhiqiaguanli
  • 钱5
    .icon-money-5
  • 钱7
    .icon-money-7
  • 图表
    .icon-tubiao
  • 三角下标(正方形)
    .icon-arrDnR-fill
  • .icon-nothing
  • 手势放大
    .icon-shoushifangda
  • 手势缩小
    .icon-shoushisuoxiao
  • 手势-向上
    .icon-shoushi-xiangshang
  • 手势-向下
    .icon-shoushi-xiangxia
  • 手势-向右_2
    .icon-shoushi-xiangyou_1
  • 手势-向左_2
    .icon-shoushi-xiangzuo_
  • 多选项
    .icon-xuanze
  • 简答
    .icon-icon-test
  • 护眼模式
    .icon-huyanmoshi
  • checkbox-checked
    .icon-p
  • rar
    .icon-rar
  • 三角下标(正方形)
    .icon-arrLeft-fill
  • 放大
    .icon-fangda
  • 三角下标(正方形)
    .icon-icon-up
  • 右下角
    .icon-youxiajiao
  • 左上角
    .icon-zuoshangjiao
  • 左下角
    .icon-zuoxiajiao
  • 右上角
    .icon-youshangjiao
  • 同步
    .icon-tongbu
  • 删除小节
    .icon-icon-test2
  • 下一小节
    .icon-xiayixiaojie
  • 上一小节
    .icon-shangyixiaojie
  • 支出
    .icon-zhichu
  • 列表
    .icon-liebiao
  • 钱6
    .icon-money-6
  • 姓名
    .icon-xingming
  • 答案设置
    .icon-daanshezhi
  • 没有数据
    .icon-meiyoushuju
  • 积分
    .icon-class
  • 热门
    .icon-remen
  • 下一页
    .icon-xiayiye
  • 图表
    .icon-tubiao1
  • 年龄
    .icon-nianling
  • loading
    .icon-loading1
  • 钱包
    .icon-qianbao
  • 账单
    .icon-zhangdan
  • 窗体-最大化
    .icon-chuangti-zuidahua
  • 窗体-缩小
    .icon-chuangti-suoxiao
  • 年龄
    .icon-nianling1
  • 解析
    .icon-jiexi
  • pdf
    .icon-pdf
  • 提交
    .icon-tijiao1
  • 缩小
    .icon-suoxiao
  • 答案
    .icon-daan
  • 上一页
    .icon-iconfontyou
  • 地址
    .icon-dizhi
  • 播放
    .icon-bofang
  • .icon-nv
  • docx
    .icon-word-copy-copy
  • 正确
    .icon-zhengque
  • .icon-nv2
  • 没有更多
    .icon-meiyougengduo
  • 分 享
    .icon-fenxiang-copy
  • 滑动拉条
    .icon-huadonglatiao
  • 记事本 日志
    .icon-jishibenrizhi
  • 聊天
    .icon-liaotian
  • .icon-wo
  • 资金
    .icon-zijin
  • .icon-nan1
  • 文档
    .icon-wendang
  • zip
    .icon-zip
  • 团队
    .icon-tuandui
  • 人员
    .icon-renyuan
  • 收入
    .icon-shouru
  • 试卷
    .icon-shijuan1
  • 菜单
    .icon-caidan1
  • 附件
    .icon-fujian
  • 赞手势
    .icon-zanshoushi
  • 回顾引导
    .icon-huiguyindao
  • 验证码
    .icon-yanzhengma1
  • 人民币
    .icon-38
  • 夜间模式
    .icon-yejianmoshi-
  • 答案解析
    .icon-daanjiexi
  • 单选
    .icon-xingzhuang6kaobei31
  • 支付宝
    .icon-umidd17
  • 余额
    .icon-yue
  • 图表
    .icon-tubiao2
  • 电话
    .icon-dianhua
  • 单选框 选中
    .icon-circle
  • 更多
    .icon-menu-dots
  • 百分号
    .icon-baifenhao
  • 账号
    .icon-zhanghao
  • XLSX
    .icon-XLSX
  • 判断题
    .icon-panduanti
  • 填空题
    .icon-tiankongti
  • 章节
    .icon-zhangjie
  • 报错
    .icon-baocuo1
  • 收藏
    .icon-shoucang2
  • docx
    .icon-docx
  • 聊天
    .icon-liaotian1
  • 升级
    .icon-shengji
  • 关闭
    .icon-close
  • 没有内容
    .icon-meiyouneirong
  • 热门
    .icon-remen1
  • 学历
    .icon-xueli
  • QQ
    .icon-QQ
  • 收入
    .icon-shouru1
  • .icon-nan
  • 乘号
    .icon-chenghao
  • 模块
    .icon-mokuai
  • 学习卡
    .icon-xuexiqia
  • 全屏
    .icon-quanping
  • 应用
    .icon-yingyong
  • 三角下标(正方形)
    .icon-xiasanjiao
  • 公告
    .icon-gonggao
  • 退出
    .icon-tuichu1
  • 免费
    .icon-mianfei1
  • 限免
    .icon-xianmian
  • 视频
    .icon-shipin1
  • 兑换
    .icon-duihuan
  • 不及格
    .icon-bujige1
  • 推荐
    .icon-tuijian
  • 云点播
    .icon-yundianbo
  • 卡券
    .icon-qiaquan
  • 网络课程
    .icon-wangluokecheng
  • 左右滑动
    .icon-huakuai
  • 得分
    .icon-defen
  • 顺序
    .icon-shunxu
  • 学科
    .icon-xueke1
  • 课程
    .icon-kecheng
  • 最新更新
    .icon-zuixingengxin
  • 积分
    .icon-icon
  • 上下滑动
    .icon-shangxiahuadong
  • 得分
    .icon-defen1
  • 试题库
    .icon-exam_test_questions
  • 优秀
    .icon-youxiu
  • 人民币
    .icon-renminbi
  • 微信
    .icon-weixin
  • PPT
    .icon-PPT
  • doc
    .icon-doc
  • xls
    .icon-xls

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

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

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

  • 帮助
    #icon-bangzhu
  • 加号
    #icon-jiahao
  • 支出
    #icon-lose
  • 云端
    #icon-yunduan
  • 返回
    #icon-fanhui
  • 排行
    #icon-paixing
  • 日间模式
    #icon-rijianmoshi
  • 返回
    #icon-fanhui1
  • 减号
    #icon-jianhao
  • 免费
    #icon-icon6
  • 错误
    #icon-icon105
  • 图表
    #icon-chart
  • 试题管理
    #icon-shitiguanli
  • 公文包
    #icon-iconset0190
  • 更多
    #icon-gengduo
  • 主页
    #icon-zhuye
  • 收藏
    #icon-icon3
  • 兑换
    #icon-duihuan1
  • 时间
    #icon-shijian
  • 回顾
    #icon-review
  • 主页
    #icon-zhuye1
  • 退出
    #icon-tuichu
  • 主页
    #icon-zhuye2
  • 充值
    #icon-chongzhi
  • 人民币
    #icon-icon-yxj-money-copy
  • 分享
    #icon-fenxiang
  • 免费
    #icon-mianfei
  • 推荐
    #icon-tuijian-copy
  • 视频
    #icon-chakantiezishipin
  • 搜索
    #icon-sousuo
  • 没有
    #icon-meiyou
  • 手机
    #icon-shouji
  • 关于
    #icon-icon77
  • 收藏
    #icon-shoucang
  • 注册
    #icon-zhuce
  • 积分
    #icon-jifen1
  • 更多
    #icon-weibiaoti1
  • 分享
    #icon-fenxiang1
  • 返回
    #icon-fanhui-copy
  • 列表
    #icon-liebiao1
  • 明细
    #icon-mingxi
  • 最新
    #icon-zuixin
  • nlife_除号
    #icon-nlife_chuhao
  • nlife_等号
    #icon-nlife_denghao
  • 没有内容
    #icon-empty
  • 学科
    #icon-xueke
  • 邮件
    #icon-kongzhiguanli
  • 试卷
    #icon-shijuan
  • 限时打折
    #icon-xianshidazhe
  • pptx
    #icon-pptx
  • 操作-收藏-line
    #icon-shoucang1
  • 增加
    #icon-zengjia
  • 登录
    #icon-shiliangzhinengduixiang
  • 更多
    #icon-gengduo1
  • 积分
    #icon-jifen
  • 单选题
    #icon-danxuanti
  • 直播
    #icon-zhibo
  • 新闻
    #icon-NEWS-copy
  • 答题卡
    #icon-datiqia
  • 小节练习
    #icon-xiaojielianxi
  • #icon-qian
  • 报错
    #icon-baocuo
  • 视频
    #icon-shipin
  • 判断-对
    #icon-panduan-dui
  • 判断-错
    #icon-panduan-cuo
  • 提交
    #icon-ziyuan1
  • 头像 (2x)
    #icon-touxiang
  • null
    #icon-null
  • 点击右上角
    #icon-dianjiyoushangjiao
  • 专业
    #icon-zhuanye
  • 解答管理
    #icon-jiedaguanli
  • 访问
    #icon-fangwen
  • 关闭
    #icon-icon-test1
  • 密码
    #icon-mima
  • 课程
    #icon-kecheng-
  • 验证码
    #icon-yanzhengma
  • 考试
    #icon-kaoshi
  • 短信-侧滑 -信息详情
    #icon-duanxin-cehua-xinxixiangqing
  • 随机
    #icon-suiji
  • 提交
    #icon-tijiao
  • 不及格
    #icon-bujige
  • 充值卡管理
    #icon-chongzhiqiaguanli
  • 钱5
    #icon-money-5
  • 钱7
    #icon-money-7
  • 图表
    #icon-tubiao
  • 三角下标(正方形)
    #icon-arrDnR-fill
  • #icon-nothing
  • 手势放大
    #icon-shoushifangda
  • 手势缩小
    #icon-shoushisuoxiao
  • 手势-向上
    #icon-shoushi-xiangshang
  • 手势-向下
    #icon-shoushi-xiangxia
  • 手势-向右_2
    #icon-shoushi-xiangyou_1
  • 手势-向左_2
    #icon-shoushi-xiangzuo_
  • 多选项
    #icon-xuanze
  • 简答
    #icon-icon-test
  • 护眼模式
    #icon-huyanmoshi
  • checkbox-checked
    #icon-p
  • rar
    #icon-rar
  • 三角下标(正方形)
    #icon-arrLeft-fill
  • 放大
    #icon-fangda
  • 三角下标(正方形)
    #icon-icon-up
  • 右下角
    #icon-youxiajiao
  • 左上角
    #icon-zuoshangjiao
  • 左下角
    #icon-zuoxiajiao
  • 右上角
    #icon-youshangjiao
  • 同步
    #icon-tongbu
  • 删除小节
    #icon-icon-test2
  • 下一小节
    #icon-xiayixiaojie
  • 上一小节
    #icon-shangyixiaojie
  • 支出
    #icon-zhichu
  • 列表
    #icon-liebiao
  • 钱6
    #icon-money-6
  • 姓名
    #icon-xingming
  • 答案设置
    #icon-daanshezhi
  • 没有数据
    #icon-meiyoushuju
  • 积分
    #icon-class
  • 热门
    #icon-remen
  • 下一页
    #icon-xiayiye
  • 图表
    #icon-tubiao1
  • 年龄
    #icon-nianling
  • loading
    #icon-loading1
  • 钱包
    #icon-qianbao
  • 账单
    #icon-zhangdan
  • 窗体-最大化
    #icon-chuangti-zuidahua
  • 窗体-缩小
    #icon-chuangti-suoxiao
  • 年龄
    #icon-nianling1
  • 解析
    #icon-jiexi
  • pdf
    #icon-pdf
  • 提交
    #icon-tijiao1
  • 缩小
    #icon-suoxiao
  • 答案
    #icon-daan
  • 上一页
    #icon-iconfontyou
  • 地址
    #icon-dizhi
  • 播放
    #icon-bofang
  • #icon-nv
  • docx
    #icon-word-copy-copy
  • 正确
    #icon-zhengque
  • #icon-nv2
  • 没有更多
    #icon-meiyougengduo
  • 分 享
    #icon-fenxiang-copy
  • 滑动拉条
    #icon-huadonglatiao
  • 记事本 日志
    #icon-jishibenrizhi
  • 聊天
    #icon-liaotian
  • #icon-wo
  • 资金
    #icon-zijin
  • #icon-nan1
  • 文档
    #icon-wendang
  • zip
    #icon-zip
  • 团队
    #icon-tuandui
  • 人员
    #icon-renyuan
  • 收入
    #icon-shouru
  • 试卷
    #icon-shijuan1
  • 菜单
    #icon-caidan1
  • 附件
    #icon-fujian
  • 赞手势
    #icon-zanshoushi
  • 回顾引导
    #icon-huiguyindao
  • 验证码
    #icon-yanzhengma1
  • 人民币
    #icon-38
  • 夜间模式
    #icon-yejianmoshi-
  • 答案解析
    #icon-daanjiexi
  • 单选
    #icon-xingzhuang6kaobei31
  • 支付宝
    #icon-umidd17
  • 余额
    #icon-yue
  • 图表
    #icon-tubiao2
  • 电话
    #icon-dianhua
  • 单选框 选中
    #icon-circle
  • 更多
    #icon-menu-dots
  • 百分号
    #icon-baifenhao
  • 账号
    #icon-zhanghao
  • XLSX
    #icon-XLSX
  • 判断题
    #icon-panduanti
  • 填空题
    #icon-tiankongti
  • 章节
    #icon-zhangjie
  • 报错
    #icon-baocuo1
  • 收藏
    #icon-shoucang2
  • docx
    #icon-docx
  • 聊天
    #icon-liaotian1
  • 升级
    #icon-shengji
  • 关闭
    #icon-close
  • 没有内容
    #icon-meiyouneirong
  • 热门
    #icon-remen1
  • 学历
    #icon-xueli
  • QQ
    #icon-QQ
  • 收入
    #icon-shouru1
  • #icon-nan
  • 乘号
    #icon-chenghao
  • 模块
    #icon-mokuai
  • 学习卡
    #icon-xuexiqia
  • 全屏
    #icon-quanping
  • 应用
    #icon-yingyong
  • 三角下标(正方形)
    #icon-xiasanjiao
  • 公告
    #icon-gonggao
  • 退出
    #icon-tuichu1
  • 免费
    #icon-mianfei1
  • 限免
    #icon-xianmian
  • 视频
    #icon-shipin1
  • 兑换
    #icon-duihuan
  • 不及格
    #icon-bujige1
  • 推荐
    #icon-tuijian
  • 云点播
    #icon-yundianbo
  • 卡券
    #icon-qiaquan
  • 网络课程
    #icon-wangluokecheng
  • 左右滑动
    #icon-huakuai
  • 得分
    #icon-defen
  • 顺序
    #icon-shunxu
  • 学科
    #icon-xueke1
  • 课程
    #icon-kecheng
  • 最新更新
    #icon-zuixingengxin
  • 积分
    #icon-icon
  • 上下滑动
    #icon-shangxiahuadong
  • 得分
    #icon-defen1
  • 试题库
    #icon-exam_test_questions
  • 优秀
    #icon-youxiu
  • 人民币
    #icon-renminbi
  • 微信
    #icon-weixin
  • PPT
    #icon-PPT
  • doc
    #icon-doc
  • xls
    #icon-xls

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>