• 团队
    
  • 报价
    
  • 气泡
    
  • 顾问
    
  • 退款
    
  • 营业执照
    
  • 合同
    
  • 税务托管
    
  • 人力成本分摊
    
  • 出口退税
    
  • 时间
    
  • 分类
    
  • 咨询
    
  • 箭头 左 细
    
  • 热门
    
  • 购买 对
    
  • 售后
    
  • 资质证书
    
  • 联系
    
  • 税务
    
  • 资质
    
  • 资料
    
  • 保密
    
  • 票据领用
    
  • 售后
    
  • 财务 (1)
    
  • 人才
    
  • 资源配置
    
  • 报表
    
  • 地址
    
  • 品牌
    
  • 合同
    
  • 审核
    
  • 风险
    
  • 承诺2
    
  • 企业登记一站联办
    
  • 资料
    
  • 服务
    
  • 价格
    
  • 售后
    
  • 个人独资企业注销
    
  • 咨询
    
  • 记账
    
  • WS03-一对一
    
  • 箭头
    
  • 投资
    
  • 起名
    
  • 商店
    
  • 财务
    
  • 企业
    
  • 方案 (101)
    
  • 政府机构
    
  • 客户
    
  • 公司
    
  • 公司
    
  • 春雪-公司核名
    
  • 公司
    
  • 合伙人
    
  • 经营异常名录信息查询
    
  • 签合同
    
  • 电量年报
    
  • 专家
    
  • 咨询
    
  • 诊断
    
  • 管家
    
  • 公司
    
  • icon-顾问 (2)
    
  • 公司
    
  • 投诉
    
  • 小微企业税收减免
    
  • 人才引进落户
    
  • 研发
    
  • 资金
    
  • 品牌形象
    
  • 投标
    
  • 支持
    
  • 科技创新
    
  • 箭头
    
  • 修 改
    
  • 删 除
    
  • 四只团结手
    
  • 火 (1)
    
  • 查看
    
  • 箭头
    
  • 活力
    
  • 年轻人
    
  • 开户
    
  • 投资
    
  • 综合
    
  • VS
    
  • 热线电话
    
  • 印章
    
  • 金融
    
  • 记账
    
  • 鼠标
    
  • 客服
    
  • 闪电
    
  • 公司注销
    
  • 有限公司注册
    
  • 售后服务
    
  • 法律
    
  • 箭头
    
  • 注册
    
  • 知识产权
    
  • 年报
    
  • 公司注销
    
  • 公司注册
    
  • 申报情况
    
  • 困难申请
    
  • 搜索
    
  • 资质
    
  • 安全
    
  • 多元化
    
  • 箭头
    
  • 印章
    
  • 服 务
    
  • 企业服务动态
    
  • 服务流程
    
  • 鼠标
    
  • 箭头
    
  • 税收财政
    
  • 地址
    
  • 政府信息公开年报
    
  • 电 话
    
  • vs
    
  • 团 队.svg
    
  • 

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-tuandui
  • 报价
    .icon-baojia
  • 气泡
    .icon-qipao
  • 顾问
    .icon-guwen
  • 退款
    .icon-tuikuan
  • 营业执照
    .icon-yingyezhizhao
  • 合同
    .icon-hetong
  • 税务托管
    .icon-shuiwutuoguan
  • 人力成本分摊
    .icon-icon-toolbar-operation-lcss
  • 出口退税
    .icon-chukoutuishui
  • 时间
    .icon-shijian
  • 分类
    .icon-fenlei1-copy
  • 咨询
    .icon-zixun2
  • 箭头 左 细
    .icon-arrow-down
  • 热门
    .icon-remen
  • 购买 对
    .icon-dui
  • 售后
    .icon-shouhou1
  • 资质证书
    .icon-zizhizhengshu
  • 联系
    .icon-lianxi
  • 税务
    .icon-shuiwu
  • 资质
    .icon-APPtubiao-
  • 资料
    .icon-ziliao1
  • 保密
    .icon-baomi
  • 票据领用
    .icon-piaojulingyong
  • 售后
    .icon-shouhou2
  • 财务 (1)
    .icon-caiwu1
  • 人才
    .icon-rencai
  • 资源配置
    .icon-ziyuanpeizhi
  • 报表
    .icon-baobiao
  • 地址
    .icon-dizhi1
  • 品牌
    .icon-pinpai
  • 合同
    .icon-hetong1
  • 审核
    .icon-shenhe
  • 风险
    .icon-fengxian
  • 承诺2
    .icon-chengnuo2
  • 企业登记一站联办
    .icon-qiyedengjiyizhanlianban
  • 资料
    .icon-ziliao
  • 服务
    .icon-fuwu1
  • 价格
    .icon-jiage
  • 售后
    .icon-shouhou
  • 个人独资企业注销
    .icon-gerenduziqiyezhuxiao
  • 咨询
    .icon-zixun
  • 记账
    .icon-jizhang1
  • WS03-一对一
    .icon-WSicon-yiduiyi
  • 箭头
    .icon-klineleftmove
  • 投资
    .icon-touzi1
  • 起名
    .icon-qiming
  • 商店
    .icon-icon-test2
  • 财务
    .icon-caiwu
  • 企业
    .icon-qiye
  • 方案 (101)
    .icon-fangan
  • 政府机构
    .icon-zhengfujigou
  • 客户
    .icon-color-link
  • 公司
    .icon-gongsi
  • 公司
    .icon-gongsi1
  • 春雪-公司核名
    .icon-chunxueicon-
  • 公司
    .icon-gongsi2
  • 合伙人
    .icon-hehuoren
  • 经营异常名录信息查询
    .icon-jingyingyichangmingluxinxichaxun
  • 签合同
    .icon-qianhetong
  • 电量年报
    .icon-dianliangnianbao
  • 专家
    .icon-zhuanjia
  • 咨询
    .icon-zixun1
  • 诊断
    .icon-zhenduan
  • 管家
    .icon-guanjia
  • 公司
    .icon-company
  • icon-顾问 (2)
    .icon-guwen2
  • 公司
    .icon-gongsi3
  • 投诉
    .icon-tousu
  • 小微企业税收减免
    .icon-DiscountRule
  • 人才引进落户
    .icon-rencaiyinjinlahu
  • 研发
    .icon-yanfa
  • 资金
    .icon-zijin
  • 品牌形象
    .icon-pinpaixingxiang
  • 投标
    .icon-toubiao
  • 支持
    .icon-tubiaozhengli-529
  • 科技创新
    .icon-kejichuangxin-01
  • 箭头
    .icon-arrow_line_
  • 修 改
    .icon-xiugai
  • 删 除
    .icon-shanchu
  • 四只团结手
    .icon-sizhituanjieshou_huaban
  • 火 (1)
    .icon-huo
  • 查看
    .icon-chakan
  • 箭头
    .icon-jiantou2
  • 活力
    .icon-huoli
  • 年轻人
    .icon-nianqingren
  • 开户
    .icon-kaihu
  • 投资
    .icon-touzi
  • 综合
    .icon-synthesize
  • VS
    .icon-vs
  • 热线电话
    .icon-hotline
  • 印章
    .icon-yinzhang
  • 金融
    .icon-jinrong
  • 记账
    .icon-jizhang
  • 鼠标
    .icon-shubiao
  • 客服
    .icon-kefu
  • 闪电
    .icon-shandian
  • 公司注销
    .icon-gongsizhuxiao
  • 有限公司注册
    .icon-youxiangongsizhuce
  • 售后服务
    .icon-shouhoufuwu
  • 法律
    .icon-falv
  • 箭头
    .icon-biaoqing
  • 注册
    .icon-zhuce
  • 知识产权
    .icon-zhishichanquan
  • 年报
    .icon-nianbao
  • 公司注销
    .icon-icon-test
  • 公司注册
    .icon-icon-test1
  • 申报情况
    .icon-shenbaoqingkuang
  • 困难申请
    .icon-kunnanshenqing
  • 搜索
    .icon-sousuo
  • 资质
    .icon-zizhi
  • 安全
    .icon-gailananquan
  • 多元化
    .icon-duoyuanhua
  • 箭头
    .icon-jiantou
  • 印章
    .icon-yinzhang1
  • 服 务
    .icon-fuwu
  • 企业服务动态
    .icon-qiyefuwudongtai
  • 服务流程
    .icon-fuwuliucheng
  • 鼠标
    .icon-shubiao1
  • 箭头
    .icon-jiantou1
  • 税收财政
    .icon-shuishouxuanchuan
  • 地址
    .icon-dizhi
  • 政府信息公开年报
    .icon-zhengfuxinxigongkainianbao
  • 电 话
    .icon-dianhua
  • vs
    .icon-vs1
  • 团 队.svg
    .icon-tuanduisvg
  • .icon-cuo

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-tuandui
  • 报价
    #icon-baojia
  • 气泡
    #icon-qipao
  • 顾问
    #icon-guwen
  • 退款
    #icon-tuikuan
  • 营业执照
    #icon-yingyezhizhao
  • 合同
    #icon-hetong
  • 税务托管
    #icon-shuiwutuoguan
  • 人力成本分摊
    #icon-icon-toolbar-operation-lcss
  • 出口退税
    #icon-chukoutuishui
  • 时间
    #icon-shijian
  • 分类
    #icon-fenlei1-copy
  • 咨询
    #icon-zixun2
  • 箭头 左 细
    #icon-arrow-down
  • 热门
    #icon-remen
  • 购买 对
    #icon-dui
  • 售后
    #icon-shouhou1
  • 资质证书
    #icon-zizhizhengshu
  • 联系
    #icon-lianxi
  • 税务
    #icon-shuiwu
  • 资质
    #icon-APPtubiao-
  • 资料
    #icon-ziliao1
  • 保密
    #icon-baomi
  • 票据领用
    #icon-piaojulingyong
  • 售后
    #icon-shouhou2
  • 财务 (1)
    #icon-caiwu1
  • 人才
    #icon-rencai
  • 资源配置
    #icon-ziyuanpeizhi
  • 报表
    #icon-baobiao
  • 地址
    #icon-dizhi1
  • 品牌
    #icon-pinpai
  • 合同
    #icon-hetong1
  • 审核
    #icon-shenhe
  • 风险
    #icon-fengxian
  • 承诺2
    #icon-chengnuo2
  • 企业登记一站联办
    #icon-qiyedengjiyizhanlianban
  • 资料
    #icon-ziliao
  • 服务
    #icon-fuwu1
  • 价格
    #icon-jiage
  • 售后
    #icon-shouhou
  • 个人独资企业注销
    #icon-gerenduziqiyezhuxiao
  • 咨询
    #icon-zixun
  • 记账
    #icon-jizhang1
  • WS03-一对一
    #icon-WSicon-yiduiyi
  • 箭头
    #icon-klineleftmove
  • 投资
    #icon-touzi1
  • 起名
    #icon-qiming
  • 商店
    #icon-icon-test2
  • 财务
    #icon-caiwu
  • 企业
    #icon-qiye
  • 方案 (101)
    #icon-fangan
  • 政府机构
    #icon-zhengfujigou
  • 客户
    #icon-color-link
  • 公司
    #icon-gongsi
  • 公司
    #icon-gongsi1
  • 春雪-公司核名
    #icon-chunxueicon-
  • 公司
    #icon-gongsi2
  • 合伙人
    #icon-hehuoren
  • 经营异常名录信息查询
    #icon-jingyingyichangmingluxinxichaxun
  • 签合同
    #icon-qianhetong
  • 电量年报
    #icon-dianliangnianbao
  • 专家
    #icon-zhuanjia
  • 咨询
    #icon-zixun1
  • 诊断
    #icon-zhenduan
  • 管家
    #icon-guanjia
  • 公司
    #icon-company
  • icon-顾问 (2)
    #icon-guwen2
  • 公司
    #icon-gongsi3
  • 投诉
    #icon-tousu
  • 小微企业税收减免
    #icon-DiscountRule
  • 人才引进落户
    #icon-rencaiyinjinlahu
  • 研发
    #icon-yanfa
  • 资金
    #icon-zijin
  • 品牌形象
    #icon-pinpaixingxiang
  • 投标
    #icon-toubiao
  • 支持
    #icon-tubiaozhengli-529
  • 科技创新
    #icon-kejichuangxin-01
  • 箭头
    #icon-arrow_line_
  • 修 改
    #icon-xiugai
  • 删 除
    #icon-shanchu
  • 四只团结手
    #icon-sizhituanjieshou_huaban
  • 火 (1)
    #icon-huo
  • 查看
    #icon-chakan
  • 箭头
    #icon-jiantou2
  • 活力
    #icon-huoli
  • 年轻人
    #icon-nianqingren
  • 开户
    #icon-kaihu
  • 投资
    #icon-touzi
  • 综合
    #icon-synthesize
  • VS
    #icon-vs
  • 热线电话
    #icon-hotline
  • 印章
    #icon-yinzhang
  • 金融
    #icon-jinrong
  • 记账
    #icon-jizhang
  • 鼠标
    #icon-shubiao
  • 客服
    #icon-kefu
  • 闪电
    #icon-shandian
  • 公司注销
    #icon-gongsizhuxiao
  • 有限公司注册
    #icon-youxiangongsizhuce
  • 售后服务
    #icon-shouhoufuwu
  • 法律
    #icon-falv
  • 箭头
    #icon-biaoqing
  • 注册
    #icon-zhuce
  • 知识产权
    #icon-zhishichanquan
  • 年报
    #icon-nianbao
  • 公司注销
    #icon-icon-test
  • 公司注册
    #icon-icon-test1
  • 申报情况
    #icon-shenbaoqingkuang
  • 困难申请
    #icon-kunnanshenqing
  • 搜索
    #icon-sousuo
  • 资质
    #icon-zizhi
  • 安全
    #icon-gailananquan
  • 多元化
    #icon-duoyuanhua
  • 箭头
    #icon-jiantou
  • 印章
    #icon-yinzhang1
  • 服 务
    #icon-fuwu
  • 企业服务动态
    #icon-qiyefuwudongtai
  • 服务流程
    #icon-fuwuliucheng
  • 鼠标
    #icon-shubiao1
  • 箭头
    #icon-jiantou1
  • 税收财政
    #icon-shuishouxuanchuan
  • 地址
    #icon-dizhi
  • 政府信息公开年报
    #icon-zhengfuxinxigongkainianbao
  • 电 话
    #icon-dianhua
  • vs
    #icon-vs1
  • 团 队.svg
    #icon-tuanduisvg
  • #icon-cuo

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>