• 保存
    
  • 保存
    
  • clear
    
  • save
    
  • else
    
  • else-if
    
  • 
  • 
  • 
  • 
  • if
    
  • if
    
  • if_else
    
  • 平均值
    
  • avg
    
  • divide
    
  • avg
    
  • multiply
    
  • If eles
    
  • sum
    
  • 04-左下角
    
  • 禁用
    
  • 启用
    
  • 规则引擎
    
  • 头像 男孩
    
  • 奖章
    
  • 查询
    
  • 产品
    
  • iconfont-seach
    
  • 竞争对手
    
  • 编辑
    
  • 签到
    
  • 签到,定位
    
  • 图片
    
  • icon-意见反馈
    
  • 竞品
    
  • 产品
    
  • 反馈4
    
  • 照片
    
  • 收起
    
  • 展开
    
  • 相机
    
  • 签到
    
  • 新增生产计划
    
  • 新增
    
  • 列表模式
    
  • 保存
    
  • 相机
    
  • 绩效
    
  • 156绩效提成
    
  • 电话
    
  • 外来拜访
    
  • 相机
    
  • 远程管理
    
  • 日志
    
  • 历史记录
    
  • 通讯录
    
  • 绩效
    
  • 发送消息
    
  • 工作台选中
    
  • 部门计划
    
  • 向下箭头
    
  • 向上箭头
    
  • 年报
    
  • 月报
    
  • 周报
    
  • 向上
    
  • 向下
    
  • 定位
    
  • 放大
    
  • 缩小
    
  • 筛选
    
  • 刷新
    
  • 
  • 
  • 
  • 返回
    
  • 重置
    
  • 定位
    
  • 筛选
    
  • 5_重置
    
  • 定位
    
  • 定位
    
  • 返利_line
    
  • 箭头
    
  • 箭头
    
  • 箭头
    
  • 医务药店
    
  • 经销商
    
  • 主数据
    
  • 画像分析
    
  • 销售订单
    
  • 系统
    
  • 团队
    
  • 下箭头
    
  • 实 上箭头-01
    
  • 实 向右箭头-01
    
  • 实 向下箭头-01
    
  • 实 向左箭头-01
    
  • 左箭头
    
  • 上箭头
    
  • 右箭头
    
  • 打回重阅
    
  • 审批
    
  • 单色圆点
    
  • iconfont-saomaio
    
  • 首页
    
  • 权限审阅
    
  • 模板
    
  • 流程说明
    
  • 权限配置
    
  • 流程中
    
  • 基础
    
  • KHCFDC_首页
    
  • 基础配置
    
  • 权限管理
    
  • 帮助
    
  • 标记
    
  • 15交叉口分析
    
  • 门店管理
    
  • 地图导航
    
  • 门店维护数据
    
  • 门店详情2
    
  • 附近门店
    
  • 设置
    
  • 查找 表单 列表
    
  • 记事本
    
  • 删除
    
  • 图表_树
    
  • 图表
    
  • 
  • 
  • 下载
    
  • 树型
    
  • 上传
    
  • 下载
    
  • 图表-卡片
    
  • 记事本
    
  • 图表
    
  • 名片
    
  • fsux_图表_散点地图
    
  • 列表
    
  • 工具
    
  • 删除
    
  • 合伙人-我的名片
    
  • 设置
    
  • 删除
    
  • 刷新
    
  • 删除
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 保存
    .el_icon_huabanbeifenx
  • 保存
    .el_icon_baocun1
  • clear
    .el_icon_clear
  • save
    .el_icon_save
  • else
    .el_icon_else
  • else-if
    .el_icon_else-if
  • .el_icon_jia1
  • .el_icon_cheng
  • .el_icon_jian-copy
  • .el_icon_cheng1
  • if
    .el_icon_if
  • if
    .el_icon_if1
  • if_else
    .el_icon_if_else
  • 平均值
    .el_icon_pingjunzhi
  • avg
    .el_icon_avg
  • divide
    .el_icon_divide
  • avg
    .el_icon_hong
  • multiply
    .el_icon_multiply
  • If eles
    .el_icon_ziyuan7
  • sum
    .el_icon_sum
  • 04-左下角
    .el_icon_zuoxiajiao
  • 禁用
    .el_icon_jinyong
  • 启用
    .el_icon_qiyong
  • 规则引擎
    .el_icon_guizeyinqing
  • 头像 男孩
    .el_icon_touxiang-man
  • 奖章
    .el_icon_jiangzhang
  • 查询
    .el_icon_chaxun
  • 产品
    .el_icon_chanpin1
  • iconfont-seach
    .el_icon_iconfont-seach
  • 竞争对手
    .el_icon_jingzhengduishou
  • 编辑
    .el_icon_bianji
  • 签到
    .el_icon_qiandao1
  • 签到,定位
    .el_icon_huabanfuben
  • 图片
    .el_icon_xiazai40
  • icon-意见反馈
    .el_icon_iconyijianfankui
  • 竞品
    .el_icon_cansaitubiaozhuanqu-
  • 产品
    .el_icon_chanpin
  • 反馈4
    .el_icon_fankui
  • 照片
    .el_icon_zhaopian
  • 收起
    .el_icon_shouqi
  • 展开
    .el_icon_zhankai
  • 相机
    .el_icon_xiangji
  • 签到
    .el_icon_qiandao
  • 新增生产计划
    .el_icon_xinzengshengchanjihua
  • 新增
    .el_icon_add
  • 列表模式
    .el_icon_list
  • 保存
    .el_icon_baocun
  • 相机
    .el_icon_xiangji1
  • 绩效
    .el_icon_jixiao1
  • 156绩效提成
    .el_icon_jixiaoticheng
  • 电话
    .el_icon_dianhua
  • 外来拜访
    .el_icon_wailaibaifang
  • 相机
    .el_icon_xiangji2
  • 远程管理
    .el_icon_yuanchengguanli
  • 日志
    .el_icon_rizhi
  • 历史记录
    .el_icon_lishijilu-copy-copy
  • 通讯录
    .el_icon_tongxunlu
  • 绩效
    .el_icon_jixiao
  • 发送消息
    .el_icon_fasongxiaoxi
  • 工作台选中
    .el_icon_gongzuotaixuanzhong
  • 部门计划
    .el_icon_drxx45
  • 向下箭头
    .el_icon_iconset0435
  • 向上箭头
    .el_icon_iconset0436
  • 年报
    .el_icon_nianbao
  • 月报
    .el_icon_yuebao
  • 周报
    .el_icon_zhoubao
  • 向上
    .el_icon_xiangshang
  • 向下
    .el_icon_xiangxia
  • 定位
    .el_icon_dingwei3
  • 放大
    .el_icon_fangda
  • 缩小
    .el_icon_suoxiao
  • 筛选
    .el_icon_shaixuan1
  • 刷新
    .el_icon_shuaxin1
  • .el_icon_nian
  • .el_icon_zhou
  • .el_icon_yue
  • 返回
    .el_icon_fanhui
  • 重置
    .el_icon_zhongzhi
  • 定位
    .el_icon_dingwei
  • 筛选
    .el_icon_shaixuan
  • 5_重置
    .el_icon_5_zhongzhi
  • 定位
    .el_icon_dingwei1
  • 定位
    .el_icon_dingwei2
  • 返利_line
    .el_icon_fanli_line
  • 箭头
    .el_icon_jiantou
  • 箭头
    .el_icon_jiantou-up
  • 箭头
    .el_icon_jiantou-down
  • 医务药店
    .el_icon_yiwuyaodian
  • 经销商
    .el_icon_jingxiaoshang
  • 主数据
    .el_icon_zhushuju
  • 画像分析
    .el_icon_huaxiangfenxi
  • 销售订单
    .el_icon_web-icon-
  • 系统
    .el_icon_xitong
  • 团队
    .el_icon_tuandui
  • 下箭头
    .el_icon_xiajiantou
  • 实 上箭头-01
    .el_icon_shishangjiantou-
  • 实 向右箭头-01
    .el_icon_shixiangyoujiantou-
  • 实 向下箭头-01
    .el_icon_shixiangxiajiantou-
  • 实 向左箭头-01
    .el_icon_shixiangzuojiantou-
  • 左箭头
    .el_icon_zuojiantou
  • 上箭头
    .el_icon_shangjiantou
  • 右箭头
    .el_icon_youjiantou
  • 打回重阅
    .el_icon_dahuizhongyue
  • 审批
    .el_icon_shenpi
  • 单色圆点
    .el_icon_danseyuandian
  • iconfont-saomaio
    .el_icon_iconfont
  • 首页
    .el_icon_shouye
  • 权限审阅
    .el_icon_quanxianshenyue
  • 模板
    .el_icon_moban
  • 流程说明
    .el_icon_liuchengshuoming
  • 权限配置
    .el_icon_quanxianpeizhi
  • 流程中
    .el_icon_liuchengzhong
  • 基础
    .el_icon_jichu
  • KHCFDC_首页
    .el_icon_shouye1
  • 基础配置
    .el_icon_jichupeizhi
  • 权限管理
    .el_icon_quanxianguanli-
  • 帮助
    .el_icon_bangzhu
  • 标记
    .el_icon_biaoji
  • 15交叉口分析
    .el_icon_jiaochakoufenxi
  • 门店管理
    .el_icon_mendianguanli
  • 地图导航
    .el_icon_xingzhuang
  • 门店维护数据
    .el_icon_mendianweihushuju
  • 门店详情2
    .el_icon_mendianxiangqing
  • 附近门店
    .el_icon_fujinmendian
  • 设置
    .el_icon_tubiao01
  • 查找 表单 列表
    .el_icon_chazhaobiaodanliebiao
  • 记事本
    .el_icon_work-copy
  • 删除
    .el_icon_shanchu
  • 图表_树
    .el_icon_tubiaoshu-copy
  • 图表
    .el_icon_chart
  • .el_icon_jian
  • .el_icon_jia
  • 下载
    .el_icon_xiazai
  • 树型
    .el_icon_shuxing
  • 上传
    .el_icon_shangchuan
  • 下载
    .el_icon_xiazai1
  • 图表-卡片
    .el_icon_tubiao-qiapian
  • 记事本
    .el_icon_jishiben
  • 图表
    .el_icon_tubiao
  • 名片
    .el_icon_mingpian
  • fsux_图表_散点地图
    .el_icon_fsux_tubiao_ditu_sandian
  • 列表
    .el_icon_liebiao
  • 工具
    .el_icon_gongju
  • 删除
    .el_icon_shanchu1
  • 合伙人-我的名片
    .el_icon_hehuoren-wodemingpian
  • 设置
    .el_icon_setting
  • 删除
    .el_icon_delete
  • 刷新
    .el_icon_shuaxin
  • 删除
    .el_icon_delete1

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont el_icon_xxx"></span>

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

  • 保存
    #el_icon_huabanbeifenx
  • 保存
    #el_icon_baocun1
  • clear
    #el_icon_clear
  • save
    #el_icon_save
  • else
    #el_icon_else
  • else-if
    #el_icon_else-if
  • #el_icon_jia1
  • #el_icon_cheng
  • #el_icon_jian-copy
  • #el_icon_cheng1
  • if
    #el_icon_if
  • if
    #el_icon_if1
  • if_else
    #el_icon_if_else
  • 平均值
    #el_icon_pingjunzhi
  • avg
    #el_icon_avg
  • divide
    #el_icon_divide
  • avg
    #el_icon_hong
  • multiply
    #el_icon_multiply
  • If eles
    #el_icon_ziyuan7
  • sum
    #el_icon_sum
  • 04-左下角
    #el_icon_zuoxiajiao
  • 禁用
    #el_icon_jinyong
  • 启用
    #el_icon_qiyong
  • 规则引擎
    #el_icon_guizeyinqing
  • 头像 男孩
    #el_icon_touxiang-man
  • 奖章
    #el_icon_jiangzhang
  • 查询
    #el_icon_chaxun
  • 产品
    #el_icon_chanpin1
  • iconfont-seach
    #el_icon_iconfont-seach
  • 竞争对手
    #el_icon_jingzhengduishou
  • 编辑
    #el_icon_bianji
  • 签到
    #el_icon_qiandao1
  • 签到,定位
    #el_icon_huabanfuben
  • 图片
    #el_icon_xiazai40
  • icon-意见反馈
    #el_icon_iconyijianfankui
  • 竞品
    #el_icon_cansaitubiaozhuanqu-
  • 产品
    #el_icon_chanpin
  • 反馈4
    #el_icon_fankui
  • 照片
    #el_icon_zhaopian
  • 收起
    #el_icon_shouqi
  • 展开
    #el_icon_zhankai
  • 相机
    #el_icon_xiangji
  • 签到
    #el_icon_qiandao
  • 新增生产计划
    #el_icon_xinzengshengchanjihua
  • 新增
    #el_icon_add
  • 列表模式
    #el_icon_list
  • 保存
    #el_icon_baocun
  • 相机
    #el_icon_xiangji1
  • 绩效
    #el_icon_jixiao1
  • 156绩效提成
    #el_icon_jixiaoticheng
  • 电话
    #el_icon_dianhua
  • 外来拜访
    #el_icon_wailaibaifang
  • 相机
    #el_icon_xiangji2
  • 远程管理
    #el_icon_yuanchengguanli
  • 日志
    #el_icon_rizhi
  • 历史记录
    #el_icon_lishijilu-copy-copy
  • 通讯录
    #el_icon_tongxunlu
  • 绩效
    #el_icon_jixiao
  • 发送消息
    #el_icon_fasongxiaoxi
  • 工作台选中
    #el_icon_gongzuotaixuanzhong
  • 部门计划
    #el_icon_drxx45
  • 向下箭头
    #el_icon_iconset0435
  • 向上箭头
    #el_icon_iconset0436
  • 年报
    #el_icon_nianbao
  • 月报
    #el_icon_yuebao
  • 周报
    #el_icon_zhoubao
  • 向上
    #el_icon_xiangshang
  • 向下
    #el_icon_xiangxia
  • 定位
    #el_icon_dingwei3
  • 放大
    #el_icon_fangda
  • 缩小
    #el_icon_suoxiao
  • 筛选
    #el_icon_shaixuan1
  • 刷新
    #el_icon_shuaxin1
  • #el_icon_nian
  • #el_icon_zhou
  • #el_icon_yue
  • 返回
    #el_icon_fanhui
  • 重置
    #el_icon_zhongzhi
  • 定位
    #el_icon_dingwei
  • 筛选
    #el_icon_shaixuan
  • 5_重置
    #el_icon_5_zhongzhi
  • 定位
    #el_icon_dingwei1
  • 定位
    #el_icon_dingwei2
  • 返利_line
    #el_icon_fanli_line
  • 箭头
    #el_icon_jiantou
  • 箭头
    #el_icon_jiantou-up
  • 箭头
    #el_icon_jiantou-down
  • 医务药店
    #el_icon_yiwuyaodian
  • 经销商
    #el_icon_jingxiaoshang
  • 主数据
    #el_icon_zhushuju
  • 画像分析
    #el_icon_huaxiangfenxi
  • 销售订单
    #el_icon_web-icon-
  • 系统
    #el_icon_xitong
  • 团队
    #el_icon_tuandui
  • 下箭头
    #el_icon_xiajiantou
  • 实 上箭头-01
    #el_icon_shishangjiantou-
  • 实 向右箭头-01
    #el_icon_shixiangyoujiantou-
  • 实 向下箭头-01
    #el_icon_shixiangxiajiantou-
  • 实 向左箭头-01
    #el_icon_shixiangzuojiantou-
  • 左箭头
    #el_icon_zuojiantou
  • 上箭头
    #el_icon_shangjiantou
  • 右箭头
    #el_icon_youjiantou
  • 打回重阅
    #el_icon_dahuizhongyue
  • 审批
    #el_icon_shenpi
  • 单色圆点
    #el_icon_danseyuandian
  • iconfont-saomaio
    #el_icon_iconfont
  • 首页
    #el_icon_shouye
  • 权限审阅
    #el_icon_quanxianshenyue
  • 模板
    #el_icon_moban
  • 流程说明
    #el_icon_liuchengshuoming
  • 权限配置
    #el_icon_quanxianpeizhi
  • 流程中
    #el_icon_liuchengzhong
  • 基础
    #el_icon_jichu
  • KHCFDC_首页
    #el_icon_shouye1
  • 基础配置
    #el_icon_jichupeizhi
  • 权限管理
    #el_icon_quanxianguanli-
  • 帮助
    #el_icon_bangzhu
  • 标记
    #el_icon_biaoji
  • 15交叉口分析
    #el_icon_jiaochakoufenxi
  • 门店管理
    #el_icon_mendianguanli
  • 地图导航
    #el_icon_xingzhuang
  • 门店维护数据
    #el_icon_mendianweihushuju
  • 门店详情2
    #el_icon_mendianxiangqing
  • 附近门店
    #el_icon_fujinmendian
  • 设置
    #el_icon_tubiao01
  • 查找 表单 列表
    #el_icon_chazhaobiaodanliebiao
  • 记事本
    #el_icon_work-copy
  • 删除
    #el_icon_shanchu
  • 图表_树
    #el_icon_tubiaoshu-copy
  • 图表
    #el_icon_chart
  • #el_icon_jian
  • #el_icon_jia
  • 下载
    #el_icon_xiazai
  • 树型
    #el_icon_shuxing
  • 上传
    #el_icon_shangchuan
  • 下载
    #el_icon_xiazai1
  • 图表-卡片
    #el_icon_tubiao-qiapian
  • 记事本
    #el_icon_jishiben
  • 图表
    #el_icon_tubiao
  • 名片
    #el_icon_mingpian
  • fsux_图表_散点地图
    #el_icon_fsux_tubiao_ditu_sandian
  • 列表
    #el_icon_liebiao
  • 工具
    #el_icon_gongju
  • 删除
    #el_icon_shanchu1
  • 合伙人-我的名片
    #el_icon_hehuoren-wodemingpian
  • 设置
    #el_icon_setting
  • 删除
    #el_icon_delete
  • 刷新
    #el_icon_shuaxin
  • 删除
    #el_icon_delete1

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>