• 
  • 地图
    
  • 活动
    
  • 素养树
    
  • 首页
    
  • tag_faces
    
  • 消息
    
  • 代办
    
  • 首页
    
  • 通知公告
    
  • 奖学金
    
  • 志愿服务
    
  • huodong
    
  • wo
    
  • xiaoyuanditu
    
  • shouye
    
  • 课程
    
  • 报名进度
    
  • 课程辅导
    
  • 一键选房
    
  • 选房
    
  • 我的团队
    
  • 通知公告
    
  • 个人中心
    
  • 消息
    
  • 招聘种类
    
  • icon_abroad1
    
  • icon_study1
    
  • icon_master1
    
  • icon_result1
    
  • shuaxin2
    
  • 新进-说明
    
  • 新进-首页
    
  • 新进-流程跟踪
    
  • 我的信息
    
  • 请假审核(选中)
    
  • 请假(选中)
    
  • 请假
    
  • 销假(选中)
    
  • 我的信息(选中)
    
  • 变更历史(选中)
    
  • 请假审核
    
  • 变更历史
    
  • 销假
    
  • 销假审核(选中)
    
  • 销假申请
    
  • wechat
    
  • qq0
    
  • img error
    
  • icon-correct
    
  • 采购合同待支付统计
    
  • 采购项目分配情况
    
  • 采购项目整体情况
    
  • 采购执行进度情况
    
  • 延期项目进度统计
    
  • 经费来源待支付统计
    
  • 重点项目执行统计
    
  • 采购预算部门支付预警
    
  • 经费来源执行统计
    
  • 采购执行成效情况
    
  • 采购执行预警情况
    
  • 年度项目执行统计
    
  • img
    
  • 筛选
    
  • 人民币专用账户
    
  • xlsx
    
  • pdf
    
  • zip
    
  • doc
    
  • ppt
    
  • others
    
  • drag
    
  • 即将到期
    
  • 逾期未完成
    
  • 未完成
    
  • 未审核
    
  • 完成
    
  • 逾期完成
    
  • male
    
  • female
    
  • 通知
    
  • 二维码
    
  • 浏览
    
  • run
    
  • 银行卡管理
    
  • date_range
    
  • gengduo
    
  • erroroutline
    
  • wifi
    
  • description
    
  • import_contacts
    
  • local_grocery_store
    
  • local_hospital
    
  • opacity
    
  • pages
    
  • restaurant_menu
    
  • 闪电
    
  • 键盘
    
  • 语音
    
  • search
    
  • keyboard_arrow_down
    
  • keyboard_arrow_left
    
  • keyboard_arrow_right
    
  • keyboard_arrow_up
    
  • down_1
    
  • phone
    
  • place
    
  • remove_circle
    
  • 发布招领
    
  • 我发布的
    
  • 发布寻物
    
  • 取消
    
  • 点点
    
  • 日历模式-01
    
  • 考完
    
  • 他人日程
    
  • 未考完
    
  • 菜单
    
  • 灯泡_亮
    
  • 加号
    
  • 添加
    
  • 设置
    
  • 地址
    
  • 刷新
    
  • 闹钟
    
  • 备注
    
  • 闹钟
    
  • 咨询区
    
  • 我的咨询
    
  • 常见问题
    
  • 我的咨询-1
    
  • 公共咨询
    
  • 常见问题-1
    
  • 咨询区-1
    
  • 公共咨询-1
    
  • 隔离问题
    
  • 转移问题
    
  • 回复问题
    
  • 查看全部
    
  • 别针
    
  • 回复
    
  • delete
    
  • 收件箱
    
  • 发件箱
    
  • 编辑
    
  • 成功
    
  • 成功
    
  • 返回
    
  • 返回
    
  • 星星
    
  • 头像
    
  • 放大镜
    
  • 
  • 转推
    
  • 评论
    
  • 电话
    
  • 联系人
    
  • 时间
    
  • 信息
    
  • 地点
    
  • 评论
    
  • 
  • 转发
    
  • location_on
    
  • message_line
    
  • more
    
  • phone_line
    
  • supervisor_account
    
  • 五角星 (1)
    
  • call
    
  • close
    
  • edit
    
  • email
    
  • event
    
  • home
    
  • insert_drive_file
    
  • local_offer
    
  • 待办事宜icon
    
  • 待阅事宜icon
    
  • 个人日程icon
    
  • 领导日程icon
    
  • 申请状态icon
    
  • 通讯录icon
    
  • 通知公告icon
    
  • 消息中心icon
    
  • 学校文件icon
    
  • 已办事宜icon
    
  • 已阅事宜icon
    
  • 周会表icon
    
  • 手球-16
    
  • 默认图标
    
  • 瑜伽
    
  • 棒球
    
  • 壁球
    
  • 健身
    
  • 篮球
    
  • 垒球
    
  • 排球
    
  • 乒乓球
    
  • 柔道
    
  • 跆拳道
    
  • 体操
    
  • 网球
    
  • 武术
    
  • 舞蹈
    
  • 游泳
    
  • 羽毛球
    
  • 运动默认图标-20
    
  • 桌球
    
  • 足球
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1651830555652') format('woff2'),
       url('iconfont.woff?t=1651830555652') format('woff'),
       url('iconfont.ttf?t=1651830555652') 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-wo1
  • 地图
    .icon-ditu
  • 活动
    .icon-huodong1
  • 素养树
    .icon-suyangshu
  • 首页
    .icon-shouye2
  • tag_faces
    .icon-tagfaces
  • 消息
    .icon-xiaoxi
  • 代办
    .icon-daiban
  • 首页
    .icon-shouye1
  • 通知公告
    .icon-tongzhigonggao
  • 奖学金
    .icon-jiangxuejin
  • 志愿服务
    .icon-qiyeyunicon-
  • huodong
    .icon-huodong
  • wo
    .icon-wo
  • xiaoyuanditu
    .icon-xiaoyuanditu
  • shouye
    .icon-shouye
  • 课程
    .icon-kecheng
  • 报名进度
    .icon-baomingjindu
  • 课程辅导
    .icon-kechengfudao
  • 一键选房
    .icon-yijianxuanfang
  • 选房
    .icon-xuanfang
  • 我的团队
    .icon-wodetuandui
  • 通知公告
    .icon-tongzhigonggao1
  • 个人中心
    .icon-gerenzhongxin1
  • 消息
    .icon-xiaoxi1
  • 招聘种类
    .icon-zhaopinzhonglei1
  • icon_abroad1
    .icon-icon_abroad
  • icon_study1
    .icon-icon_study
  • icon_master1
    .icon-icon_master
  • icon_result1
    .icon-icon_result
  • shuaxin2
    .icon-shuaxin1
  • 新进-说明
    .icon-xinjin-shuoming
  • 新进-首页
    .icon-xinjin-shouye
  • 新进-流程跟踪
    .icon-xinjin-liuchenggenzong
  • 我的信息
    .icon-wodexinxi
  • 请假审核(选中)
    .icon-qingjiashenhexuanzhong
  • 请假(选中)
    .icon-qingjiaxuanzhong
  • 请假
    .icon-qingjia
  • 销假(选中)
    .icon-xiaojiaxuanzhong
  • 我的信息(选中)
    .icon-wodexinxixuanzhong
  • 变更历史(选中)
    .icon-biangenglishixuanzhong
  • 请假审核
    .icon-qingjiashenhe
  • 变更历史
    .icon-biangenglishi
  • 销假
    .icon-xiaojia
  • 销假审核(选中)
    .icon-xiaojiashenhexuanzhong
  • 销假申请
    .icon-xiaojiashenqing
  • wechat
    .icon-wechat1
  • qq0
    .icon-qq0
  • img error
    .icon-imgerror
  • icon-correct
    .icon-icon-correct
  • 采购合同待支付统计
    .icon-caigouhetongdaizhifutongji
  • 采购项目分配情况
    .icon-caigouxiangmufenpeiqingkuang
  • 采购项目整体情况
    .icon-caigouxiangmuzhengtiqingkuang
  • 采购执行进度情况
    .icon-caigouzhihangjinduqingkuang
  • 延期项目进度统计
    .icon-yanqixiangmujindutongji
  • 经费来源待支付统计
    .icon-jingfeilaiyuandaizhifutongji
  • 重点项目执行统计
    .icon-zhongdianxiangmuzhihangtongji
  • 采购预算部门支付预警
    .icon-caigouyusuanbumenzhifuyujing
  • 经费来源执行统计
    .icon-jingfeilaiyuanzhihangtongji
  • 采购执行成效情况
    .icon-caigouzhihangchengxiaoqingkuang
  • 采购执行预警情况
    .icon-caigouzhihangyujingqingkuang
  • 年度项目执行统计
    .icon-nianduxiangmuzhihangtongji
  • img
    .icon-img
  • 筛选
    .icon-shaixuan
  • 人民币专用账户
    .icon-renminbizhuanyong
  • xlsx
    .icon-xlsx
  • pdf
    .icon-pdf
  • zip
    .icon-zip
  • doc
    .icon-doc
  • ppt
    .icon-ppt
  • others
    .icon-others
  • drag
    .icon-drag
  • 即将到期
    .icon-jijiangdaoqi
  • 逾期未完成
    .icon-yuqiweiwancheng
  • 未完成
    .icon-weiwancheng
  • 未审核
    .icon-weishenhe
  • 完成
    .icon-wancheng
  • 逾期完成
    .icon-yuqiwancheng
  • male
    .icon-male
  • female
    .icon-female
  • 通知
    .icon-tongzhi
  • 二维码
    .icon-erweima
  • 浏览
    .icon-liulan
  • run
    .icon-run
  • 银行卡管理
    .icon-bank
  • date_range
    .icon-daterange
  • gengduo
    .icon-gengduo
  • erroroutline
    .icon-erroroutline
  • wifi
    .icon-wifi
  • description
    .icon-description
  • import_contacts
    .icon-importcontacts
  • local_grocery_store
    .icon-localgrocerystore
  • local_hospital
    .icon-localhospital
  • opacity
    .icon-opacity
  • pages
    .icon-pages
  • restaurant_menu
    .icon-restaurantmenu
  • 闪电
    .icon-shandian
  • 键盘
    .icon-jianpan
  • 语音
    .icon-yuyin
  • search
    .icon-search
  • keyboard_arrow_down
    .icon-keyboardarrowdown
  • keyboard_arrow_left
    .icon-keyboardarrowleft
  • keyboard_arrow_right
    .icon-keyboardarrowright
  • keyboard_arrow_up
    .icon-keyboardarrowup
  • down_1
    .icon-down1
  • phone
    .icon-phone
  • place
    .icon-place
  • remove_circle
    .icon-removecircle
  • 发布招领
    .icon-fabuzhaoling
  • 我发布的
    .icon-wofabude
  • 发布寻物
    .icon-fabuxunwu
  • 取消
    .icon-quxiao
  • 点点
    .icon-diandian
  • 日历模式-01
    .icon-rilimoshi-
  • 考完
    .icon-kaowan
  • 他人日程
    .icon-tarenricheng
  • 未考完
    .icon-weikaowan
  • 菜单
    .icon-caidan
  • 灯泡_亮
    .icon-dengpaoliang
  • 加号
    .icon-jiahao01
  • 添加
    .icon-tianjia
  • 设置
    .icon-shezhi
  • 地址
    .icon-dizhi
  • 刷新
    .icon-shuaxin
  • 闹钟
    .icon-naozhong
  • 备注
    .icon-beizhu
  • 闹钟
    .icon-naozhong1
  • 咨询区
    .icon-zixunqu
  • 我的咨询
    .icon-wodezixun
  • 常见问题
    .icon-changjianwenti
  • 我的咨询-1
    .icon-wodezixun-
  • 公共咨询
    .icon-gonggongzixun
  • 常见问题-1
    .icon-changjianwenti-
  • 咨询区-1
    .icon-zixunqu-
  • 公共咨询-1
    .icon-gonggongzixun-
  • 隔离问题
    .icon-geliwenti
  • 转移问题
    .icon-zhuanyiwenti
  • 回复问题
    .icon-huifuwenti
  • 查看全部
    .icon-chakanquanbu-copy
  • 别针
    .icon-biezhen
  • 回复
    .icon-huifu
  • delete
    .icon-delete
  • 收件箱
    .icon-shoujianxiang
  • 发件箱
    .icon-fajianxiang
  • 编辑
    .icon-bianji
  • 成功
    .icon-chenggong
  • 成功
    .icon-chenggong1
  • 返回
    .icon-fanhui
  • 返回
    .icon-back
  • 星星
    .icon-xingxing
  • 头像
    .icon-touxiang
  • 放大镜
    .icon-fangdajing
  • .icon-zan
  • 转推
    .icon-zhuantui
  • 评论
    .icon-pinglun
  • 电话
    .icon-dianhua
  • 联系人
    .icon-lianxiren
  • 时间
    .icon-shijian
  • 信息
    .icon-xinxi
  • 地点
    .icon-didian
  • 评论
    .icon-pinglun1
  • .icon-zan1
  • 转发
    .icon-zhuanfa
  • location_on
    .icon-locationon
  • message_line
    .icon-messageline
  • more
    .icon-more
  • phone_line
    .icon-phoneline
  • supervisor_account
    .icon-supervisoraccount
  • 五角星 (1)
    .icon-wujiaoxing1
  • call
    .icon-call
  • close
    .icon-close
  • edit
    .icon-edit
  • email
    .icon-email
  • event
    .icon-event
  • home
    .icon-home
  • insert_drive_file
    .icon-insertdrivefile
  • local_offer
    .icon-localoffer
  • 待办事宜icon
    .icon-daibanshiyiicon
  • 待阅事宜icon
    .icon-daiyueshiyiicon
  • 个人日程icon
    .icon-gerenrichengicon
  • 领导日程icon
    .icon-lingdaorichengicon
  • 申请状态icon
    .icon-shenqingzhuangtaiicon
  • 通讯录icon
    .icon-tongxunluicon
  • 通知公告icon
    .icon-tongzhigonggaoicon
  • 消息中心icon
    .icon-xiaoxizhongxinicon
  • 学校文件icon
    .icon-xuexiaowenjianicon
  • 已办事宜icon
    .icon-yibanshiyiicon
  • 已阅事宜icon
    .icon-yiyueshiyiicon
  • 周会表icon
    .icon-zhouhuibiaoicon
  • 手球-16
    .icon-shouqiu16
  • 默认图标
    .icon-morentubiao
  • 瑜伽
    .icon-yuqie
  • 棒球
    .icon-bangqiu
  • 壁球
    .icon-biqiu
  • 健身
    .icon-jianshen
  • 篮球
    .icon-lanqiu
  • 垒球
    .icon-leiqiu
  • 排球
    .icon-paiqiu
  • 乒乓球
    .icon-pingpangqiu
  • 柔道
    .icon-roudao
  • 跆拳道
    .icon-taiquandao
  • 体操
    .icon-ticao
  • 网球
    .icon-wangqiu
  • 武术
    .icon-wushu
  • 舞蹈
    .icon-wudao
  • 游泳
    .icon-youyong
  • 羽毛球
    .icon-yumaoqiu
  • 运动默认图标-20
    .icon-yundongmorentubiao20
  • 桌球
    .icon-zhuoqiu
  • 足球
    .icon-zuqiu

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-wo1
  • 地图
    #icon-ditu
  • 活动
    #icon-huodong1
  • 素养树
    #icon-suyangshu
  • 首页
    #icon-shouye2
  • tag_faces
    #icon-tagfaces
  • 消息
    #icon-xiaoxi
  • 代办
    #icon-daiban
  • 首页
    #icon-shouye1
  • 通知公告
    #icon-tongzhigonggao
  • 奖学金
    #icon-jiangxuejin
  • 志愿服务
    #icon-qiyeyunicon-
  • huodong
    #icon-huodong
  • wo
    #icon-wo
  • xiaoyuanditu
    #icon-xiaoyuanditu
  • shouye
    #icon-shouye
  • 课程
    #icon-kecheng
  • 报名进度
    #icon-baomingjindu
  • 课程辅导
    #icon-kechengfudao
  • 一键选房
    #icon-yijianxuanfang
  • 选房
    #icon-xuanfang
  • 我的团队
    #icon-wodetuandui
  • 通知公告
    #icon-tongzhigonggao1
  • 个人中心
    #icon-gerenzhongxin1
  • 消息
    #icon-xiaoxi1
  • 招聘种类
    #icon-zhaopinzhonglei1
  • icon_abroad1
    #icon-icon_abroad
  • icon_study1
    #icon-icon_study
  • icon_master1
    #icon-icon_master
  • icon_result1
    #icon-icon_result
  • shuaxin2
    #icon-shuaxin1
  • 新进-说明
    #icon-xinjin-shuoming
  • 新进-首页
    #icon-xinjin-shouye
  • 新进-流程跟踪
    #icon-xinjin-liuchenggenzong
  • 我的信息
    #icon-wodexinxi
  • 请假审核(选中)
    #icon-qingjiashenhexuanzhong
  • 请假(选中)
    #icon-qingjiaxuanzhong
  • 请假
    #icon-qingjia
  • 销假(选中)
    #icon-xiaojiaxuanzhong
  • 我的信息(选中)
    #icon-wodexinxixuanzhong
  • 变更历史(选中)
    #icon-biangenglishixuanzhong
  • 请假审核
    #icon-qingjiashenhe
  • 变更历史
    #icon-biangenglishi
  • 销假
    #icon-xiaojia
  • 销假审核(选中)
    #icon-xiaojiashenhexuanzhong
  • 销假申请
    #icon-xiaojiashenqing
  • wechat
    #icon-wechat1
  • qq0
    #icon-qq0
  • img error
    #icon-imgerror
  • icon-correct
    #icon-icon-correct
  • 采购合同待支付统计
    #icon-caigouhetongdaizhifutongji
  • 采购项目分配情况
    #icon-caigouxiangmufenpeiqingkuang
  • 采购项目整体情况
    #icon-caigouxiangmuzhengtiqingkuang
  • 采购执行进度情况
    #icon-caigouzhihangjinduqingkuang
  • 延期项目进度统计
    #icon-yanqixiangmujindutongji
  • 经费来源待支付统计
    #icon-jingfeilaiyuandaizhifutongji
  • 重点项目执行统计
    #icon-zhongdianxiangmuzhihangtongji
  • 采购预算部门支付预警
    #icon-caigouyusuanbumenzhifuyujing
  • 经费来源执行统计
    #icon-jingfeilaiyuanzhihangtongji
  • 采购执行成效情况
    #icon-caigouzhihangchengxiaoqingkuang
  • 采购执行预警情况
    #icon-caigouzhihangyujingqingkuang
  • 年度项目执行统计
    #icon-nianduxiangmuzhihangtongji
  • img
    #icon-img
  • 筛选
    #icon-shaixuan
  • 人民币专用账户
    #icon-renminbizhuanyong
  • xlsx
    #icon-xlsx
  • pdf
    #icon-pdf
  • zip
    #icon-zip
  • doc
    #icon-doc
  • ppt
    #icon-ppt
  • others
    #icon-others
  • drag
    #icon-drag
  • 即将到期
    #icon-jijiangdaoqi
  • 逾期未完成
    #icon-yuqiweiwancheng
  • 未完成
    #icon-weiwancheng
  • 未审核
    #icon-weishenhe
  • 完成
    #icon-wancheng
  • 逾期完成
    #icon-yuqiwancheng
  • male
    #icon-male
  • female
    #icon-female
  • 通知
    #icon-tongzhi
  • 二维码
    #icon-erweima
  • 浏览
    #icon-liulan
  • run
    #icon-run
  • 银行卡管理
    #icon-bank
  • date_range
    #icon-daterange
  • gengduo
    #icon-gengduo
  • erroroutline
    #icon-erroroutline
  • wifi
    #icon-wifi
  • description
    #icon-description
  • import_contacts
    #icon-importcontacts
  • local_grocery_store
    #icon-localgrocerystore
  • local_hospital
    #icon-localhospital
  • opacity
    #icon-opacity
  • pages
    #icon-pages
  • restaurant_menu
    #icon-restaurantmenu
  • 闪电
    #icon-shandian
  • 键盘
    #icon-jianpan
  • 语音
    #icon-yuyin
  • search
    #icon-search
  • keyboard_arrow_down
    #icon-keyboardarrowdown
  • keyboard_arrow_left
    #icon-keyboardarrowleft
  • keyboard_arrow_right
    #icon-keyboardarrowright
  • keyboard_arrow_up
    #icon-keyboardarrowup
  • down_1
    #icon-down1
  • phone
    #icon-phone
  • place
    #icon-place
  • remove_circle
    #icon-removecircle
  • 发布招领
    #icon-fabuzhaoling
  • 我发布的
    #icon-wofabude
  • 发布寻物
    #icon-fabuxunwu
  • 取消
    #icon-quxiao
  • 点点
    #icon-diandian
  • 日历模式-01
    #icon-rilimoshi-
  • 考完
    #icon-kaowan
  • 他人日程
    #icon-tarenricheng
  • 未考完
    #icon-weikaowan
  • 菜单
    #icon-caidan
  • 灯泡_亮
    #icon-dengpaoliang
  • 加号
    #icon-jiahao01
  • 添加
    #icon-tianjia
  • 设置
    #icon-shezhi
  • 地址
    #icon-dizhi
  • 刷新
    #icon-shuaxin
  • 闹钟
    #icon-naozhong
  • 备注
    #icon-beizhu
  • 闹钟
    #icon-naozhong1
  • 咨询区
    #icon-zixunqu
  • 我的咨询
    #icon-wodezixun
  • 常见问题
    #icon-changjianwenti
  • 我的咨询-1
    #icon-wodezixun-
  • 公共咨询
    #icon-gonggongzixun
  • 常见问题-1
    #icon-changjianwenti-
  • 咨询区-1
    #icon-zixunqu-
  • 公共咨询-1
    #icon-gonggongzixun-
  • 隔离问题
    #icon-geliwenti
  • 转移问题
    #icon-zhuanyiwenti
  • 回复问题
    #icon-huifuwenti
  • 查看全部
    #icon-chakanquanbu-copy
  • 别针
    #icon-biezhen
  • 回复
    #icon-huifu
  • delete
    #icon-delete
  • 收件箱
    #icon-shoujianxiang
  • 发件箱
    #icon-fajianxiang
  • 编辑
    #icon-bianji
  • 成功
    #icon-chenggong
  • 成功
    #icon-chenggong1
  • 返回
    #icon-fanhui
  • 返回
    #icon-back
  • 星星
    #icon-xingxing
  • 头像
    #icon-touxiang
  • 放大镜
    #icon-fangdajing
  • #icon-zan
  • 转推
    #icon-zhuantui
  • 评论
    #icon-pinglun
  • 电话
    #icon-dianhua
  • 联系人
    #icon-lianxiren
  • 时间
    #icon-shijian
  • 信息
    #icon-xinxi
  • 地点
    #icon-didian
  • 评论
    #icon-pinglun1
  • #icon-zan1
  • 转发
    #icon-zhuanfa
  • location_on
    #icon-locationon
  • message_line
    #icon-messageline
  • more
    #icon-more
  • phone_line
    #icon-phoneline
  • supervisor_account
    #icon-supervisoraccount
  • 五角星 (1)
    #icon-wujiaoxing1
  • call
    #icon-call
  • close
    #icon-close
  • edit
    #icon-edit
  • email
    #icon-email
  • event
    #icon-event
  • home
    #icon-home
  • insert_drive_file
    #icon-insertdrivefile
  • local_offer
    #icon-localoffer
  • 待办事宜icon
    #icon-daibanshiyiicon
  • 待阅事宜icon
    #icon-daiyueshiyiicon
  • 个人日程icon
    #icon-gerenrichengicon
  • 领导日程icon
    #icon-lingdaorichengicon
  • 申请状态icon
    #icon-shenqingzhuangtaiicon
  • 通讯录icon
    #icon-tongxunluicon
  • 通知公告icon
    #icon-tongzhigonggaoicon
  • 消息中心icon
    #icon-xiaoxizhongxinicon
  • 学校文件icon
    #icon-xuexiaowenjianicon
  • 已办事宜icon
    #icon-yibanshiyiicon
  • 已阅事宜icon
    #icon-yiyueshiyiicon
  • 周会表icon
    #icon-zhouhuibiaoicon
  • 手球-16
    #icon-shouqiu16
  • 默认图标
    #icon-morentubiao
  • 瑜伽
    #icon-yuqie
  • 棒球
    #icon-bangqiu
  • 壁球
    #icon-biqiu
  • 健身
    #icon-jianshen
  • 篮球
    #icon-lanqiu
  • 垒球
    #icon-leiqiu
  • 排球
    #icon-paiqiu
  • 乒乓球
    #icon-pingpangqiu
  • 柔道
    #icon-roudao
  • 跆拳道
    #icon-taiquandao
  • 体操
    #icon-ticao
  • 网球
    #icon-wangqiu
  • 武术
    #icon-wushu
  • 舞蹈
    #icon-wudao
  • 游泳
    #icon-youyong
  • 羽毛球
    #icon-yumaoqiu
  • 运动默认图标-20
    #icon-yundongmorentubiao20
  • 桌球
    #icon-zhuoqiu
  • 足球
    #icon-zuqiu

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>