• 文山三七
    
  • 小贴士
    
  • SI社保指南
    
  • SI基本医疗
    
  • SI测企业社保
    
  • SI房贷计算
    
  • SI公积金
    
  • SI社保资讯
    
  • SI失业保险
    
  • SI工伤保险
    
  • SI社保计算
    
  • SI增减员截止
    
  • SI养老保险
    
  • SI退休计算
    
  • 联系我们
    
  • 意见反馈
    
  • s办事指南
    
  • s房贷计算
    
  • s截止日
    
  • s企业测算
    
  • s失业保险
    
  • s工伤保险
    
  • s退休金
    
  • si社保
    
  • s社保工具
    
  • s医疗保险
    
  • s养老保险
    
  • s社保话题
    
  • s住房公积金
    
  • SI社保话题
    
  • 设置
    
  • 图标-锁定
    
  • 加入收藏
    
  • 已收藏
    
  • 工伤保险
    
  • 办事指南
    
  • 房贷计算
    
  • 失业保险
    
  • 企业测算
    
  • 社保
    
  • 社保增减日
    
  • 医疗保险
    
  • 住房公积金
    
  • 退休金
    
  • 投诉
    
  • 首页2
    
  • 首页1
    
  • 菜单
    
  • 用户
    
  • 工具
    
  • 资讯1
    
  • 资讯2
    
  • 我的2
    
  • 我的1
    
  • 课程2
    
  • 课程1
    
  • 养老保险
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1697682229836') format('woff2'),
       url('iconfont.woff?t=1697682229836') format('woff'),
       url('iconfont.ttf?t=1697682229836') 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-wenshansanqi
  • 小贴士
    .icon-xiaotieshi
  • SI社保指南
    .icon-SIshebaozhinan
  • SI基本医疗
    .icon-SIjibenyiliao
  • SI测企业社保
    .icon-SIceqiyeshebao
  • SI房贷计算
    .icon-SIfangdaijisuan
  • SI公积金
    .icon-SIgongjijin
  • SI社保资讯
    .icon-SIshebaozixun
  • SI失业保险
    .icon-SIshiyebaoxian
  • SI工伤保险
    .icon-SIgongshangbaoxian
  • SI社保计算
    .icon-SIshebaojisuan
  • SI增减员截止
    .icon-SIzengjianyuanjiezhi
  • SI养老保险
    .icon-SIyanglaobaoxian
  • SI退休计算
    .icon-SItuixiujisuan
  • 联系我们
    .icon-lianxiwomen
  • 意见反馈
    .icon-yijianfankui
  • s办事指南
    .icon-sbanshizhinan
  • s房贷计算
    .icon-sfangdaijisuan
  • s截止日
    .icon-sjiezhiri
  • s企业测算
    .icon-sqiyecesuan
  • s失业保险
    .icon-sshiyebaoxian
  • s工伤保险
    .icon-sgongshangbaoxian
  • s退休金
    .icon-stuixiujin
  • si社保
    .icon-sishebao
  • s社保工具
    .icon-sshebaogongju
  • s医疗保险
    .icon-syiliaobaoxian
  • s养老保险
    .icon-syanglaobaoxian
  • s社保话题
    .icon-sshebaohuati
  • s住房公积金
    .icon-szhufanggongjijin
  • SI社保话题
    .icon-SIshebaohuati
  • 设置
    .icon-youjia_shezhi
  • 图标-锁定
    .icon-tubiao-suoding
  • 加入收藏
    .icon-jiarushoucang
  • 已收藏
    .icon-yishoucang
  • 工伤保险
    .icon-gongshangbaoxian
  • 办事指南
    .icon-banshizhinan
  • 房贷计算
    .icon-fangdaijisuan
  • 失业保险
    .icon-shiyebaoxian
  • 企业测算
    .icon-qiyecesuan
  • 社保
    .icon-shebao
  • 社保增减日
    .icon-shebaozengjianri
  • 医疗保险
    .icon-yiliaobaoxian
  • 住房公积金
    .icon-zhufanggongjijin
  • 退休金
    .icon-tuixiujin1
  • 投诉
    .icon-tousu
  • 首页2
    .icon-youjia_shouye2
  • 首页1
    .icon-youjia_shouye1
  • 菜单
    .icon-caidan
  • 用户
    .icon-yonghu
  • 工具
    .icon-gongju
  • 资讯1
    .icon-youjia_zixun1
  • 资讯2
    .icon-youjia_zixun2
  • 我的2
    .icon-youjia_wode2
  • 我的1
    .icon-youjia_wode1
  • 课程2
    .icon-xuexiicon2
  • 课程1
    .icon-xuexiicon1
  • 养老保险
    .icon-yanglaobaoxian

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-wenshansanqi
  • 小贴士
    #icon-xiaotieshi
  • SI社保指南
    #icon-SIshebaozhinan
  • SI基本医疗
    #icon-SIjibenyiliao
  • SI测企业社保
    #icon-SIceqiyeshebao
  • SI房贷计算
    #icon-SIfangdaijisuan
  • SI公积金
    #icon-SIgongjijin
  • SI社保资讯
    #icon-SIshebaozixun
  • SI失业保险
    #icon-SIshiyebaoxian
  • SI工伤保险
    #icon-SIgongshangbaoxian
  • SI社保计算
    #icon-SIshebaojisuan
  • SI增减员截止
    #icon-SIzengjianyuanjiezhi
  • SI养老保险
    #icon-SIyanglaobaoxian
  • SI退休计算
    #icon-SItuixiujisuan
  • 联系我们
    #icon-lianxiwomen
  • 意见反馈
    #icon-yijianfankui
  • s办事指南
    #icon-sbanshizhinan
  • s房贷计算
    #icon-sfangdaijisuan
  • s截止日
    #icon-sjiezhiri
  • s企业测算
    #icon-sqiyecesuan
  • s失业保险
    #icon-sshiyebaoxian
  • s工伤保险
    #icon-sgongshangbaoxian
  • s退休金
    #icon-stuixiujin
  • si社保
    #icon-sishebao
  • s社保工具
    #icon-sshebaogongju
  • s医疗保险
    #icon-syiliaobaoxian
  • s养老保险
    #icon-syanglaobaoxian
  • s社保话题
    #icon-sshebaohuati
  • s住房公积金
    #icon-szhufanggongjijin
  • SI社保话题
    #icon-SIshebaohuati
  • 设置
    #icon-youjia_shezhi
  • 图标-锁定
    #icon-tubiao-suoding
  • 加入收藏
    #icon-jiarushoucang
  • 已收藏
    #icon-yishoucang
  • 工伤保险
    #icon-gongshangbaoxian
  • 办事指南
    #icon-banshizhinan
  • 房贷计算
    #icon-fangdaijisuan
  • 失业保险
    #icon-shiyebaoxian
  • 企业测算
    #icon-qiyecesuan
  • 社保
    #icon-shebao
  • 社保增减日
    #icon-shebaozengjianri
  • 医疗保险
    #icon-yiliaobaoxian
  • 住房公积金
    #icon-zhufanggongjijin
  • 退休金
    #icon-tuixiujin1
  • 投诉
    #icon-tousu
  • 首页2
    #icon-youjia_shouye2
  • 首页1
    #icon-youjia_shouye1
  • 菜单
    #icon-caidan
  • 用户
    #icon-yonghu
  • 工具
    #icon-gongju
  • 资讯1
    #icon-youjia_zixun1
  • 资讯2
    #icon-youjia_zixun2
  • 我的2
    #icon-youjia_wode2
  • 我的1
    #icon-youjia_wode1
  • 课程2
    #icon-xuexiicon2
  • 课程1
    #icon-xuexiicon1
  • 养老保险
    #icon-yanglaobaoxian

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>