• <<<<<<< HEAD
    邮箱
    &#xe679;
  • ======= >>>>>>> 0a037f4689e09d04a3708f6c9a4e437b7a837d03
    上引号
    &#xe678;
  • 开关 switch-基本状态-关闭状态
    &#xe674;
  • 开关 switch-基本状态-点亮状态
    &#xe676;
  • 精选产品库
    &#xe671;
  • 团队
    &#xe672;
  • 团队管理
    &#xe673;
  • 显示
    &#xe66f;
  • 隐藏
    &#xe66e;
  • 奖牌
    &#xe6bf;
  • 奖牌
    &#xe796;
  • 给父母
    &#xe66c;
  • KHCFDC_佣金
    &#xe6e4;
  • 排行榜
    &#xe66d;
  • 线索
    &#xe66b;
  • 移动互联网
    &#xe700;
  • 字典
    &#xe669;
  • 字典
    &#xe66a;
  • 资料库
    &#xe667;
  • 资料库
    &#xe668;
  • 海报
    &#xe665;
  • 海报
    &#xe666;
  • 诊所中心
    &#xe663;
  • 小诊所
    &#xe64c;
  • 移动互联网
    &#xe6c6;
  • 执业证号
    &#xe73a;
  • 线索
    &#xe64e;
  • 职业
    &#xe64f;
  • AI
    &#xe677;
  • 保单样本
    &#xe650;
  • 分享文章
    &#xe651;
  • 找资料
    &#xe652;
  • 海报组件
    &#xe661;
  • 加号
    &#xe64b;
  • 商机
    &#xe65d;
  • 保存
    &#xe65e;
  • 退出 (1)
    &#xe64a;
  • 文件
    &#xe646;
  • 下载
    &#xe647;
  • 教育
    &#xe648;
  • 咨询
    &#xe6ae;
  • 在线
    &#xe643;
  • 分销 - 指纹
    &#xe644;
  • ai
    &#xe6aa;
  • 职业类别
    &#xe6e3;
  • 公告
    &#xe645;
  • 医疗卫生-14
    &#xed53;
  • &#xe659;
  • 皇冠 (1)
    &#xe6a2;
  • 投保申请
    &#xe660;
  • 定制
    &#xe641;
  • ai人工智能
    &#xe642;
  • AK-MN上传图片
    &#xe640;
  • 支付平台-银联
    &#xe63e;
  • 预算
    &#xe63d;
  • 孩子
    &#xe63f;
  • material,疑惑,问号
    &#xe65a;
  • 简介
    &#xe73c;
  • 办理ETC-配偶
    &#xe63a;
  • 孩子名字
    &#xe63c;
  • 注意事项
    &#xe636;
  • 保障 @1x
    &#xe635;
  • &#xe65c;
  • 家庭情况
    &#xe858;
  • 数据解读
    &#xe656;
  • 风险
    &#xe7dd;
  • 方案
    &#xe6b5;
  • 发现
    &#xe633;
  • 首页 (2)
    &#xe681;
  • 发现
    &#xe634;
  • 首页
    &#xe65f;
  • 引导箭头
    &#xe72e;
  • 在线客服
    &#xe6f6;
  • &#xe631;
  • 提现
    &#xe632;
  • 箭头
    &#xe62d;
  • 收益金额高
    &#xe62a;
  • 支出记账
    &#xe76e;
  • 儿童票
    &#xe62f;
  • 五角星
    &#xe629;
  • 五角星
    &#xe627;
  • 圆钩
    &#xe626;
  • 医疗4
    &#xe6bd;
  • 转发14 线
    &#xe777;
  • 交通事故
    &#xe67c;
  • 商业险
    &#xe695;
  • 人才申报-01
    &#xe623;
  • 车辆
    &#xe675;
  • 客服
    &#xe621;
  • 列表模式
    &#xe6a8;
  • 推荐 (1)
    &#xe624;
  • 代理商申请
    &#xe62c;
  • 补胎
    &#xe618;
  • 勾选—新—灰色-04
    &#xe620;
  • 勾选
    &#xe6c1;
  • 点赞
    &#xe60a;
  • 钻石
    &#xe611;
  • 书籍
    &#xe77f;
  • 天平
    &#xe664;
  • 父母
    &#xe68b;
  • 编辑
    &#xe60f;
  • 医疗
    &#xe662;
  • 重大疾病2
    &#xe62b;
  • 关爱父母
    &#xe613;
  • 学士帽
    &#xe6c0;
  • 关闭
    &#xe79a;
  • 查找
    &#xe61c;
  • &#xe614;
  • 注册-打钩带框
    &#xe622;
  • 开关_2
    &#xe60b;
  • 开关 开
    &#xe60e;
  • 微信支付
    &#xe609;
  • 礼物
    &#xe649;
  • 删 除
    &#xe610;
  • 向下
    &#xe727;
  • &#xe628;
  • 皇冠
    &#xe607;
  • 下载
    &#xe7bb;
  • 左箭头
    &#xe606;
  • 582-单线,骑行
    &#xe9be;
  • 运动
    &#xe605;
  • 登山活动
    &#xe670;
  • 潜水
    &#xe615;
  • 滑雪
    &#xe61d;
  • 帆船
    &#xe61f;
  • 跑步
    &#xe68d;
  • 足球场-01
    &#xe61e;
  • 修改资料
    &#xe612;
  • 删除
    &#xe62e;
  • 联系人
    &#xe60d;
  • 邀请有礼
    &#xe608;
  • 邀请码填充
    &#xe639;
  • 首页-设置
    &#xe63b;
  • &#xe690;
  • &#xe692;
  • 中国地图
    &#xe6f4;
  • 打电话
    &#xe61b;
  • 母婴亲子
    &#xe600;
  • 类型默认图-投票1
    &#xe755;
  • &#xe658;
  • 未成年人特定重大疾病关爱保险金
    &#xe64d;
  • 天数-当前选中
    &#xe654;
  • 目的地
    &#xe6c8;
  • 09_财富中心
    &#xe68a;
  • 财富中心
    &#xe619;
  • pdf
    &#xe6ca;
  • phone menu-02
    &#xe637;
  • 男人
    &#xe617;
  • 女性-人物
    &#xe638;
  • 旅行
    &#xe603;
  • 户外2
    &#xe61a;
  • 留学-实心
    &#xe604;
  • 支付宝
    &#xe625;
  • 微信
    &#xe602;
  • 用户
    &#xe6d8;
  • 电话
    &#xe653;
  • 菜单
    &#xe65b;
  • 银行卡
    &#xe60c;
  • 密码
    &#xe601;
  • 身份证
    &#xe655;
  • 银行
    &#xe616;
  • 用户
    &#xe630;
  • 验证码 (3)
    &#xe657;

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"。

  • <<<<<<< HEAD
    邮箱
    .icon-youxiang
  • ======= >>>>>>> 0a037f4689e09d04a3708f6c9a4e437b7a837d03
    上引号
    .icon-shangyinhao
  • 开关 switch-基本状态-关闭状态
    .icon-kaiguanswitch-jibenzhuangtai-dianliangzhuangtai
  • 开关 switch-基本状态-点亮状态
    .icon-kaiguanswitch-jibenzhuangtai-dianliangzhuangtai-copy
  • 精选产品库
    .icon-jingxuanchanpinku
  • 团队
    .icon-tuandui
  • 团队管理
    .icon-tuanduiguanlisvg
  • 显示
    .icon-xianshi
  • 隐藏
    .icon-yincang
  • 奖牌
    .icon-medal
  • 奖牌
    .icon-jiangpai
  • 给父母
    .icon-geifumu
  • KHCFDC_佣金
    .icon-yongjin
  • 排行榜
    .icon-paihangbang
  • 线索
    .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-youxiang
  • 上引号
    #icon-shangyinhao
  • 开关 switch-基本状态-关闭状态
    #icon-kaiguanswitch-jibenzhuangtai-dianliangzhuangtai
  • 开关 switch-基本状态-点亮状态
    #icon-kaiguanswitch-jibenzhuangtai-dianliangzhuangtai-copy
  • 精选产品库
    #icon-jingxuanchanpinku
  • 团队
    #icon-tuandui
  • 团队管理
    #icon-tuanduiguanlisvg
  • 显示
    #icon-xianshi
  • 隐藏
    #icon-yincang
  • 奖牌
    #icon-medal
  • 奖牌
    #icon-jiangpai
  • 给父母
    #icon-geifumu
  • KHCFDC_佣金
    #icon-yongjin
  • 排行榜
    #icon-paihangbang
  • 线索
    #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>