• 文本短信
    
  • 安全保障
    
  • 任务完成
    
  • 短信验证码
    
  • 双向呼叫
    
  • warning-circle-fill
    
  • check
    
  • user-default
    
  • AI电话
    
  • 系统通知
    
  • 生日尊享
    
  • Plus
    
  • 
    edit
    
  • Delete
    
  • 暂无话术
    
  • 链接
    
  • 开启
    
  • 暂停
    
  • 音符
    
  • 音符静音
    
  • 邀请
    
  • 开卡
    
  • 查看详情
    
  • 客户复购管理
    
  • 活动邀约
    
  • 企微好友
    
  • 其他场景
    
  • 标签
    
  • 等级-3
    
  • 等级-6
    
  • 等级-1
    
  • 等级-5
    
  • 等级-8
    
  • arrow-right
    
  • 等级-10
    
  • 等级-7
    
  • 等级-9
    
  • 等级-4
    
  • 等级-2
    
  • PlusOutlined
    
  • reload-outlined
    
  • 配置为空
    
  • 基本信息
    
  • 消费活动
    
  • 营销活动
    
  • 用户轨迹
    
  • 导购标签
    
  • 其他标签
    
  • 微盟标签
    
  • 常用标签
    
  • 渠道标签
    
  • 客户分组
    
  • 金字塔客户
    
  • 营销活动标签
    
  • 编辑
    
  • 删除
    
  • more
    
  • 更多
    
  • 拖拽排序
    
  • 复制
    
  • 我的积分
    
  • 上升
    
  • 下降
    
  • 门店
    
  • 老店
    
  • 新店
    
  • 异常
    
  • 指标说明
    
  • 上传
    
  • 下载
    
  • QuestionCircleOutlined
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1659408931949') format('woff2'),
       url('iconfont.woff?t=1659408931949') format('woff'),
       url('iconfont.ttf?t=1659408931949') 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-wenbenmsg
  • 安全保障
    .icon-anquanbaozhang
  • 任务完成
    .icon-renwuwancheng
  • 短信验证码
    .icon-duanxinyzm
  • 双向呼叫
    .icon-shuangxianghujiao1
  • warning-circle-fill
    .icon-warning-circle-fill
  • check
    .icon-check
  • user-default
    .icon-user-default
  • AI电话
    .icon-AIdianhua
  • 系统通知
    .icon-xitongtongzhi
  • 生日尊享
    .icon-shengrizunxiang
  • Plus
    .icon-Plus
  • edit
    .icon-edit
  • Delete
    .icon-Delete
  • 暂无话术
    .icon-zanwuhuashu
  • 链接
    .icon-lianjie
  • 开启
    .icon-kaiqi
  • 暂停
    .icon-zanting
  • 音符
    .icon-yinfu
  • 音符静音
    .icon-xingzhuangjiehe2x
  • 邀请
    .icon-yaoqing
  • 开卡
    .icon-kaika
  • 查看详情
    .icon-chakanxiangqing-copy
  • 客户复购管理
    .icon-kehufugouguanli
  • 活动邀约
    .icon-huodongyaoyue
  • 企微好友
    .icon-qiweihaoyou
  • 其他场景
    .icon-qitachangjing
  • 标签
    .icon-biaoqian
  • 等级-3
    .icon-dengji-
  • 等级-6
    .icon-dengji-1
  • 等级-1
    .icon-dengji-2
  • 等级-5
    .icon-dengji-3
  • 等级-8
    .icon-dengji-4
  • arrow-right
    .icon-arrow-right1
  • 等级-10
    .icon-dengji-5
  • 等级-7
    .icon-dengji-6
  • 等级-9
    .icon-dengji-7
  • 等级-4
    .icon-dengji-8
  • 等级-2
    .icon-dengji-9
  • PlusOutlined
    .icon-PlusOutlined
  • reload-outlined
    .icon-reload-outlined
  • 配置为空
    .icon-peizhiweikong
  • 基本信息
    .icon-jibenxinxi
  • 消费活动
    .icon-xiaofeihuodong
  • 营销活动
    .icon-yingxiaohuodong
  • 用户轨迹
    .icon-yonghuguiji
  • 导购标签
    .icon-daogoubiaoqian
  • 其他标签
    .icon-qitabiaoqian
  • 微盟标签
    .icon-weimengbiaoqian
  • 常用标签
    .icon-changyongbiaoqian
  • 渠道标签
    .icon-qudaobiaoqian
  • 客户分组
    .icon-kehufenzu
  • 金字塔客户
    .icon-jinzitakehu
  • 营销活动标签
    .icon-yingxiaohuodongbiaoqian
  • 编辑
    .icon-bianji6
  • 删除
    .icon-delete
  • more
    .icon-more
  • 更多
    .icon-gengduo
  • 拖拽排序
    .icon-tuozhuaipaixu
  • 复制
    .icon-fuzhi
  • 我的积分
    .icon-wodejifen
  • 上升
    .icon-shangsheng
  • 下降
    .icon-xiajiang
  • 门店
    .icon-mendian-data
  • 老店
    .icon-laodian
  • 新店
    .icon-xindian
  • 异常
    .icon-yichang
  • 指标说明
    .icon-zhibiaoshuoming
  • 上传
    .icon-shangc
  • 下载
    .icon-xiazai
  • QuestionCircleOutlined
    .icon-QuestionCircleOutlined

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-wenbenmsg
  • 安全保障
    #icon-anquanbaozhang
  • 任务完成
    #icon-renwuwancheng
  • 短信验证码
    #icon-duanxinyzm
  • 双向呼叫
    #icon-shuangxianghujiao1
  • warning-circle-fill
    #icon-warning-circle-fill
  • check
    #icon-check
  • user-default
    #icon-user-default
  • AI电话
    #icon-AIdianhua
  • 系统通知
    #icon-xitongtongzhi
  • 生日尊享
    #icon-shengrizunxiang
  • Plus
    #icon-Plus
  • edit
    #icon-edit
  • Delete
    #icon-Delete
  • 暂无话术
    #icon-zanwuhuashu
  • 链接
    #icon-lianjie
  • 开启
    #icon-kaiqi
  • 暂停
    #icon-zanting
  • 音符
    #icon-yinfu
  • 音符静音
    #icon-xingzhuangjiehe2x
  • 邀请
    #icon-yaoqing
  • 开卡
    #icon-kaika
  • 查看详情
    #icon-chakanxiangqing-copy
  • 客户复购管理
    #icon-kehufugouguanli
  • 活动邀约
    #icon-huodongyaoyue
  • 企微好友
    #icon-qiweihaoyou
  • 其他场景
    #icon-qitachangjing
  • 标签
    #icon-biaoqian
  • 等级-3
    #icon-dengji-
  • 等级-6
    #icon-dengji-1
  • 等级-1
    #icon-dengji-2
  • 等级-5
    #icon-dengji-3
  • 等级-8
    #icon-dengji-4
  • arrow-right
    #icon-arrow-right1
  • 等级-10
    #icon-dengji-5
  • 等级-7
    #icon-dengji-6
  • 等级-9
    #icon-dengji-7
  • 等级-4
    #icon-dengji-8
  • 等级-2
    #icon-dengji-9
  • PlusOutlined
    #icon-PlusOutlined
  • reload-outlined
    #icon-reload-outlined
  • 配置为空
    #icon-peizhiweikong
  • 基本信息
    #icon-jibenxinxi
  • 消费活动
    #icon-xiaofeihuodong
  • 营销活动
    #icon-yingxiaohuodong
  • 用户轨迹
    #icon-yonghuguiji
  • 导购标签
    #icon-daogoubiaoqian
  • 其他标签
    #icon-qitabiaoqian
  • 微盟标签
    #icon-weimengbiaoqian
  • 常用标签
    #icon-changyongbiaoqian
  • 渠道标签
    #icon-qudaobiaoqian
  • 客户分组
    #icon-kehufenzu
  • 金字塔客户
    #icon-jinzitakehu
  • 营销活动标签
    #icon-yingxiaohuodongbiaoqian
  • 编辑
    #icon-bianji6
  • 删除
    #icon-delete
  • more
    #icon-more
  • 更多
    #icon-gengduo
  • 拖拽排序
    #icon-tuozhuaipaixu
  • 复制
    #icon-fuzhi
  • 我的积分
    #icon-wodejifen
  • 上升
    #icon-shangsheng
  • 下降
    #icon-xiajiang
  • 门店
    #icon-mendian-data
  • 老店
    #icon-laodian
  • 新店
    #icon-xindian
  • 异常
    #icon-yichang
  • 指标说明
    #icon-zhibiaoshuoming
  • 上传
    #icon-shangc
  • 下载
    #icon-xiazai
  • QuestionCircleOutlined
    #icon-QuestionCircleOutlined

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>