• 总体态势
    
  • duigou
    
  • 粘贴
    
  • 插入水平线
    
  • 眼睛
    
  • 待办服务请求
    
  • 地点
    
  • 复制
    
  • 平台服务
    
  • 清除
    
  • 浏览
    
  • 电话
    
  • gantan
    
  • 评分卡管理
    
  • 公告
    
  • 搜索
    
  • 知识库
    
  • 倾斜
    
  • 列表
    
  • 向左滑动2
    
  • 事件触发
    
  • 添加
    
  • 五角星
    
  • 查看
    
  • 导出
    
  • 链接
    
  • 返回
    
  • 逾期
    
  • 持平
    
  • home
    
  • 评论
    
  • 收起
    
  • 登录
    
  • 下拉
    
  • 流程
    
  • 处理
    
  • 加粗
    
  • 全屏
    
  • 删除
    
  • 插入特殊符号
    
  • 图片
    
  • 评级
    
  • 撤销
    
  • 
  • 插入
    
  • 剪切 (2)
    
  • 知识库
    
  • 已接单
    
  • 区域
    
  • 评分五角星
    
  • 网络故障报修
    
  • 删除
    
  • 上传
    
  • 展开
    
  • 更多
    
  • 暂停
    
  • 订单缺省页-01
    
  • 撤回
    
  • 巡检
    
  • 逾期信修
    
  • 分类
    
  • 审核通过
    
  • 菜单
    
  • 时间选择
    
  • 打印
    
  • 人员接听链接添加
    
  • 断开链接
    
  • 热点事件管理
    
  • 我的消息_帖子
    
  • 系统管理
    
  • 排行
    
  • 关闭
    
  • 删除
    
  • 列表
    
  • 源码应用
    
  • 表格
    
  • 交易关闭
    
  • 删除线
    
  • 排班管理
    
  • 拼写检查
    
  • 资产管理
    
  • 评论次数
    
  • 录音
    
  • 报表
    
  • 待我处理的-工单
    
  • 修改
    
  • 审核
    
  • 新建工单
    
  • 审核
    
  • 修改
    
  • 运维
    
  • 开始
    
  • 我的
    
  • 巡检手册
    
  • 默认头像
    
  • 添加人员
    
  • 编辑
    
  • 通过
    
  • 变更设备
    
  • 运行月统计
    
  • 知识库
    
  • 编号列表
    
  • 下 拉
    
  • 正常
    
  • 多选项
    
  • 向左
    
  • 组织机构
    
  • 资源点运维
    
  • 报表
    
  • 向左
    
  • 已逾期
    
  • 组织角色
    
  • 向左
    
  • 问好
    
  • 用户详情下拉
    
  • 巡检
    
  • 报表管理
    
  • 问好
    
  • 电话 (信号)
    
  • 电话 (音符)
    
  • 电话 (置前)
    
  • 电话 (置后)
    
  • 电话 (信号)
    
  • 电话 (接通)
    
  • 电话 (拒接)
    
  • 知识库
    
  • 展开
    
  • 周统计
    
  • 事件管理
    
  • 事件管理
    
  • 问好
    
  • 默认头像
    
  • 问题反馈
    
  • icon_yulan
    
  • icon_updown
    
  • 默认头像
    
  • 通话中
    
  • 错误
    
  • 增长
    
  • 系统管理
    
  • 下降
    
  • icon_weizuo
    
  • 即将
    
  • 成功
    
  • 失败 (1)
    
  • 告警_填充
    
  • 2
    
  • 3
    
  • Shape
    
  • 10
    
  • 02
    
  • 隐藏
    
  • Shape
    
  • bitian
    
  • duoxuan
    
  • fangdajing
    
  • nav01
    
  • nav02
    
  • nav03
    
  • nav04
    
  • nav05
    
  • nav07 copy
    
  • rili
    
  • shanchu
    
  • nav06
    
  • nav07
    
  • shanchu02
    
  • xiala01
    
  • xinzeng
    
  • xiala02
    
  • 关系图
    
  • 发布管理
    
  • 流程库管理
    
  • 工作台
    
  • 报表管理
    
  • 排班管理
    
  • 知识库
    
  • 系统设置
    
  • 巡检管理
    
  • 分页向右
    
  • 关系图
    
  • 关闭
    
  • 放大镜
    
  • 工作台
    
  • 监控列表
    
  • 监控图标
    
  • 解释
    
  • 垃圾桶
    
  • 分页向左
    
  • 默认
    
  • 留言列表
    
  • 切换右
    
  • 切换左
    
  • 回访
    
  • 上拉2
    
  • 日期
    
  • 下拉2
    
  • 系统设置
    
  • 下载
    
  • 向右2
    
  • 向左2
    
  • 下拉
    
  • 新建工单
    
  • 预览
    
  • 通话列表
    
  • 报障转换
    
  • Group 14
    
  • 首页
    
  • 多选
    
  • 知识库
    
  • 转发
    
  • 馆藏重复
    
  • 督办任务
    
  • 向左2
    
  • 向左2
    

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-zongtitaishi
  • duigou
    .icon-duigou
  • 粘贴
    .icon-zhantie
  • 插入水平线
    .icon-charushuipingxian
  • 眼睛
    .icon-yanjing
  • 待办服务请求
    .icon-13
  • 地点
    .icon-icon32209
  • 复制
    .icon-fuzhi
  • 平台服务
    .icon-iconptfw
  • 清除
    .icon-qingchu
  • 浏览
    .icon-iconfontshu
  • 电话
    .icon-iconfontdianhua
  • gantan
    .icon-gantan
  • 评分卡管理
    .icon-pingfenqiaguanli
  • 公告
    .icon-gonggao
  • 搜索
    .icon-search
  • 知识库
    .icon-zhishiku1
  • 倾斜
    .icon-qingxie
  • 列表
    .icon-liebiao1
  • 向左滑动2
    .icon-xiangzuohuadong2
  • 事件触发
    .icon-shijianhongfa
  • 添加
    .icon-tianjia
  • 五角星
    .icon-start
  • 查看
    .icon-iconmingchengpaixu65-copy
  • 导出
    .icon-daochu
  • 链接
    .icon-link
  • 返回
    .icon-fanhui
  • 逾期
    .icon-yuqi
  • 持平
    .icon-chiping
  • home
    .icon-home
  • 评论
    .icon-pinglun
  • 收起
    .icon-qiepian44
  • 登录
    .icon-denglu
  • 下拉
    .icon-xiala
  • 流程
    .icon-liucheng
  • 处理
    .icon-401
  • 加粗
    .icon-jiacu
  • 全屏
    .icon-quanping
  • 删除
    .icon-shanchu
  • 插入特殊符号
    .icon-charuteshufuhao
  • 图片
    .icon-font29
  • 评级
    .icon-pingji-copy
  • 撤销
    .icon-chexiao
  • .icon-false-circle
  • 插入
    .icon-plus-insert
  • 剪切 (2)
    .icon-jianqie
  • 知识库
    .icon-zhishiku3
  • 已接单
    .icon-yijiedan
  • 区域
    .icon-quyu
  • 评分五角星
    .icon-pingfenwujiaoxing-copy
  • 网络故障报修
    .icon-xiangzhilusuoxudu
  • 删除
    .icon-shanchu1
  • 上传
    .icon-shangchuan
  • 展开
    .icon-zhankai
  • 更多
    .icon-gengduo
  • 暂停
    .icon-zanting
  • 订单缺省页-01
    .icon-dingdanqueshengye-
  • 撤回
    .icon-chehui
  • 巡检
    .icon-xunjian
  • 逾期信修
    .icon-yuqixinxiu
  • 分类
    .icon-fenlei
  • 审核通过
    .icon-shenhetongguo
  • 菜单
    .icon-caidan
  • 时间选择
    .icon-shijianxuanze
  • 打印
    .icon-ccgl-dayinmubanguanli-7
  • 人员接听链接添加
    .icon-renyuanjietinglianjietianjia
  • 断开链接
    .icon-duankailianjie
  • 热点事件管理
    .icon-redianshijianguanli
  • 我的消息_帖子
    .icon-wodexiaoxi_tiezi
  • 系统管理
    .icon-system
  • 排行
    .icon-paihang
  • 关闭
    .icon-guanbi
  • 删除
    .icon-shanchu2
  • 列表
    .icon-liebiao
  • 源码应用
    .icon-yuanmayingyong
  • 表格
    .icon-biaoge
  • 交易关闭
    .icon-jiaoyiguanbi
  • 删除线
    .icon-shanchuxian
  • 排班管理
    .icon-paibanguanli
  • 拼写检查
    .icon-pinxiejiancha
  • 资产管理
    .icon-zichanguanli
  • 评论次数
    .icon-pingluncishu
  • 录音
    .icon-luyin
  • 报表
    .icon-baobiao
  • 待我处理的-工单
    .icon-daiwochulide
  • 修改
    .icon-xiugai
  • 审核
    .icon-shenhe
  • 新建工单
    .icon-xinjiangongdan
  • 审核
    .icon-shenhebuzhou
  • 修改
    .icon-xiugai1
  • 运维
    .icon-yunwei
  • 开始
    .icon-ziyuan
  • 我的
    .icon-wode3
  • 巡检手册
    .icon-xunjianshouce
  • 默认头像
    .icon-morentouxiang
  • 添加人员
    .icon-tianjiarenyuan
  • 编辑
    .icon-bianji
  • 通过
    .icon-tongguo
  • 变更设备
    .icon-biangengshebei
  • 运行月统计
    .icon-yunhangyuetongji
  • 知识库
    .icon-zhishiku
  • 编号列表
    .icon-bianhaoliebiao
  • 下 拉
    .icon-xiala-copy
  • 正常
    .icon-zhengchang
  • 多选项
    .icon-xuanze
  • 向左
    .icon-xiangzuo
  • 组织机构
    .icon-zuzhijigou
  • 资源点运维
    .icon-ziyuandianyunwei
  • 报表
    .icon-baobiao-
  • 向左
    .icon-right
  • 已逾期
    .icon-yiyuqi
  • 组织角色
    .icon-zuzhijiaose
  • 向左
    .icon-left
  • 问好
    .icon-wenhao1
  • 用户详情下拉
    .icon-xiala1
  • 巡检
    .icon-xunjian1
  • 报表管理
    .icon-baobiaoguanli
  • 问好
    .icon-wenhao
  • 电话 (信号)
    .icon-dianhuaxinhao
  • 电话 (音符)
    .icon-dianhuayinfu
  • 电话 (置前)
    .icon-dianhuazhiqian
  • 电话 (置后)
    .icon-dianhuazhihou
  • 电话 (信号)
    .icon-dianhuaxinhao1
  • 电话 (接通)
    .icon-dianhuajietong
  • 电话 (拒接)
    .icon-dianhuajujie
  • 知识库
    .icon-zhishiku2
  • 展开
    .icon-mulu
  • 周统计
    .icon-zhoutongji
  • 事件管理
    .icon-shijianguanli
  • 事件管理
    .icon-shijianguanli1
  • 问好
    .icon-mendian-
  • 默认头像
    .icon-morentouxiang1
  • 问题反馈
    .icon-wentifankui
  • icon_yulan
    .icon-icon_yulan
  • icon_updown
    .icon-icon_updown
  • 默认头像
    .icon-morentouxiang2
  • 通话中
    .icon-tonghuazhong
  • 错误
    .icon-cuowu
  • 增长
    .icon-up
  • 系统管理
    .icon-xitongguanli
  • 下降
    .icon-xiajiang
  • icon_weizuo
    .icon-icon_weizuo
  • 即将
    .icon-jijiang
  • 成功
    .icon-chenggong
  • 失败 (1)
    .icon-shibai
  • 告警_填充
    .icon-gaojing
  • 2
    .icon-icon-test
  • 3
    .icon-icon-test1
  • Shape
    .icon-Shape
  • 10
    .icon-icon-test2
  • 02
    .icon-icon-test3
  • 隐藏
    .icon-yincang
  • Shape
    .icon-Shape1
  • bitian
    .icon-bitian
  • duoxuan
    .icon-duoxuan
  • fangdajing
    .icon-fangdajing
  • nav01
    .icon-nav
  • nav02
    .icon-nav1
  • nav03
    .icon-nav2
  • nav04
    .icon-nav3
  • nav05
    .icon-nav4
  • nav07 copy
    .icon-navcopy
  • rili
    .icon-rili
  • shanchu
    .icon-shanchu3
  • nav06
    .icon-nav5
  • nav07
    .icon-nav6
  • shanchu02
    .icon-shanchu11
  • xiala01
    .icon-xiala2
  • xinzeng
    .icon-xinzeng
  • xiala02
    .icon-xiala11
  • 关系图
    .icon-guanxitu
  • 发布管理
    .icon-fabuguanli
  • 流程库管理
    .icon-liuchengkuguanli
  • 工作台
    .icon-gongzuotai
  • 报表管理
    .icon-baobiaoguanli1
  • 排班管理
    .icon-paibanguanli1
  • 知识库
    .icon-zhishiku4
  • 系统设置
    .icon-xitongshezhi
  • 巡检管理
    .icon-xunjianguanli
  • 分页向右
    .icon-fenyexiangyou
  • 关系图
    .icon-guanxitu1
  • 关闭
    .icon-guanbi1
  • 放大镜
    .icon-fangdajing1
  • 工作台
    .icon-gongzuotai1
  • 监控列表
    .icon-jiankongliebiao
  • 监控图标
    .icon-jiankongtubiao
  • 解释
    .icon-jieshi
  • 垃圾桶
    .icon-lajitong
  • 分页向左
    .icon-fenyexiangzuo
  • 默认
    .icon-moren
  • 留言列表
    .icon-liuyanliebiao
  • 切换右
    .icon-qiehuanyou
  • 切换左
    .icon-qiehuanzuo
  • 回访
    .icon-huifang
  • 上拉2
    .icon-shangla
  • 日期
    .icon-riqi
  • 下拉2
    .icon-xiala3
  • 系统设置
    .icon-xitongshezhi1
  • 下载
    .icon-xiazai
  • 向右2
    .icon-xiangyou
  • 向左2
    .icon-xiangzuo1
  • 下拉
    .icon-xiala12
  • 新建工单
    .icon-xinjiangongdan1
  • 预览
    .icon-yulan
  • 通话列表
    .icon-tonghualiebiao
  • 报障转换
    .icon-baozhangzhuanhuan
  • Group 14
    .icon-Group
  • 首页
    .icon-shouye
  • 多选
    .icon-duoxuan1
  • 知识库
    .icon-zhishiku11
  • 转发
    .icon-zhuanfa
  • 馆藏重复
    .icon-guancangzhongfu
  • 督办任务
    .icon-dubanrenwu
  • 向左2
    .icon-xiangxia
  • 向左2
    .icon-xiangshang

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-zongtitaishi
  • duigou
    #icon-duigou
  • 粘贴
    #icon-zhantie
  • 插入水平线
    #icon-charushuipingxian
  • 眼睛
    #icon-yanjing
  • 待办服务请求
    #icon-13
  • 地点
    #icon-icon32209
  • 复制
    #icon-fuzhi
  • 平台服务
    #icon-iconptfw
  • 清除
    #icon-qingchu
  • 浏览
    #icon-iconfontshu
  • 电话
    #icon-iconfontdianhua
  • gantan
    #icon-gantan
  • 评分卡管理
    #icon-pingfenqiaguanli
  • 公告
    #icon-gonggao
  • 搜索
    #icon-search
  • 知识库
    #icon-zhishiku1
  • 倾斜
    #icon-qingxie
  • 列表
    #icon-liebiao1
  • 向左滑动2
    #icon-xiangzuohuadong2
  • 事件触发
    #icon-shijianhongfa
  • 添加
    #icon-tianjia
  • 五角星
    #icon-start
  • 查看
    #icon-iconmingchengpaixu65-copy
  • 导出
    #icon-daochu
  • 链接
    #icon-link
  • 返回
    #icon-fanhui
  • 逾期
    #icon-yuqi
  • 持平
    #icon-chiping
  • home
    #icon-home
  • 评论
    #icon-pinglun
  • 收起
    #icon-qiepian44
  • 登录
    #icon-denglu
  • 下拉
    #icon-xiala
  • 流程
    #icon-liucheng
  • 处理
    #icon-401
  • 加粗
    #icon-jiacu
  • 全屏
    #icon-quanping
  • 删除
    #icon-shanchu
  • 插入特殊符号
    #icon-charuteshufuhao
  • 图片
    #icon-font29
  • 评级
    #icon-pingji-copy
  • 撤销
    #icon-chexiao
  • #icon-false-circle
  • 插入
    #icon-plus-insert
  • 剪切 (2)
    #icon-jianqie
  • 知识库
    #icon-zhishiku3
  • 已接单
    #icon-yijiedan
  • 区域
    #icon-quyu
  • 评分五角星
    #icon-pingfenwujiaoxing-copy
  • 网络故障报修
    #icon-xiangzhilusuoxudu
  • 删除
    #icon-shanchu1
  • 上传
    #icon-shangchuan
  • 展开
    #icon-zhankai
  • 更多
    #icon-gengduo
  • 暂停
    #icon-zanting
  • 订单缺省页-01
    #icon-dingdanqueshengye-
  • 撤回
    #icon-chehui
  • 巡检
    #icon-xunjian
  • 逾期信修
    #icon-yuqixinxiu
  • 分类
    #icon-fenlei
  • 审核通过
    #icon-shenhetongguo
  • 菜单
    #icon-caidan
  • 时间选择
    #icon-shijianxuanze
  • 打印
    #icon-ccgl-dayinmubanguanli-7
  • 人员接听链接添加
    #icon-renyuanjietinglianjietianjia
  • 断开链接
    #icon-duankailianjie
  • 热点事件管理
    #icon-redianshijianguanli
  • 我的消息_帖子
    #icon-wodexiaoxi_tiezi
  • 系统管理
    #icon-system
  • 排行
    #icon-paihang
  • 关闭
    #icon-guanbi
  • 删除
    #icon-shanchu2
  • 列表
    #icon-liebiao
  • 源码应用
    #icon-yuanmayingyong
  • 表格
    #icon-biaoge
  • 交易关闭
    #icon-jiaoyiguanbi
  • 删除线
    #icon-shanchuxian
  • 排班管理
    #icon-paibanguanli
  • 拼写检查
    #icon-pinxiejiancha
  • 资产管理
    #icon-zichanguanli
  • 评论次数
    #icon-pingluncishu
  • 录音
    #icon-luyin
  • 报表
    #icon-baobiao
  • 待我处理的-工单
    #icon-daiwochulide
  • 修改
    #icon-xiugai
  • 审核
    #icon-shenhe
  • 新建工单
    #icon-xinjiangongdan
  • 审核
    #icon-shenhebuzhou
  • 修改
    #icon-xiugai1
  • 运维
    #icon-yunwei
  • 开始
    #icon-ziyuan
  • 我的
    #icon-wode3
  • 巡检手册
    #icon-xunjianshouce
  • 默认头像
    #icon-morentouxiang
  • 添加人员
    #icon-tianjiarenyuan
  • 编辑
    #icon-bianji
  • 通过
    #icon-tongguo
  • 变更设备
    #icon-biangengshebei
  • 运行月统计
    #icon-yunhangyuetongji
  • 知识库
    #icon-zhishiku
  • 编号列表
    #icon-bianhaoliebiao
  • 下 拉
    #icon-xiala-copy
  • 正常
    #icon-zhengchang
  • 多选项
    #icon-xuanze
  • 向左
    #icon-xiangzuo
  • 组织机构
    #icon-zuzhijigou
  • 资源点运维
    #icon-ziyuandianyunwei
  • 报表
    #icon-baobiao-
  • 向左
    #icon-right
  • 已逾期
    #icon-yiyuqi
  • 组织角色
    #icon-zuzhijiaose
  • 向左
    #icon-left
  • 问好
    #icon-wenhao1
  • 用户详情下拉
    #icon-xiala1
  • 巡检
    #icon-xunjian1
  • 报表管理
    #icon-baobiaoguanli
  • 问好
    #icon-wenhao
  • 电话 (信号)
    #icon-dianhuaxinhao
  • 电话 (音符)
    #icon-dianhuayinfu
  • 电话 (置前)
    #icon-dianhuazhiqian
  • 电话 (置后)
    #icon-dianhuazhihou
  • 电话 (信号)
    #icon-dianhuaxinhao1
  • 电话 (接通)
    #icon-dianhuajietong
  • 电话 (拒接)
    #icon-dianhuajujie
  • 知识库
    #icon-zhishiku2
  • 展开
    #icon-mulu
  • 周统计
    #icon-zhoutongji
  • 事件管理
    #icon-shijianguanli
  • 事件管理
    #icon-shijianguanli1
  • 问好
    #icon-mendian-
  • 默认头像
    #icon-morentouxiang1
  • 问题反馈
    #icon-wentifankui
  • icon_yulan
    #icon-icon_yulan
  • icon_updown
    #icon-icon_updown
  • 默认头像
    #icon-morentouxiang2
  • 通话中
    #icon-tonghuazhong
  • 错误
    #icon-cuowu
  • 增长
    #icon-up
  • 系统管理
    #icon-xitongguanli
  • 下降
    #icon-xiajiang
  • icon_weizuo
    #icon-icon_weizuo
  • 即将
    #icon-jijiang
  • 成功
    #icon-chenggong
  • 失败 (1)
    #icon-shibai
  • 告警_填充
    #icon-gaojing
  • 2
    #icon-icon-test
  • 3
    #icon-icon-test1
  • Shape
    #icon-Shape
  • 10
    #icon-icon-test2
  • 02
    #icon-icon-test3
  • 隐藏
    #icon-yincang
  • Shape
    #icon-Shape1
  • bitian
    #icon-bitian
  • duoxuan
    #icon-duoxuan
  • fangdajing
    #icon-fangdajing
  • nav01
    #icon-nav
  • nav02
    #icon-nav1
  • nav03
    #icon-nav2
  • nav04
    #icon-nav3
  • nav05
    #icon-nav4
  • nav07 copy
    #icon-navcopy
  • rili
    #icon-rili
  • shanchu
    #icon-shanchu3
  • nav06
    #icon-nav5
  • nav07
    #icon-nav6
  • shanchu02
    #icon-shanchu11
  • xiala01
    #icon-xiala2
  • xinzeng
    #icon-xinzeng
  • xiala02
    #icon-xiala11
  • 关系图
    #icon-guanxitu
  • 发布管理
    #icon-fabuguanli
  • 流程库管理
    #icon-liuchengkuguanli
  • 工作台
    #icon-gongzuotai
  • 报表管理
    #icon-baobiaoguanli1
  • 排班管理
    #icon-paibanguanli1
  • 知识库
    #icon-zhishiku4
  • 系统设置
    #icon-xitongshezhi
  • 巡检管理
    #icon-xunjianguanli
  • 分页向右
    #icon-fenyexiangyou
  • 关系图
    #icon-guanxitu1
  • 关闭
    #icon-guanbi1
  • 放大镜
    #icon-fangdajing1
  • 工作台
    #icon-gongzuotai1
  • 监控列表
    #icon-jiankongliebiao
  • 监控图标
    #icon-jiankongtubiao
  • 解释
    #icon-jieshi
  • 垃圾桶
    #icon-lajitong
  • 分页向左
    #icon-fenyexiangzuo
  • 默认
    #icon-moren
  • 留言列表
    #icon-liuyanliebiao
  • 切换右
    #icon-qiehuanyou
  • 切换左
    #icon-qiehuanzuo
  • 回访
    #icon-huifang
  • 上拉2
    #icon-shangla
  • 日期
    #icon-riqi
  • 下拉2
    #icon-xiala3
  • 系统设置
    #icon-xitongshezhi1
  • 下载
    #icon-xiazai
  • 向右2
    #icon-xiangyou
  • 向左2
    #icon-xiangzuo1
  • 下拉
    #icon-xiala12
  • 新建工单
    #icon-xinjiangongdan1
  • 预览
    #icon-yulan
  • 通话列表
    #icon-tonghualiebiao
  • 报障转换
    #icon-baozhangzhuanhuan
  • Group 14
    #icon-Group
  • 首页
    #icon-shouye
  • 多选
    #icon-duoxuan1
  • 知识库
    #icon-zhishiku11
  • 转发
    #icon-zhuanfa
  • 馆藏重复
    #icon-guancangzhongfu
  • 督办任务
    #icon-dubanrenwu
  • 向左2
    #icon-xiangxia
  • 向左2
    #icon-xiangshang

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>