• 分享
    
  • 地球
    
  • 接待
    
  • 行政执法文书
    
  • 特点_闪电发货
    
  • 分期-通用
    
  • 圆点中
    
  • 圆点小
    
  • 办公应用
    
  • 时间
    
  • 管理与监控
    
  • 规划
    
  • 首页
    
  • 向左2
    
  • 向右2
    
  • 信息登记
    
  • 更多
    
  • 储备库
    
  • 发布
    
  • 页面
    
  • 308上一页、后退、返回-圆框
    
  • 309下一页、前进、查看更多-圆框
    
  • 出差
    
  • 附件
    
  • 任务中心
    
  • 链接
    
  • 隐藏
    
  • 时间
    
  • 流程
    
  • 发文
    
  • 收文 (1)
    
  • 群组
    
  • 政策
    
  • 灯泡
    
  • 
  • 资讯
    
  • 档案盒
    
  • 推出
    
  • 向上d
    
  • 向下d
    
  • 云数据
    
  • AK-YK前进
    
  • AK-YK返回
    
  • 搜索
    
  • 汽车
    
  • 资源开发与测绘
    
  • 城市
    
  • 文件夹
    
  • 播放
    
  • 平台管理
    
  • 分屏
    
  • 删除
    
  • 笔记本电脑
    
  • 保存
    
  • 电脑
    
  • 文本
    
  • 办公包
    
  • 文件夹
    
  • 管理员认证
    
  • 管理员搜索
    
  • 水表
    
  • 页面流
    
  • 中控
    
  • 购物袋
    
  • 闪光灯
    
  • 运算操作
    
  • 主题_衣服
    
  • 表格
    
  • 层级
    
  • 等于
    
  • 介绍信息
    
  • 灵感
    
  • 删除
    
  • 全局设置
    
  • 
    图文
    
  • 页面框架
    
  • 应用APP
    
  • 箭头_向右两次
    
  • 箭头_向左两次
    
  • 账单_详情
    
  • 账单-完成
    
  • 成长
    
  • 短信
    
  • 个人头像
    
  • 签到
    
  • 群组
    
  • 收藏
    
  • 树状图
    
  • 云上传
    
  • 云下载
    
  • 包裹_打包
    
  • 包裹_盒子
    
  • 包裹_收纳盒
    
  • 地点定位
    
  • 地图
    
  • 地图_定位
    
  • 包裹
    
  • 服务
    
  • 监控
    
  • 集包
    
  • 建筑
    
  • 物流大脑
    
  • 新闻
    
  • 通知中心
    
  • 登出
    
  • 眼睛_显示
    
  • 配置
    
  • 系统参数
    
  • 请假
    
  • 建设-67
    
  • 归档
    
  • 外出
    
  • 地块
    
  • 同步
    
  • 打印
    
  • 预览
    
  • 退出
    
  • 取回
    
  • 数据
    
  • 组件
    
  • 新闻
    
  • 测试
    
  • 编辑
    
  • 个人门户
    
  • 综合测评
    
  • 置换
    
  • 资产
    
  • 文件-发送文件
    
  • 物品-记事本
    
  • 文件-收回文件
    
  • 眼睛
    
  • 加班
    
  • 文件
    
  • 已办
    
  • 审批
    
  • 预审报件
    
  • 文件-退回文件
    
  • 文件-文件通过
    
  • 灯泡
    
  • 图表
    
  • 会议
    
  • 报销
    
  • 表单
    
  • 文字
    
  • 综合
    
  • 时间
    
  • 审批
    
  • 树型
    
  • 全屏
    
  • 项目管理 2
    
  • 应用 触发
    
  • 公务
    
  • 下载
    
  • 重置
    
  • 风险
    
  • 记事本
    
  • 执法队伍管理
    
  • 信息
    
  • 运维管理
    
  • gis_一张图管理
    
  • 密码
    
  • 用户名
    
  • yonghu
    
  • login
    
  • 新建任务
    
  • 首页
    
  • poweroff
    
  • appstore
    
  • 异常
    
  • 已办
    
  • 安全_line
    
  • 爱心_line
    
  • 编辑_line
    
  • 帮助_line
    
  • 播放记录_line
    
  • 分享_line
    
  • 点赞_line
    
  • 订单_line
    
  • 定位_line
    
  • 地图_line
    
  • 男_line
    
  • 删除_line
    
  • 下载_line
    
  • 我的_line
    
  • 收藏_line
    
  • 消息_line
    
  • 增加_line
    
  • 指纹_line
    
  • 返 回
    
  • 返 回
    
  • 待办
    
  • 印章
    
  • 任务中心
    
  • 列表排列
    
  • 保存
    
  • 数据分析
    
  • 标签
    
  • 第三方借钱
    
  • OA
    
  • 云_数据库_jurassic
    
  • 会议
    
  • 语言
    
  • 待审批审核审查_操作_jurassic
    
  • 上传_line
    
  • 按钮组
    
  • 颜色字段
    
  • 电 话
    
  • 收藏
    
  • 安全
    

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-fenxiang1
  • 地球
    .icon-diqiu
  • 接待
    .icon-icon
  • 行政执法文书
    .icon--zhifajiancha
  • 特点_闪电发货
    .icon-tedianshandianfahuo
  • 分期-通用
    .icon-tongyong
  • 圆点中
    .icon-yuandianzhong
  • 圆点小
    .icon-yuandianxiao
  • 办公应用
    .icon-artboard10
  • 时间
    .icon-shijian1
  • 管理与监控
    .icon--zongheguankong
  • 规划
    .icon--guihuayizhangtu
  • 首页
    .icon-shouye1
  • 向左2
    .icon-xiangzuo2
  • 向右2
    .icon-xiangyou2
  • 信息登记
    .icon--budongchandengji
  • 更多
    .icon-gengduo-2
  • 储备库
    .icon--tudichubei
  • 发布
    .icon-fabu
  • 页面
    .icon-yemian
  • 308上一页、后退、返回-圆框
    .icon-shangyiyehoutuifanhui-yuankuang
  • 309下一页、前进、查看更多-圆框
    .icon-xiayiyeqianjinchakangengduo-yuankuang
  • 出差
    .icon-chucha
  • 附件
    .icon-fujian
  • 任务中心
    .icon-icon-test
  • 链接
    .icon-lianjie
  • 隐藏
    .icon-yincang
  • 时间
    .icon-shijian
  • 流程
    .icon-liucheng
  • 发文
    .icon-fawen
  • 收文 (1)
    .icon-shouwen
  • 群组
    .icon-qunzu
  • 政策
    .icon-zhengce
  • 灯泡
    .icon-dengpao1
  • .icon-qian
  • 资讯
    .icon-zixun
  • 档案盒
    .icon--danganxitong
  • 推出
    .icon-tuichu
  • 向上d
    .icon-icon-angle-double-top
  • 向下d
    .icon-icon-angle-double-bottom
  • 云数据
    .icon-yunshuju
  • AK-YK前进
    .icon-yk_qianjin
  • AK-YK返回
    .icon-yk_fanhui
  • 搜索
    .icon-sousuo
  • 汽车
    .icon-qiche
  • 资源开发与测绘
    .icon--cehui
  • 城市
    .icon-chengshi
  • 文件夹
    .icon-wenjianjia
  • 播放
    .icon-bofang
  • 平台管理
    .icon--shiquguihua
  • 分屏
    .icon-fenping
  • 删除
    .icon-shanchu2
  • 笔记本电脑
    .icon-bijibendiannao
  • 保存
    .icon-baocun
  • 电脑
    .icon-diannao
  • 文本
    .icon-wenben
  • 办公包
    .icon-bangongbao
  • 文件夹
    .icon-wenjianjia1
  • 管理员认证
    .icon-guanliyuanrenzheng
  • 管理员搜索
    .icon-guanliyuansousuo
  • 水表
    .icon-shuibiao
  • 页面流
    .icon-yemianliu
  • 中控
    .icon-zhongkong
  • 购物袋
    .icon-gouwudai
  • 闪光灯
    .icon-shanguangdeng
  • 运算操作
    .icon-yunsuancaozuo
  • 主题_衣服
    .icon-zhuti_yifu
  • 表格
    .icon-biaoge
  • 层级
    .icon-cengji
  • 等于
    .icon-dengyu
  • 介绍信息
    .icon-jieshaoxinxi
  • 灵感
    .icon-linggan
  • 删除
    .icon-shanchu1
  • 全局设置
    .icon-quanjushezhi
  • 图文
    .icon-tuwen
  • 页面框架
    .icon-yemiankuangjia
  • 应用APP
    .icon-yingyongAPP
  • 箭头_向右两次
    .icon-jiantou_xiangyouliangci
  • 箭头_向左两次
    .icon-jiantou_xiangzuoliangci
  • 账单_详情
    .icon-zhangdan_xiangqing
  • 账单-完成
    .icon-zhangdan-wancheng
  • 成长
    .icon-chengchang
  • 短信
    .icon-duanxin
  • 个人头像
    .icon-gerentouxiang
  • 签到
    .icon-qiandao
  • 群组
    .icon-qunzu1
  • 收藏
    .icon-shoucang1
  • 树状图
    .icon-shuzhuangtu
  • 云上传
    .icon-yunshangchuan
  • 云下载
    .icon-yunxiazai
  • 包裹_打包
    .icon-baoguo_dabao
  • 包裹_盒子
    .icon-baoguo_hezi
  • 包裹_收纳盒
    .icon-baoguo_shounahe
  • 地点定位
    .icon-didiandingwei
  • 地图
    .icon-ditu1
  • 地图_定位
    .icon-ditu_dingwei
  • 包裹
    .icon-baoguo
  • 服务
    .icon-fuwu
  • 监控
    .icon-jiankong
  • 集包
    .icon-jibao
  • 建筑
    .icon-jianzhu
  • 物流大脑
    .icon-wuliudanao
  • 新闻
    .icon-xinwen
  • 通知中心
    .icon-tongzhizhongxin
  • 登出
    .icon-dengchu
  • 眼睛_显示
    .icon-yanjing_xianshi
  • 配置
    .icon-peizhi
  • 系统参数
    .icon--tudizhengzhi
  • 请假
    .icon-qingjia
  • 建设-67
    .icon--zuofengjianshe
  • 归档
    .icon-guidang
  • 外出
    .icon-waichu
  • 地块
    .icon-dikuai
  • 同步
    .icon-tongbu
  • 打印
    .icon-dayin
  • 预览
    .icon-yulan
  • 退出
    .icon-tuichu1
  • 取回
    .icon-fanhui
  • 数据
    .icon-shuju
  • 组件
    .icon-zujian
  • 新闻
    .icon-xinwen2
  • 测试
    .icon--huiyanshoutuceshi
  • 编辑
    .icon-tianxie
  • 个人门户
    .icon-gerenmenhu
  • 综合测评
    .icon-zongheshiwu
  • 置换
    .icon-zhihuan
  • 资产
    .icon-zichan
  • 文件-发送文件
    .icon-wj-fswj
  • 物品-记事本
    .icon--my-job
  • 文件-收回文件
    .icon-wj-shwj
  • 眼睛
    .icon--huiyan
  • 加班
    .icon-jiaban
  • 文件
    .icon-wenjian
  • 已办
    .icon-complete
  • 审批
    .icon-shenpi
  • 预审报件
    .icon-yushenbaojian
  • 文件-退回文件
    .icon-wj-thwj
  • 文件-文件通过
    .icon-wj-wjtg
  • 灯泡
    .icon-dengpao
  • 图表
    .icon--danganchatu
  • 会议
    .icon-huiyi
  • 报销
    .icon-baoxiao
  • 表单
    .icon-biaodan
  • 文字
    .icon-wenzi
  • 综合
    .icon-zonghe
  • 时间
    .icon-shijian2
  • 审批
    .icon-shenpi1
  • 树型
    .icon-shuliebiao
  • 全屏
    .icon-quanping
  • 项目管理 2
    .icon-guanli
  • 应用 触发
    .icon-yingyongchufa
  • 公务
    .icon-renwu
  • 下载
    .icon-xiazai
  • 重置
    .icon-_zhongzhi-copy
  • 风险
    .icon-fengxian
  • 记事本
    .icon-jishiben3
  • 执法队伍管理
    .icon--zhifajianchayizhangtu
  • 信息
    .icon-xinxi
  • 运维管理
    .icon-yunweiguanli
  • gis_一张图管理
    .icon--yizhangtu
  • 密码
    .icon-mima
  • 用户名
    .icon-yonghuming
  • yonghu
    .icon-yonghu
  • login
    .icon-login
  • 新建任务
    .icon-xinjianrenwu
  • 首页
    .icon-shouye
  • poweroff
    .icon-poweroff
  • appstore
    .icon-appstore
  • 异常
    .icon-yichang
  • 已办
    .icon-icon_yiban
  • 安全_line
    .icon-anquan
  • 爱心_line
    .icon-aixin
  • 编辑_line
    .icon-bianji
  • 帮助_line
    .icon-bangzhu
  • 播放记录_line
    .icon-bofangjilu
  • 分享_line
    .icon-fenxiang
  • 点赞_line
    .icon-dianzan
  • 订单_line
    .icon-dingdan
  • 定位_line
    .icon-dingwei
  • 地图_line
    .icon-ditu
  • 男_line
    .icon-nan
  • 删除_line
    .icon-shanchu
  • 下载_line
    .icon-yunduanxiazai
  • 我的_line
    .icon-wode
  • 收藏_line
    .icon-shoucang
  • 消息_line
    .icon-xiaoxi
  • 增加_line
    .icon-zengjia
  • 指纹_line
    .icon-zhiwen
  • 返 回
    .icon-shangyibu
  • 返 回
    .icon-xiayibu
  • 待办
    .icon-icon_daiban
  • 印章
    .icon-zhang
  • 任务中心
    .icon-renwuzhongxin
  • 列表排列
    .icon--wangshangchenlie
  • 保存
    .icon-icon-baocun
  • 数据分析
    .icon-shujufenxi
  • 标签
    .icon-biaoqian
  • 第三方借钱
    .icon-disanfangjieqian
  • OA
    .icon-OA
  • 云_数据库_jurassic
    .icon--cloud-data
  • 会议
    .icon-huiyi1
  • 语言
    .icon-yuyan
  • 待审批审核审查_操作_jurassic
    .icon-jurassic_audit-wait
  • 上传_line
    .icon-yunduanshangchuan
  • 按钮组
    .icon-anniuzu
  • 颜色字段
    .icon-yanseziduan
  • 电 话
    .icon-dianhua
  • 收藏
    .icon-bianpinghuatubiaosheji-
  • 安全
    .icon-bianpinghuatubiaosheji-1

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-fenxiang1
  • 地球
    #icon-diqiu
  • 接待
    #icon-icon
  • 行政执法文书
    #icon--zhifajiancha
  • 特点_闪电发货
    #icon-tedianshandianfahuo
  • 分期-通用
    #icon-tongyong
  • 圆点中
    #icon-yuandianzhong
  • 圆点小
    #icon-yuandianxiao
  • 办公应用
    #icon-artboard10
  • 时间
    #icon-shijian1
  • 管理与监控
    #icon--zongheguankong
  • 规划
    #icon--guihuayizhangtu
  • 首页
    #icon-shouye1
  • 向左2
    #icon-xiangzuo2
  • 向右2
    #icon-xiangyou2
  • 信息登记
    #icon--budongchandengji
  • 更多
    #icon-gengduo-2
  • 储备库
    #icon--tudichubei
  • 发布
    #icon-fabu
  • 页面
    #icon-yemian
  • 308上一页、后退、返回-圆框
    #icon-shangyiyehoutuifanhui-yuankuang
  • 309下一页、前进、查看更多-圆框
    #icon-xiayiyeqianjinchakangengduo-yuankuang
  • 出差
    #icon-chucha
  • 附件
    #icon-fujian
  • 任务中心
    #icon-icon-test
  • 链接
    #icon-lianjie
  • 隐藏
    #icon-yincang
  • 时间
    #icon-shijian
  • 流程
    #icon-liucheng
  • 发文
    #icon-fawen
  • 收文 (1)
    #icon-shouwen
  • 群组
    #icon-qunzu
  • 政策
    #icon-zhengce
  • 灯泡
    #icon-dengpao1
  • #icon-qian
  • 资讯
    #icon-zixun
  • 档案盒
    #icon--danganxitong
  • 推出
    #icon-tuichu
  • 向上d
    #icon-icon-angle-double-top
  • 向下d
    #icon-icon-angle-double-bottom
  • 云数据
    #icon-yunshuju
  • AK-YK前进
    #icon-yk_qianjin
  • AK-YK返回
    #icon-yk_fanhui
  • 搜索
    #icon-sousuo
  • 汽车
    #icon-qiche
  • 资源开发与测绘
    #icon--cehui
  • 城市
    #icon-chengshi
  • 文件夹
    #icon-wenjianjia
  • 播放
    #icon-bofang
  • 平台管理
    #icon--shiquguihua
  • 分屏
    #icon-fenping
  • 删除
    #icon-shanchu2
  • 笔记本电脑
    #icon-bijibendiannao
  • 保存
    #icon-baocun
  • 电脑
    #icon-diannao
  • 文本
    #icon-wenben
  • 办公包
    #icon-bangongbao
  • 文件夹
    #icon-wenjianjia1
  • 管理员认证
    #icon-guanliyuanrenzheng
  • 管理员搜索
    #icon-guanliyuansousuo
  • 水表
    #icon-shuibiao
  • 页面流
    #icon-yemianliu
  • 中控
    #icon-zhongkong
  • 购物袋
    #icon-gouwudai
  • 闪光灯
    #icon-shanguangdeng
  • 运算操作
    #icon-yunsuancaozuo
  • 主题_衣服
    #icon-zhuti_yifu
  • 表格
    #icon-biaoge
  • 层级
    #icon-cengji
  • 等于
    #icon-dengyu
  • 介绍信息
    #icon-jieshaoxinxi
  • 灵感
    #icon-linggan
  • 删除
    #icon-shanchu1
  • 全局设置
    #icon-quanjushezhi
  • 图文
    #icon-tuwen
  • 页面框架
    #icon-yemiankuangjia
  • 应用APP
    #icon-yingyongAPP
  • 箭头_向右两次
    #icon-jiantou_xiangyouliangci
  • 箭头_向左两次
    #icon-jiantou_xiangzuoliangci
  • 账单_详情
    #icon-zhangdan_xiangqing
  • 账单-完成
    #icon-zhangdan-wancheng
  • 成长
    #icon-chengchang
  • 短信
    #icon-duanxin
  • 个人头像
    #icon-gerentouxiang
  • 签到
    #icon-qiandao
  • 群组
    #icon-qunzu1
  • 收藏
    #icon-shoucang1
  • 树状图
    #icon-shuzhuangtu
  • 云上传
    #icon-yunshangchuan
  • 云下载
    #icon-yunxiazai
  • 包裹_打包
    #icon-baoguo_dabao
  • 包裹_盒子
    #icon-baoguo_hezi
  • 包裹_收纳盒
    #icon-baoguo_shounahe
  • 地点定位
    #icon-didiandingwei
  • 地图
    #icon-ditu1
  • 地图_定位
    #icon-ditu_dingwei
  • 包裹
    #icon-baoguo
  • 服务
    #icon-fuwu
  • 监控
    #icon-jiankong
  • 集包
    #icon-jibao
  • 建筑
    #icon-jianzhu
  • 物流大脑
    #icon-wuliudanao
  • 新闻
    #icon-xinwen
  • 通知中心
    #icon-tongzhizhongxin
  • 登出
    #icon-dengchu
  • 眼睛_显示
    #icon-yanjing_xianshi
  • 配置
    #icon-peizhi
  • 系统参数
    #icon--tudizhengzhi
  • 请假
    #icon-qingjia
  • 建设-67
    #icon--zuofengjianshe
  • 归档
    #icon-guidang
  • 外出
    #icon-waichu
  • 地块
    #icon-dikuai
  • 同步
    #icon-tongbu
  • 打印
    #icon-dayin
  • 预览
    #icon-yulan
  • 退出
    #icon-tuichu1
  • 取回
    #icon-fanhui
  • 数据
    #icon-shuju
  • 组件
    #icon-zujian
  • 新闻
    #icon-xinwen2
  • 测试
    #icon--huiyanshoutuceshi
  • 编辑
    #icon-tianxie
  • 个人门户
    #icon-gerenmenhu
  • 综合测评
    #icon-zongheshiwu
  • 置换
    #icon-zhihuan
  • 资产
    #icon-zichan
  • 文件-发送文件
    #icon-wj-fswj
  • 物品-记事本
    #icon--my-job
  • 文件-收回文件
    #icon-wj-shwj
  • 眼睛
    #icon--huiyan
  • 加班
    #icon-jiaban
  • 文件
    #icon-wenjian
  • 已办
    #icon-complete
  • 审批
    #icon-shenpi
  • 预审报件
    #icon-yushenbaojian
  • 文件-退回文件
    #icon-wj-thwj
  • 文件-文件通过
    #icon-wj-wjtg
  • 灯泡
    #icon-dengpao
  • 图表
    #icon--danganchatu
  • 会议
    #icon-huiyi
  • 报销
    #icon-baoxiao
  • 表单
    #icon-biaodan
  • 文字
    #icon-wenzi
  • 综合
    #icon-zonghe
  • 时间
    #icon-shijian2
  • 审批
    #icon-shenpi1
  • 树型
    #icon-shuliebiao
  • 全屏
    #icon-quanping
  • 项目管理 2
    #icon-guanli
  • 应用 触发
    #icon-yingyongchufa
  • 公务
    #icon-renwu
  • 下载
    #icon-xiazai
  • 重置
    #icon-_zhongzhi-copy
  • 风险
    #icon-fengxian
  • 记事本
    #icon-jishiben3
  • 执法队伍管理
    #icon--zhifajianchayizhangtu
  • 信息
    #icon-xinxi
  • 运维管理
    #icon-yunweiguanli
  • gis_一张图管理
    #icon--yizhangtu
  • 密码
    #icon-mima
  • 用户名
    #icon-yonghuming
  • yonghu
    #icon-yonghu
  • login
    #icon-login
  • 新建任务
    #icon-xinjianrenwu
  • 首页
    #icon-shouye
  • poweroff
    #icon-poweroff
  • appstore
    #icon-appstore
  • 异常
    #icon-yichang
  • 已办
    #icon-icon_yiban
  • 安全_line
    #icon-anquan
  • 爱心_line
    #icon-aixin
  • 编辑_line
    #icon-bianji
  • 帮助_line
    #icon-bangzhu
  • 播放记录_line
    #icon-bofangjilu
  • 分享_line
    #icon-fenxiang
  • 点赞_line
    #icon-dianzan
  • 订单_line
    #icon-dingdan
  • 定位_line
    #icon-dingwei
  • 地图_line
    #icon-ditu
  • 男_line
    #icon-nan
  • 删除_line
    #icon-shanchu
  • 下载_line
    #icon-yunduanxiazai
  • 我的_line
    #icon-wode
  • 收藏_line
    #icon-shoucang
  • 消息_line
    #icon-xiaoxi
  • 增加_line
    #icon-zengjia
  • 指纹_line
    #icon-zhiwen
  • 返 回
    #icon-shangyibu
  • 返 回
    #icon-xiayibu
  • 待办
    #icon-icon_daiban
  • 印章
    #icon-zhang
  • 任务中心
    #icon-renwuzhongxin
  • 列表排列
    #icon--wangshangchenlie
  • 保存
    #icon-icon-baocun
  • 数据分析
    #icon-shujufenxi
  • 标签
    #icon-biaoqian
  • 第三方借钱
    #icon-disanfangjieqian
  • OA
    #icon-OA
  • 云_数据库_jurassic
    #icon--cloud-data
  • 会议
    #icon-huiyi1
  • 语言
    #icon-yuyan
  • 待审批审核审查_操作_jurassic
    #icon-jurassic_audit-wait
  • 上传_line
    #icon-yunduanshangchuan
  • 按钮组
    #icon-anniuzu
  • 颜色字段
    #icon-yanseziduan
  • 电 话
    #icon-dianhua
  • 收藏
    #icon-bianpinghuatubiaosheji-
  • 安全
    #icon-bianpinghuatubiaosheji-1

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>