• 线索
    
  • 移动互联网
    
  • 字典
    
  • 字典
    
  • 资料库
    
  • 资料库
    
  • 海报
    
  • 海报
    
  • 诊所中心
    
  • 小诊所
    
  • 移动互联网
    
  • 执业证号
    
  • 线索
    
  • 职业
    
  • AI
    
  • 保单样本
    
  • 分享文章
    
  • 找资料
    
  • 海报组件
    
  • 加号
    
  • 商机
    
  • 保存
    
  • 退出 (1)
    
  • 文件
    
  • 下载
    
  • 教育
    
  • 咨询
    
  • 在线
    
  • 分销 - 指纹
    
  • ai
    
  • 职业类别
    
  • 公告
    
  • 医疗卫生-14
    
  • 
  • 皇冠 (1)
    
  • 投保申请
    
  • 定制
    
  • ai人工智能
    
  • AK-MN上传图片
    
  • 支付平台-银联
    
  • 预算
    
  • 孩子
    
  • material,疑惑,问号
    
  • 简介
    
  • 办理ETC-配偶
    
  • 孩子名字
    
  • 注意事项
    
  • 保障 @1x
    
  • 
  • 家庭情况
    
  • 数据解读
    
  • 风险
    
  • 方案
    
  • 发现
    
  • 首页 (2)
    
  • 发现
    
  • 首页
    
  • 引导箭头
    
  • 在线客服
    
  • 
  • 提现
    
  • 箭头
    
  • 收益金额高
    
  • 支出记账
    
  • 儿童票
    
  • 五角星
    
  • 五角星
    
  • 圆钩
    
  • 医疗4
    
  • 转发14 线
    
  • 交通事故
    
  • 商业险
    
  • 人才申报-01
    
  • 车辆
    
  • 客服
    
  • 列表模式
    
  • 推荐 (1)
    
  • 代理商申请
    
  • 补胎
    
  • 勾选—新—灰色-04
    
  • 勾选
    
  • 点赞
    
  • 钻石
    
  • 书籍
    
  • 天平
    
  • 父母
    
  • 编辑
    
  • 医疗
    
  • 重大疾病2
    
  • 关爱父母
    
  • 学士帽
    
  • 关闭
    
  • 查找
    
  • 
  • 注册-打钩带框
    
  • 开关_2
    
  • 开关 开
    
  • 微信支付
    
  • 礼物
    
  • 删 除
    
  • 向下
    
  • 
  • 皇冠
    
  • 下载
    
  • 左箭头
    
  • 582-单线,骑行
    
  • 运动
    
  • 登山活动
    
  • 潜水
    
  • 滑雪
    
  • 帆船
    
  • 跑步
    
  • 足球场-01
    
  • 修改资料
    
  • 删除
    
  • 联系人
    
  • 邀请有礼
    
  • 邀请码填充
    
  • 首页-设置
    
  • 
  • 
  • 中国地图
    
  • 打电话
    
  • 母婴亲子
    
  • 类型默认图-投票1
    
  • 
  • 未成年人特定重大疾病关爱保险金
    
  • 天数-当前选中
    
  • 目的地
    
  • 09_财富中心
    
  • 财富中心
    
  • pdf
    
  • phone menu-02
    
  • 男人
    
  • 女性-人物
    
  • 旅行
    
  • 户外2
    
  • 留学-实心
    
  • 支付宝
    
  • 微信
    
  • 用户
    
  • 电话
    
  • 菜单
    
  • 银行卡
    
  • 密码
    
  • 身份证
    
  • 银行
    
  • 用户
    
  • 验证码 (3)
    

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-xiansuo1
  • 移动互联网
    .icon-yidonghulianwang2
  • 字典
    .icon-zidian
  • 字典
    .icon-zidian1
  • 资料库
    .icon-ziliaoku
  • 资料库
    .icon-ziliaoku1
  • 海报
    .icon-haibao-1
  • 海报
    .icon-haibao
  • 诊所中心
    .icon-zhensuozhongxin
  • 小诊所
    .icon-xiaozhensuo
  • 移动互联网
    .icon-yidonghulianwang
  • 执业证号
    .icon-zhiyezhenghao
  • 线索
    .icon-xiansuo
  • 职业
    .icon-zhiye
  • AI
    .icon-AI
  • 保单样本
    .icon-baodanyangben
  • 分享文章
    .icon-fenxiangwenzhang
  • 找资料
    .icon-zhaoziliao
  • 海报组件
    .icon-haibaozujian
  • 加号
    .icon-jiahao
  • 商机
    .icon-shangji
  • 保存
    .icon-save
  • 退出 (1)
    .icon-tuichu
  • 文件
    .icon-wenjian
  • 下载
    .icon-xiazai1
  • 教育
    .icon-jiaoyu
  • 咨询
    .icon-btnconsult
  • 在线
    .icon-zaixian
  • 分销 - 指纹
    .icon-zhiwen
  • ai
    .icon-ai
  • 职业类别
    .icon-zhiyeleibie
  • 公告
    .icon-gonggao
  • 医疗卫生-14
    .icon-yiliaoweisheng-
  • .icon-qian1
  • 皇冠 (1)
    .icon-huangguan1
  • 投保申请
    .icon-toubaoshenqing
  • 定制
    .icon-dingzhi
  • ai人工智能
    .icon-airengongzhineng
  • AK-MN上传图片
    .icon-mn_shangchuantupian
  • 支付平台-银联
    .icon-zhifupingtai-yinlian
  • 预算
    .icon-yusuan
  • 孩子
    .icon-haizi
  • material,疑惑,问号
    .icon-ic_help_px
  • 简介
    .icon-jianjie
  • 办理ETC-配偶
    .icon-banliETC-peiou
  • 孩子名字
    .icon-haizimingzi
  • 注意事项
    .icon-zhuyishixiang
  • 保障 @1x
    .icon-baozhangx
  • .icon-qian
  • 家庭情况
    .icon-jiatingqingkuang
  • 数据解读
    .icon-shujujiedu
  • 风险
    .icon-fengxian
  • 方案
    .icon-fangan
  • 发现
    .icon-iconfontexplore
  • 首页 (2)
    .icon-shouye2
  • 发现
    .icon-faxian
  • 首页
    .icon-shouye
  • 引导箭头
    .icon-yindaojiantou
  • 在线客服
    .icon-zaixiankefu
  • .icon-money-more
  • 提现
    .icon-tixian
  • 箭头
    .icon-ar-r
  • 收益金额高
    .icon-icon3
  • 支出记账
    .icon-zhichujizhang
  • 儿童票
    .icon-ertongpiao
  • 五角星
    .icon-wujiaoxing
  • 五角星
    .icon-wujiaoxing-1
  • 圆钩
    .icon-yuangou
  • 医疗4
    .icon-yiliao
  • 转发14 线
    .icon-zhuanfaxian
  • 交通事故
    .icon-jiaotongshigu
  • 商业险
    .icon-shangyexian
  • 人才申报-01
    .icon-rencaishenbao-
  • 车辆
    .icon-cheliang
  • 客服
    .icon-kefu
  • 列表模式
    .icon-liebiaomoshi
  • 推荐 (1)
    .icon-tuijian
  • 代理商申请
    .icon-dailishangshenqing
  • 补胎
    .icon-butai
  • 勾选—新—灰色-04
    .icon-gouxuanxinhuise-
  • 勾选
    .icon-gouxuan
  • 点赞
    .icon-dianzan
  • 钻石
    .icon-zuanshi
  • 书籍
    .icon-shuji
  • 天平
    .icon-tianping
  • 父母
    .icon-53
  • 编辑
    .icon-bianji
  • 医疗
    .icon-tubiao27
  • 重大疾病2
    .icon-zhongdajibing
  • 关爱父母
    .icon-guanaifumu
  • 学士帽
    .icon-xueshimao
  • 关闭
    .icon-guanbi
  • 查找
    .icon-chazhao
  • .icon-gou1
  • 注册-打钩带框
    .icon-zhuce-dagoudaikuang
  • 开关_2
    .icon-kaiguan_
  • 开关 开
    .icon-kaiguankai
  • 微信支付
    .icon-weixinzhifu
  • 礼物
    .icon-818282
  • 删 除
    .icon-shanchu1
  • 向下
    .icon-xiangxia
  • .icon-gou
  • 皇冠
    .icon-huangguan
  • 下载
    .icon-xiazai
  • 左箭头
    .icon-arrow-right-bottom
  • 582-单线,骑行
    .icon-582danxianqixing
  • 运动
    .icon-yundong
  • 登山活动
    .icon-dengshanhuodong
  • 潜水
    .icon-MaskSnorkel
  • 滑雪
    .icon-Skiing
  • 帆船
    .icon-Windsurfing
  • 跑步
    .icon-paobu
  • 足球场-01
    .icon-zuqiuchang-
  • 修改资料
    .icon-xiugaiziliao
  • 删除
    .icon-shanchu
  • 联系人
    .icon-lianxiren
  • 邀请有礼
    .icon-yaoqingyouli
  • 邀请码填充
    .icon-yaoqingmatianchong
  • 首页-设置
    .icon-shezhi
  • .icon-jia
  • .icon-jian
  • 中国地图
    .icon-zhongguoditu
  • 打电话
    .icon-dadianhua
  • 母婴亲子
    .icon-muyingqinzi
  • 类型默认图-投票1
    .icon-leixingmorentu-toupiao
  • .icon-ren
  • 未成年人特定重大疾病关爱保险金
    .icon-weichengnianrentedingzhongdajibingguanaibaoxianjin
  • 天数-当前选中
    .icon-tianshudangqianxuanzhong
  • 目的地
    .icon-mudedi
  • 09_财富中心
    .icon-09caifuzhongxin
  • 财富中心
    .icon-caifuzhongxin
  • pdf
    .icon-pdf
  • phone menu-02
    .icon-phonemenu02
  • 男人
    .icon-nanren
  • 女性-人物
    .icon-iconfontnvtouxiang
  • 旅行
    .icon-lvhang
  • 户外2
    .icon-huwai
  • 留学-实心
    .icon-liuxue-shixin
  • 支付宝
    .icon-icon-alipay
  • 微信
    .icon-weixin
  • 用户
    .icon-yonghu1
  • 电话
    .icon-dianhua
  • 菜单
    .icon-caidan
  • 银行卡
    .icon-icon
  • 密码
    .icon-tubiao02
  • 身份证
    .icon-shenfenzheng
  • 银行
    .icon-yinhang
  • 用户
    .icon-yonghu
  • 验证码 (3)
    .icon-yanzhengma3

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-xiansuo1
  • 移动互联网
    #icon-yidonghulianwang2
  • 字典
    #icon-zidian
  • 字典
    #icon-zidian1
  • 资料库
    #icon-ziliaoku
  • 资料库
    #icon-ziliaoku1
  • 海报
    #icon-haibao-1
  • 海报
    #icon-haibao
  • 诊所中心
    #icon-zhensuozhongxin
  • 小诊所
    #icon-xiaozhensuo
  • 移动互联网
    #icon-yidonghulianwang
  • 执业证号
    #icon-zhiyezhenghao
  • 线索
    #icon-xiansuo
  • 职业
    #icon-zhiye
  • AI
    #icon-AI
  • 保单样本
    #icon-baodanyangben
  • 分享文章
    #icon-fenxiangwenzhang
  • 找资料
    #icon-zhaoziliao
  • 海报组件
    #icon-haibaozujian
  • 加号
    #icon-jiahao
  • 商机
    #icon-shangji
  • 保存
    #icon-save
  • 退出 (1)
    #icon-tuichu
  • 文件
    #icon-wenjian
  • 下载
    #icon-xiazai1
  • 教育
    #icon-jiaoyu
  • 咨询
    #icon-btnconsult
  • 在线
    #icon-zaixian
  • 分销 - 指纹
    #icon-zhiwen
  • ai
    #icon-ai
  • 职业类别
    #icon-zhiyeleibie
  • 公告
    #icon-gonggao
  • 医疗卫生-14
    #icon-yiliaoweisheng-
  • #icon-qian1
  • 皇冠 (1)
    #icon-huangguan1
  • 投保申请
    #icon-toubaoshenqing
  • 定制
    #icon-dingzhi
  • ai人工智能
    #icon-airengongzhineng
  • AK-MN上传图片
    #icon-mn_shangchuantupian
  • 支付平台-银联
    #icon-zhifupingtai-yinlian
  • 预算
    #icon-yusuan
  • 孩子
    #icon-haizi
  • material,疑惑,问号
    #icon-ic_help_px
  • 简介
    #icon-jianjie
  • 办理ETC-配偶
    #icon-banliETC-peiou
  • 孩子名字
    #icon-haizimingzi
  • 注意事项
    #icon-zhuyishixiang
  • 保障 @1x
    #icon-baozhangx
  • #icon-qian
  • 家庭情况
    #icon-jiatingqingkuang
  • 数据解读
    #icon-shujujiedu
  • 风险
    #icon-fengxian
  • 方案
    #icon-fangan
  • 发现
    #icon-iconfontexplore
  • 首页 (2)
    #icon-shouye2
  • 发现
    #icon-faxian
  • 首页
    #icon-shouye
  • 引导箭头
    #icon-yindaojiantou
  • 在线客服
    #icon-zaixiankefu
  • #icon-money-more
  • 提现
    #icon-tixian
  • 箭头
    #icon-ar-r
  • 收益金额高
    #icon-icon3
  • 支出记账
    #icon-zhichujizhang
  • 儿童票
    #icon-ertongpiao
  • 五角星
    #icon-wujiaoxing
  • 五角星
    #icon-wujiaoxing-1
  • 圆钩
    #icon-yuangou
  • 医疗4
    #icon-yiliao
  • 转发14 线
    #icon-zhuanfaxian
  • 交通事故
    #icon-jiaotongshigu
  • 商业险
    #icon-shangyexian
  • 人才申报-01
    #icon-rencaishenbao-
  • 车辆
    #icon-cheliang
  • 客服
    #icon-kefu
  • 列表模式
    #icon-liebiaomoshi
  • 推荐 (1)
    #icon-tuijian
  • 代理商申请
    #icon-dailishangshenqing
  • 补胎
    #icon-butai
  • 勾选—新—灰色-04
    #icon-gouxuanxinhuise-
  • 勾选
    #icon-gouxuan
  • 点赞
    #icon-dianzan
  • 钻石
    #icon-zuanshi
  • 书籍
    #icon-shuji
  • 天平
    #icon-tianping
  • 父母
    #icon-53
  • 编辑
    #icon-bianji
  • 医疗
    #icon-tubiao27
  • 重大疾病2
    #icon-zhongdajibing
  • 关爱父母
    #icon-guanaifumu
  • 学士帽
    #icon-xueshimao
  • 关闭
    #icon-guanbi
  • 查找
    #icon-chazhao
  • #icon-gou1
  • 注册-打钩带框
    #icon-zhuce-dagoudaikuang
  • 开关_2
    #icon-kaiguan_
  • 开关 开
    #icon-kaiguankai
  • 微信支付
    #icon-weixinzhifu
  • 礼物
    #icon-818282
  • 删 除
    #icon-shanchu1
  • 向下
    #icon-xiangxia
  • #icon-gou
  • 皇冠
    #icon-huangguan
  • 下载
    #icon-xiazai
  • 左箭头
    #icon-arrow-right-bottom
  • 582-单线,骑行
    #icon-582danxianqixing
  • 运动
    #icon-yundong
  • 登山活动
    #icon-dengshanhuodong
  • 潜水
    #icon-MaskSnorkel
  • 滑雪
    #icon-Skiing
  • 帆船
    #icon-Windsurfing
  • 跑步
    #icon-paobu
  • 足球场-01
    #icon-zuqiuchang-
  • 修改资料
    #icon-xiugaiziliao
  • 删除
    #icon-shanchu
  • 联系人
    #icon-lianxiren
  • 邀请有礼
    #icon-yaoqingyouli
  • 邀请码填充
    #icon-yaoqingmatianchong
  • 首页-设置
    #icon-shezhi
  • #icon-jia
  • #icon-jian
  • 中国地图
    #icon-zhongguoditu
  • 打电话
    #icon-dadianhua
  • 母婴亲子
    #icon-muyingqinzi
  • 类型默认图-投票1
    #icon-leixingmorentu-toupiao
  • #icon-ren
  • 未成年人特定重大疾病关爱保险金
    #icon-weichengnianrentedingzhongdajibingguanaibaoxianjin
  • 天数-当前选中
    #icon-tianshudangqianxuanzhong
  • 目的地
    #icon-mudedi
  • 09_财富中心
    #icon-09caifuzhongxin
  • 财富中心
    #icon-caifuzhongxin
  • pdf
    #icon-pdf
  • phone menu-02
    #icon-phonemenu02
  • 男人
    #icon-nanren
  • 女性-人物
    #icon-iconfontnvtouxiang
  • 旅行
    #icon-lvhang
  • 户外2
    #icon-huwai
  • 留学-实心
    #icon-liuxue-shixin
  • 支付宝
    #icon-icon-alipay
  • 微信
    #icon-weixin
  • 用户
    #icon-yonghu1
  • 电话
    #icon-dianhua
  • 菜单
    #icon-caidan
  • 银行卡
    #icon-icon
  • 密码
    #icon-tubiao02
  • 身份证
    #icon-shenfenzheng
  • 银行
    #icon-yinhang
  • 用户
    #icon-yonghu
  • 验证码 (3)
    #icon-yanzhengma3

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>