• 已发送
    
  • 有档待处理
    
  • 邮件附件
    
  • 星际邮箱
    
  • 系统提醒
    
  • 陌生待处理
    
  • 所有线索
    
  • 发件箱
    
  • 所有客户
    
  • 草稿箱
    
  • 收邮件
    
  • 商机管理
    
  • 添加商机
    
  • 公共线索
    
  • 订单详情
    
  • 客户管理
    
  • 规则配置
    
  • 菜单管理
    
  • 财务管理
    
  • 成交客户
    
  • 订单管理
    
  • 寄样管理
    
  • 跟进记录
    
  • 币种设置
    
  • 工单管理
    
  • 客户跟进记录
    
  • 商机管理
    
  • 审批管理
    
  • 全部线索
    
  • 快捷菜单
    
  • 全部商机
    
  • 客户列表
    
  • 角色管理
    
  • 联系人详情
    
  • 全部任务
    
  • 全部订单
    
  • 概况信息
    
  • 定时任务
    
  • 线索详情
    
  • 线索管理
    
  • 下属商机
    
  • 下属负责的
    
  • 下属协作
    
  • 我发起的
    
  • 我协作的
    
  • 无效客户
    
  • 下属订单
    
  • 我的线索
    
  • 我负责的
    
  • 我的订单
    
  • 我协作的 2
    
  • 任务管理
    
  • 商机详情
    
  • 统计报表
    
  • 我的商机
    
  • 系统管理
    
  • 联系人
    
  • 公海客户
    
  • 成交商机
    
  • 重点客户
    
  • 字典管理
    
  • 下属线索
    
  • 已转客户
    
  • 组织管理
    
  • 消息模板
    
  • 用户管理
    
  • 业绩目标
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1732692493346') format('woff2'),
       url('iconfont.woff?t=1732692493346') format('woff'),
       url('iconfont.ttf?t=1732692493346') 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-yifasong
  • 有档待处理
    .icon-youdangdaichuli
  • 邮件附件
    .icon-youjianfujian
  • 星际邮箱
    .icon-xingjiyouxiang
  • 系统提醒
    .icon-xitongtixing
  • 陌生待处理
    .icon-moshengdaichuli
  • 所有线索
    .icon-suoyouxiansuo
  • 发件箱
    .icon-fajianxiang
  • 所有客户
    .icon-suoyoukehu
  • 草稿箱
    .icon-caogaoxiang
  • 收邮件
    .icon-shouyoujian
  • 商机管理
    .icon-shangjiguanli1
  • 添加商机
    .icon-tianjiashangji
  • 公共线索
    .icon-gonggongxiansuo
  • 订单详情
    .icon-dingdanxiangqing
  • 客户管理
    .icon-kehuguanli
  • 规则配置
    .icon-guizepeizhi
  • 菜单管理
    .icon-caidanguanli
  • 财务管理
    .icon-caiwuguanli
  • 成交客户
    .icon-chengjiaokehu
  • 订单管理
    .icon-dingdanguanli
  • 寄样管理
    .icon-jiyangguanli
  • 跟进记录
    .icon-genjinjilu
  • 币种设置
    .icon-bizhongshezhi
  • 工单管理
    .icon-gongdanguanli
  • 客户跟进记录
    .icon-kehugenjinjilu
  • 商机管理
    .icon-shangjiguanli
  • 审批管理
    .icon-shenpiguanli
  • 全部线索
    .icon-quanbuxiansuo
  • 快捷菜单
    .icon-kuaijiecaidan
  • 全部商机
    .icon-quanbushangji
  • 客户列表
    .icon-kehuliebiao
  • 角色管理
    .icon-jiaoseguanli
  • 联系人详情
    .icon-lianxirenxiangqing
  • 全部任务
    .icon-quanburenwu
  • 全部订单
    .icon-quanbudingdan
  • 概况信息
    .icon-gaikuangxinxi
  • 定时任务
    .icon-dingshirenwu
  • 线索详情
    .icon-xiansuoxiangqing
  • 线索管理
    .icon-xiansuoguanli
  • 下属商机
    .icon-xiashushangji
  • 下属负责的
    .icon-xiashufuzede
  • 下属协作
    .icon-xiashuxiezuo
  • 我发起的
    .icon-wofaqide
  • 我协作的
    .icon-woxiezuode
  • 无效客户
    .icon-wuxiaokehu
  • 下属订单
    .icon-xiashudingdan
  • 我的线索
    .icon-wodexiansuo
  • 我负责的
    .icon-wofuzede
  • 我的订单
    .icon-wodedingdan
  • 我协作的 2
    .icon-a-woxiezuode2
  • 任务管理
    .icon-renwuguanli
  • 商机详情
    .icon-shangjixiangqing
  • 统计报表
    .icon-tongjibaobiao
  • 我的商机
    .icon-wodeshangji
  • 系统管理
    .icon-xitongguanli
  • 联系人
    .icon-lianxiren
  • 公海客户
    .icon-gonghaikehu
  • 成交商机
    .icon-chengjiaoshangji
  • 重点客户
    .icon-zhongdiankehu
  • 字典管理
    .icon-zidianguanli
  • 下属线索
    .icon-xiashuxiansuo
  • 已转客户
    .icon-yizhuankehu
  • 组织管理
    .icon-zuzhiguanli
  • 消息模板
    .icon-xiaoximoban
  • 用户管理
    .icon-yonghuguanli
  • 业绩目标
    .icon-yejimubiao

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-yifasong
  • 有档待处理
    #icon-youdangdaichuli
  • 邮件附件
    #icon-youjianfujian
  • 星际邮箱
    #icon-xingjiyouxiang
  • 系统提醒
    #icon-xitongtixing
  • 陌生待处理
    #icon-moshengdaichuli
  • 所有线索
    #icon-suoyouxiansuo
  • 发件箱
    #icon-fajianxiang
  • 所有客户
    #icon-suoyoukehu
  • 草稿箱
    #icon-caogaoxiang
  • 收邮件
    #icon-shouyoujian
  • 商机管理
    #icon-shangjiguanli1
  • 添加商机
    #icon-tianjiashangji
  • 公共线索
    #icon-gonggongxiansuo
  • 订单详情
    #icon-dingdanxiangqing
  • 客户管理
    #icon-kehuguanli
  • 规则配置
    #icon-guizepeizhi
  • 菜单管理
    #icon-caidanguanli
  • 财务管理
    #icon-caiwuguanli
  • 成交客户
    #icon-chengjiaokehu
  • 订单管理
    #icon-dingdanguanli
  • 寄样管理
    #icon-jiyangguanli
  • 跟进记录
    #icon-genjinjilu
  • 币种设置
    #icon-bizhongshezhi
  • 工单管理
    #icon-gongdanguanli
  • 客户跟进记录
    #icon-kehugenjinjilu
  • 商机管理
    #icon-shangjiguanli
  • 审批管理
    #icon-shenpiguanli
  • 全部线索
    #icon-quanbuxiansuo
  • 快捷菜单
    #icon-kuaijiecaidan
  • 全部商机
    #icon-quanbushangji
  • 客户列表
    #icon-kehuliebiao
  • 角色管理
    #icon-jiaoseguanli
  • 联系人详情
    #icon-lianxirenxiangqing
  • 全部任务
    #icon-quanburenwu
  • 全部订单
    #icon-quanbudingdan
  • 概况信息
    #icon-gaikuangxinxi
  • 定时任务
    #icon-dingshirenwu
  • 线索详情
    #icon-xiansuoxiangqing
  • 线索管理
    #icon-xiansuoguanli
  • 下属商机
    #icon-xiashushangji
  • 下属负责的
    #icon-xiashufuzede
  • 下属协作
    #icon-xiashuxiezuo
  • 我发起的
    #icon-wofaqide
  • 我协作的
    #icon-woxiezuode
  • 无效客户
    #icon-wuxiaokehu
  • 下属订单
    #icon-xiashudingdan
  • 我的线索
    #icon-wodexiansuo
  • 我负责的
    #icon-wofuzede
  • 我的订单
    #icon-wodedingdan
  • 我协作的 2
    #icon-a-woxiezuode2
  • 任务管理
    #icon-renwuguanli
  • 商机详情
    #icon-shangjixiangqing
  • 统计报表
    #icon-tongjibaobiao
  • 我的商机
    #icon-wodeshangji
  • 系统管理
    #icon-xitongguanli
  • 联系人
    #icon-lianxiren
  • 公海客户
    #icon-gonghaikehu
  • 成交商机
    #icon-chengjiaoshangji
  • 重点客户
    #icon-zhongdiankehu
  • 字典管理
    #icon-zidianguanli
  • 下属线索
    #icon-xiashuxiansuo
  • 已转客户
    #icon-yizhuankehu
  • 组织管理
    #icon-zuzhiguanli
  • 消息模板
    #icon-xiaoximoban
  • 用户管理
    #icon-yonghuguanli
  • 业绩目标
    #icon-yejimubiao

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>