• 下箭头
    
  • 对号
    
  • 18生命周期
    
  • 电话
    
  • 错号
    
  • 对号2
    
  • 个人资料
    
  • 二维码
    
  • 公告法规
    
  • 客服
    
  • 链接
    
  • 社保
    
  • 沙漏
    
  • 社保-养老保险-待遇信息
    
  • 社保-养老保险-缴费情况
    
  • 问号
    
  • 药店
    
  • 信息校核
    
  • 找周边
    
  • 基本信息
    
  • 卡挂失
    
  • 享受政策
    
  • 参保登记
    
  • 投资明细
    
  • 
  • 身份认证
    
  • 登记信息
    
  • 指南
    
  • 计算器
    
  • 生存指南查询
    
  • 待遇明细
    
  • 浏览器打开
    
  • 缴费情况
    
  • 主页-实心
    
  • 医疗报销
    
  • 异地居住人员转诊记录
    
  • 待遇领取明细
    
  • 退休领取标准
    
  • 退休年历调整
    
  • 退休待遇
    
  • 认定鉴定
    
  • close
    
  • arrow-down-2
    
  • 个人现金报销
    
  • 个人账户收支
    
  • 个人转外就医
    
  • 急诊备案登记
    
  • 三项目录
    
  • 消费记录
    
  • 社保卡号
    
  • 定位
    
  • 默认用户
    
  • 下拉指向
    
  • 医保消费明细
    
  • 个人中心-版本更新
    
  • 个人中心-客服
    
  • 个人中心-好友分享
    
  • 个人中心-关于
    
  • 个人中心-输入密码
    
  • 消费明细
    
  • 身份证
    
  • 新用户注册
    
  • 联系信息修改
    
  • 身份证上传
    
  • 认证
    
  • 登记证
    
  • 补贴情况
    
  • 社保-养老保险-个人账户
    
  • 异地居民转诊备案
    
  • 缴费情况
    
  • 个人就医购药
    
  • 个人权益登记
    
  • 密码
    
  • 个人信息查询
    
  • 特殊疾病登记
    
  • 首页-状态追踪
    
  • 盾牌
    
  • 放大镜
    
  • 社保-养老保险-基本信息
    
  • 医院
    
  • 手机
    
  • 联系信息修改
    
  • 右返回
    
  • 左返回
    
  • 我的点击
    
  • 便民-实心
    
  • 我的社保
    
  • 就业服务
    
  • 个人信息
    
  • 对号
    
  • 蓝牙
    
  • usb
    
  • 网络
    
  • 用户
    
  • 指纹
    
  • 链接失败
    
  • 检测中
    
  • 链接成功
    
  • 养老保险待遇领取资格认证
    
  • 待遇领取资格认证查询
    
  • 忘记密码
    
  • 首页-经办-实
    
  • 首页-经办
    
  • 社保缴费设置
    
  • 
  • 社保-就业信息登记
    
  • 首页-就业人才服务
    
  • 社保-政府问卷调查
    
  • 社保-求职信息精准推送
    
  • 社保-个人信用查询
    
  • 城乡居民参保缴费支付
    
  • 岗位招聘
    
  • 养老保险个体户收缴
    
  • 我的-温情提示
    
  • 养老-离退休人员养老金拨付记录查询
    
  • 中国农业银行
    
  • 中国银行
    
  • 下拉
    
  • 搜索关闭
    
  • 对号
    
  • 卡激活
    
  • 卡解挂
    
  • 卡注销
    
  • 卡补办
    
  • 信息安全宣传
    
  • 养老在职转个体
    
  • 求职招聘
    
  • 就业创业服务-困难人员
    
  • 社会保险服务-个体缴费设置
    
  • 我的-五险信息 医疗
    
  • 我的-五险信息 养老
    
  • 社会保险服务-跨年补缴设置
    
  • 就业创业服务-就业援助
    
  • 社会保险服务-养老欠费补缴
    
  • 就业创业服务-就失业证
    
  • 就业创业服务-创业贷款
    
  • 社会保险服务-医保个人缴费
    
  • 就业创业服务-培训报名
    
  • 咨询-人社头条
    
  • 咨询-图片新闻
    
  • 咨询-通知公告
    
  • 咨询-政策法规
    
  • 社会保险服务-待遇领取认证
    
  • 咨询-就业信息
    
  • 社会保险服务-全民信息校核
    
  • 社会保险服务-社保卡 卡跟踪
    
  • 社会保险服务-社保卡 挂失
    
  • 工商保险
    
  • 社会保险服务-社保卡 解挂
    
  • 生育
    
  • 社会保险服务业-社保卡 注销
    
  • 登录-用户名
    
  • 登录-密码
    
  • 我的-五险信息 失业
    
  • 登录-显示密码
    
  • 首页-更多
    
  • 设置
    
  • 我的-就业
    
  • 我的-我的保险
    
  • 我的保险
    
  • 我的就业
    
  • 新用户注册
    
  • 忘记密码
    
  • 关于
    
  • 客服电话
    
  • 身份认证
    
  • 最新职位
    
  • 热门职位
    
  • 全省职位
    
  • 就业登记-失败
    
  • 就业登记-成功
    
  • 我的简历
    
  • 右返回
    
  • 左返回
    
  • 我的业务
    
  • 我的社保卡
    
  • 我的就业
    
  • 下箭头
    
  • 右箭头
    
  • 人脸识别
    
  • 电子社保卡
    
  • 扫一扫
    
  • 发送邀请函
    
  • 接收邀请函
    
  • 我的简历
    
  • 城乡居民医疗保险停用
    
  • 享受政策信息
    
  • 就业再就业培训
    
  • 就业登记信息
    
  • 就业失业登记信息
    
  • 就业补贴信息
    
  • 我的家庭成员
    
  • 个人工资条
    
  • 我的工资条
    
  • 个体退休申报
    
  • 社保卡申领
    
  • 点击上传
    
  • 企业小标识
    
  • 人事人才
    
  • 就业政策
    
  • 创业政策
    
  • 社会保险
    
  • 已审核
    
  • 待审核
    
  • 已驳回
    
  • 服务
    
  • 服务(经过)
    
  • 首页
    
  • 首页(经过)
    
  • 资讯
    
  • 资讯(经过)
    
  • 我的
    
  • 我的(经过)
    
  • 培训补贴
    
  • 求职信息
    
  • 社保补贴
    
  • 就业登记
    
  • 失业登记
    
  • 个人信息
    
  • 全面信息审核
    
  • 业务经办
    
  • 待遇领取认证
    
  • 社保查询
    
  • 养老欠费补交
    
  • 社保卡
    
  • 跨年缴费设置
    
  • 医保个人缴费
    
  • 个体缴费设置
    
  • 就失业证
    
  • 技工教育
    
  • 稳岗补贴
    
  • 孵化基地
    
  • 创业项目
    
  • 证书查询
    
  • 语音
    
  • 消息
    
  • 咨询
    
  • 推荐服务
    
  • 删除
    
  • 选中
    
  • 未选中
    
  • 添加
    
  • 设置
    
  • 头像
    
  • 岗位类型
    
  • 定位
    
  • 手机
    
  • 职位
    
  • 硕士
    
  • 工资
    
  • 消息对话
    
  • 公司
    
  • 项目
    
  • 未认证
    
  • 交流会
    
  • 语言
    
  • 证书
    
  • 筛选
    
  • 相机
    
  • 人脸识别
    
  • 关闭
    
  • 已选择
    
  • 头像标签
    
  • 技能补贴
    
  • 专业技能
    
  • 教育经历
    
  • 在职转个体
    
  • 城乡居民医疗保险停保
    
  • 退休申请
    

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-xiajiantou
  • 对号
    .icon-duihao
  • 18生命周期
    .icon-shengmingzhouqi
  • 电话
    .icon-dianhua
  • 错号
    .icon-cuohao
  • 对号2
    .icon-duihao1
  • 个人资料
    .icon-gerenziliao
  • 二维码
    .icon-erweima
  • 公告法规
    .icon-gonggaofagui
  • 客服
    .icon-kefu
  • 链接
    .icon-lianjie
  • 社保
    .icon-shebao
  • 沙漏
    .icon-shalou
  • 社保-养老保险-待遇信息
    .icon-shebao-yanglaobaoxian-daiyuxinxi
  • 社保-养老保险-缴费情况
    .icon-shebao-yanglaobaoxian-jiaofeiqingkuang
  • 问号
    .icon-wenhao
  • 药店
    .icon-yaodian
  • 信息校核
    .icon-xinxixiaohe
  • 找周边
    .icon-zhaozhoubian
  • 基本信息
    .icon-jibenxinxi
  • 卡挂失
    .icon-qiaguashi
  • 享受政策
    .icon-xiangshouzhengce
  • 参保登记
    .icon-canbaodengji
  • 投资明细
    .icon-touzimingxi1
  • .icon-wo1
  • 身份认证
    .icon-shenfenrenzheng1
  • 登记信息
    .icon-dengjixinxi
  • 指南
    .icon-zhinan1
  • 计算器
    .icon-jisuanqi1
  • 生存指南查询
    .icon-shengcunzhinanchaxun1
  • 待遇明细
    .icon-daiyumingxi
  • 浏览器打开
    .icon-liulanqidakai
  • 缴费情况
    .icon-jiaofeiqingkuang2
  • 主页-实心
    .icon-zhuye-shixin
  • 医疗报销
    .icon-yiliaobaoxiao
  • 异地居住人员转诊记录
    .icon-yidijuzhurenyuanzhuanzhenjilu
  • 待遇领取明细
    .icon-daiyulingqumingxi
  • 退休领取标准
    .icon-tuixiulingqubiaozhun
  • 退休年历调整
    .icon-tuixiunianlitiaozheng
  • 退休待遇
    .icon-tuixiudaiyu
  • 认定鉴定
    .icon-rendingjianding
  • close
    .icon-close
  • arrow-down-2
    .icon-arrow-down-
  • 个人现金报销
    .icon-gerenxianjinbaoxiao
  • 个人账户收支
    .icon-gerenzhanghushouzhi
  • 个人转外就医
    .icon-gerenzhuanwaijiuyi
  • 急诊备案登记
    .icon-jizhenbeiandengji
  • 三项目录
    .icon-sanxiangmulu
  • 消费记录
    .icon-xiaofeijilu
  • 社保卡号
    .icon-shebaoqiahao
  • 定位
    .icon-dingwei
  • 默认用户
    .icon-morenyonghu
  • 下拉指向
    .icon-xialazhixiang
  • 医保消费明细
    .icon-yibaoxiaofeimingxi
  • 个人中心-版本更新
    .icon-gerenzhongxin-banbengengxin
  • 个人中心-客服
    .icon-gerenzhongxin-kefu
  • 个人中心-好友分享
    .icon-gerenzhongxin-haoyoufenxiang
  • 个人中心-关于
    .icon-gerenzhongxin-guanyu
  • 个人中心-输入密码
    .icon-gerenzhongxin-shurumima
  • 消费明细
    .icon-xiaofeimingxi
  • 身份证
    .icon-shenfenzheng
  • 新用户注册
    .icon-xinyonghuzhuce
  • 联系信息修改
    .icon-lianxixinxixiugai
  • 身份证上传
    .icon-shenfenzhengshangchuan
  • 认证
    .icon-renzheng
  • 登记证
    .icon-dengjizheng
  • 补贴情况
    .icon-butieqingkuang1
  • 社保-养老保险-个人账户
    .icon-shebao-yanglaobaoxian-gerenzhanghu
  • 异地居民转诊备案
    .icon-yidijuminzhuanzhenbeian
  • 缴费情况
    .icon-jiaofeiqingkuang
  • 个人就医购药
    .icon-gerenjiuyigouyao
  • 个人权益登记
    .icon-gerenquanyidengji
  • 密码
    .icon-mima
  • 个人信息查询
    .icon-gerenxinxichaxun
  • 特殊疾病登记
    .icon-teshujibingdengji
  • 首页-状态追踪
    .icon-shouye-zhuangtaizhuizong
  • 盾牌
    .icon-dunpai1
  • 放大镜
    .icon-fangdajing1
  • 社保-养老保险-基本信息
    .icon-shebao-yanglaobaoxian-jibenxinxi1
  • 医院
    .icon-yiyuan1
  • 手机
    .icon-shouji1
  • 联系信息修改
    .icon-lianxixinxixiugai1
  • 右返回
    .icon-youfanhui1
  • 左返回
    .icon-zuofanhui1
  • 我的点击
    .icon-wodedianji1
  • 便民-实心
    .icon-bianmin-shixin1
  • 我的社保
    .icon-wodeshebao
  • 就业服务
    .icon-jiuyefuwu
  • 个人信息
    .icon-gerenxinxi1
  • 对号
    .icon-duihao2
  • 蓝牙
    .icon-lanya
  • usb
    .icon-usb
  • 网络
    .icon-wangluo
  • 用户
    .icon-yonghu
  • 指纹
    .icon-zhiwen
  • 链接失败
    .icon-lianjieshibai
  • 检测中
    .icon-jiancezhong
  • 链接成功
    .icon-lianjiechenggong
  • 养老保险待遇领取资格认证
    .icon-yanglaobaoxiandaiyulingquzigerenzheng
  • 待遇领取资格认证查询
    .icon-daiyulingquzigerenzhengchaxun
  • 忘记密码
    .icon-wangjimima
  • 首页-经办-实
    .icon-shouyejingban-shi
  • 首页-经办
    .icon-shouye-jingban
  • 社保缴费设置
    .icon-shebaojiaofeishezhi
  • .icon-cha1
  • 社保-就业信息登记
    .icon-shebao-jiuyexinxidengji
  • 首页-就业人才服务
    .icon-shouye-jiuyerencaifuwu
  • 社保-政府问卷调查
    .icon-shebao-zhengfuwenjuantiaocha
  • 社保-求职信息精准推送
    .icon-shebao-qiuzhixinxijingzhuntuisong
  • 社保-个人信用查询
    .icon-shebao-gerenxinyongchaxun
  • 城乡居民参保缴费支付
    .icon-chengxiangjumincanbaojiaofeizhifu
  • 岗位招聘
    .icon-gangweizhaopin
  • 养老保险个体户收缴
    .icon-yanglaobaoxiangetihushoujiao
  • 我的-温情提示
    .icon-wode-wenqingtishi
  • 养老-离退休人员养老金拨付记录查询
    .icon-yanglao-lituixiurenyuanyanglaojinbofujiluchaxun
  • 中国农业银行
    .icon-zhongguonongyeyinhang
  • 中国银行
    .icon-zhongguoyinhang
  • 下拉
    .icon-xiala
  • 搜索关闭
    .icon-shouye-danchuguanbi
  • 对号
    .icon-duihao3
  • 卡激活
    .icon-qiajihuo
  • 卡解挂
    .icon-qiajiegua
  • 卡注销
    .icon-qiazhuxiao
  • 卡补办
    .icon-qiabuban
  • 信息安全宣传
    .icon-xinxianquanxuanchuan
  • 养老在职转个体
    .icon-yanglaozaizhizhuangeti
  • 求职招聘
    .icon-jiuyechuangyefuwu-qiuzhizhaopin
  • 就业创业服务-困难人员
    .icon-jiuyechuangyefuwu-kunnanrenyuan
  • 社会保险服务-个体缴费设置
    .icon-shehuibaoxianfuwu-getijiaofeishezhi
  • 我的-五险信息 医疗
    .icon-wode-wuxianxinxiyiliao
  • 我的-五险信息 养老
    .icon-wode-wuxianxinxiyanglao
  • 社会保险服务-跨年补缴设置
    .icon-shehuibaoxianfuwu-kuanianbujiaoshezhi
  • 就业创业服务-就业援助
    .icon-jiuyechuangyefuwu-jiuyeyuanzhu
  • 社会保险服务-养老欠费补缴
    .icon-shehuibaoxianfuwu-yanglaoqianfeibujiao
  • 就业创业服务-就失业证
    .icon-jiuyechuangyefuwu-jiushiyezheng1
  • 就业创业服务-创业贷款
    .icon-jiuyechuangyefuwu-chuangyedaikuan
  • 社会保险服务-医保个人缴费
    .icon-shehuibaoxianfuwu-yibaogerenjiaofei
  • 就业创业服务-培训报名
    .icon-jiuyechuangyefuwu-peixunbaoming
  • 咨询-人社头条
    .icon-zixun-renshetoutiao
  • 咨询-图片新闻
    .icon-zixun-tupianxinwen
  • 咨询-通知公告
    .icon-zixun-tongzhigonggao
  • 咨询-政策法规
    .icon-zixun-zhengcefagui
  • 社会保险服务-待遇领取认证
    .icon-shehuibaoxianfuwu-daiyulingqurenzheng
  • 咨询-就业信息
    .icon-zixun-jiuyexinxi
  • 社会保险服务-全民信息校核
    .icon-shehuibaoxianfuwu-quanminxinxixiaohe
  • 社会保险服务-社保卡 卡跟踪
    .icon-shehuibaoxianfuwu-shebaoqiaqiagenzong
  • 社会保险服务-社保卡 挂失
    .icon-shehuibaoxianfuwu-shebaoqiaguashi
  • 工商保险
    .icon-wode-wuxianxinxigongshang
  • 社会保险服务-社保卡 解挂
    .icon-shehuibaoxianfuwu-shebaoqiajiegua
  • 生育
    .icon-wode-wuxianxinxishengyu
  • 社会保险服务业-社保卡 注销
    .icon-shehuibaoxianfuwuye-shebaoqiazhuxiao
  • 登录-用户名
    .icon-denglu-yonghuming
  • 登录-密码
    .icon-denglu-mima
  • 我的-五险信息 失业
    .icon-wode-wuxianxinxishiye
  • 登录-显示密码
    .icon-denglu-xianshimima
  • 首页-更多
    .icon-shouye-gengduo
  • 设置
    .icon-shezhi
  • 我的-就业
    .icon-wode-jiuye
  • 我的-我的保险
    .icon-wode-wodebaoxian
  • 我的保险
    .icon-wodebaoxian
  • 我的就业
    .icon-wodejiuye
  • 新用户注册
    .icon-xinyonghuzhuce1
  • 忘记密码
    .icon-wangjimima1
  • 关于
    .icon-guanyu
  • 客服电话
    .icon-kefudianhua1
  • 身份认证
    .icon-shenfenrenzheng
  • 最新职位
    .icon-zuixinzhiwei
  • 热门职位
    .icon-remenzhiwei
  • 全省职位
    .icon-quanshengzhiwei1
  • 就业登记-失败
    .icon-jiuyedengji-shibai1
  • 就业登记-成功
    .icon-jiuyedengji-chenggong1
  • 我的简历
    .icon-wodejianli
  • 右返回
    .icon-youfanhui
  • 左返回
    .icon-zuofanhui
  • 我的业务
    .icon-wodeyewu
  • 我的社保卡
    .icon-wodeshebaoqia
  • 我的就业
    .icon-wodejiuye1
  • 下箭头
    .icon-xiajiantou1
  • 右箭头
    .icon-youjiantou
  • 人脸识别
    .icon-renlianshibie
  • 电子社保卡
    .icon-dianzishebaoqia
  • 扫一扫
    .icon-saoyisao
  • 发送邀请函
    .icon-fasongyaoqinghan
  • 接收邀请函
    .icon-jieshouyaoqinghan
  • 我的简历
    .icon-wodejianli1
  • 城乡居民医疗保险停用
    .icon-chengxiangjuminyiliaobaoxiantingyong
  • 享受政策信息
    .icon-xiangshouzhengcexinxi
  • 就业再就业培训
    .icon-jiuyezaijiuyepeixun
  • 就业登记信息
    .icon-jiuyedengjixinxi
  • 就业失业登记信息
    .icon-jiuyeshiyedengjixinxi
  • 就业补贴信息
    .icon-jiuyebutiexinxi
  • 我的家庭成员
    .icon-wodejiatingchengyuan
  • 个人工资条
    .icon-gerengongzitiao
  • 我的工资条
    .icon-wodegongzitiao
  • 个体退休申报
    .icon-getituixiushenbao
  • 社保卡申领
    .icon-shebaoqiashenling
  • 点击上传
    .icon-dianjishangchuan
  • 企业小标识
    .icon-qiyexiaobiaoshi
  • 人事人才
    .icon-renshirencai
  • 就业政策
    .icon-jiuyezhengce
  • 创业政策
    .icon-chuangyezhengce
  • 社会保险
    .icon-shehuibaoxian
  • 已审核
    .icon-daishenhe
  • 待审核
    .icon-yishenhe
  • 已驳回
    .icon-yibohui
  • 服务
    .icon-fuwu
  • 服务(经过)
    .icon-fuwujingguo
  • 首页
    .icon-shouye
  • 首页(经过)
    .icon-shouyejingguo
  • 资讯
    .icon-zixun
  • 资讯(经过)
    .icon-zixunjingguo
  • 我的
    .icon-wode
  • 我的(经过)
    .icon-wodejingguo
  • 培训补贴
    .icon-peixunbutie
  • 求职信息
    .icon-qiuzhixinxi
  • 社保补贴
    .icon-shebaobutie
  • 就业登记
    .icon-jiuyedengji
  • 失业登记
    .icon-shiyedengji
  • 个人信息
    .icon-gerenxinxi
  • 全面信息审核
    .icon-quanmianxinxishenhe
  • 业务经办
    .icon-yewujingban
  • 待遇领取认证
    .icon-daiyulingqurenzheng
  • 社保查询
    .icon-shebaochaxun
  • 养老欠费补交
    .icon-yanglaoqianfeibujiao
  • 社保卡
    .icon-shebaoka
  • 跨年缴费设置
    .icon-kuanianjiaofeishezhi
  • 医保个人缴费
    .icon-yibaogerenjiaofei
  • 个体缴费设置
    .icon-getijiaofeishezhi
  • 就失业证
    .icon-jiushiyezheng
  • 技工教育
    .icon-jigongjiaoyu
  • 稳岗补贴
    .icon-wengangbutie
  • 孵化基地
    .icon-fuhuajidi
  • 创业项目
    .icon-chuangyexiangmu
  • 证书查询
    .icon-zhengshuchaxun
  • 语音
    .icon-yuyin
  • 消息
    .icon-xiaoxi
  • 咨询
    .icon-zixun1
  • 推荐服务
    .icon-tuijianfuwu
  • 删除
    .icon-shanchu
  • 选中
    .icon-xuanzhong
  • 未选中
    .icon-weixuanzhong
  • 添加
    .icon-tianjia
  • 设置
    .icon-shezhi1
  • 头像
    .icon-touxiang
  • 岗位类型
    .icon-gangweileixing
  • 定位
    .icon-dingwei1
  • 手机
    .icon-shouji
  • 职位
    .icon-zhiwei
  • 硕士
    .icon-shuoshi
  • 工资
    .icon-gongzi
  • 消息对话
    .icon-xiaoxiduihua
  • 公司
    .icon-gongsi
  • 项目
    .icon-xiangmu
  • 未认证
    .icon-weirenzheng
  • 交流会
    .icon-jiaoliuhui
  • 语言
    .icon-yuyan
  • 证书
    .icon-zhengshu
  • 筛选
    .icon-shaixuan
  • 相机
    .icon-xiangji
  • 人脸识别
    .icon-renlianshibie2
  • 关闭
    .icon-guanbi
  • 已选择
    .icon-yixuanze
  • 头像标签
    .icon-touxiangbiaoqian
  • 技能补贴
    .icon-jinengbutie
  • 专业技能
    .icon-zhuanyejineng
  • 教育经历
    .icon-jiaoyujingli
  • 在职转个体
    .icon-zaizhizhuangeti
  • 城乡居民医疗保险停保
    .icon-chengxiangjuminyiliaobaoxiantingbao
  • 退休申请
    .icon-tuixiushenqing

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-xiajiantou
  • 对号
    #icon-duihao
  • 18生命周期
    #icon-shengmingzhouqi
  • 电话
    #icon-dianhua
  • 错号
    #icon-cuohao
  • 对号2
    #icon-duihao1
  • 个人资料
    #icon-gerenziliao
  • 二维码
    #icon-erweima
  • 公告法规
    #icon-gonggaofagui
  • 客服
    #icon-kefu
  • 链接
    #icon-lianjie
  • 社保
    #icon-shebao
  • 沙漏
    #icon-shalou
  • 社保-养老保险-待遇信息
    #icon-shebao-yanglaobaoxian-daiyuxinxi
  • 社保-养老保险-缴费情况
    #icon-shebao-yanglaobaoxian-jiaofeiqingkuang
  • 问号
    #icon-wenhao
  • 药店
    #icon-yaodian
  • 信息校核
    #icon-xinxixiaohe
  • 找周边
    #icon-zhaozhoubian
  • 基本信息
    #icon-jibenxinxi
  • 卡挂失
    #icon-qiaguashi
  • 享受政策
    #icon-xiangshouzhengce
  • 参保登记
    #icon-canbaodengji
  • 投资明细
    #icon-touzimingxi1
  • #icon-wo1
  • 身份认证
    #icon-shenfenrenzheng1
  • 登记信息
    #icon-dengjixinxi
  • 指南
    #icon-zhinan1
  • 计算器
    #icon-jisuanqi1
  • 生存指南查询
    #icon-shengcunzhinanchaxun1
  • 待遇明细
    #icon-daiyumingxi
  • 浏览器打开
    #icon-liulanqidakai
  • 缴费情况
    #icon-jiaofeiqingkuang2
  • 主页-实心
    #icon-zhuye-shixin
  • 医疗报销
    #icon-yiliaobaoxiao
  • 异地居住人员转诊记录
    #icon-yidijuzhurenyuanzhuanzhenjilu
  • 待遇领取明细
    #icon-daiyulingqumingxi
  • 退休领取标准
    #icon-tuixiulingqubiaozhun
  • 退休年历调整
    #icon-tuixiunianlitiaozheng
  • 退休待遇
    #icon-tuixiudaiyu
  • 认定鉴定
    #icon-rendingjianding
  • close
    #icon-close
  • arrow-down-2
    #icon-arrow-down-
  • 个人现金报销
    #icon-gerenxianjinbaoxiao
  • 个人账户收支
    #icon-gerenzhanghushouzhi
  • 个人转外就医
    #icon-gerenzhuanwaijiuyi
  • 急诊备案登记
    #icon-jizhenbeiandengji
  • 三项目录
    #icon-sanxiangmulu
  • 消费记录
    #icon-xiaofeijilu
  • 社保卡号
    #icon-shebaoqiahao
  • 定位
    #icon-dingwei
  • 默认用户
    #icon-morenyonghu
  • 下拉指向
    #icon-xialazhixiang
  • 医保消费明细
    #icon-yibaoxiaofeimingxi
  • 个人中心-版本更新
    #icon-gerenzhongxin-banbengengxin
  • 个人中心-客服
    #icon-gerenzhongxin-kefu
  • 个人中心-好友分享
    #icon-gerenzhongxin-haoyoufenxiang
  • 个人中心-关于
    #icon-gerenzhongxin-guanyu
  • 个人中心-输入密码
    #icon-gerenzhongxin-shurumima
  • 消费明细
    #icon-xiaofeimingxi
  • 身份证
    #icon-shenfenzheng
  • 新用户注册
    #icon-xinyonghuzhuce
  • 联系信息修改
    #icon-lianxixinxixiugai
  • 身份证上传
    #icon-shenfenzhengshangchuan
  • 认证
    #icon-renzheng
  • 登记证
    #icon-dengjizheng
  • 补贴情况
    #icon-butieqingkuang1
  • 社保-养老保险-个人账户
    #icon-shebao-yanglaobaoxian-gerenzhanghu
  • 异地居民转诊备案
    #icon-yidijuminzhuanzhenbeian
  • 缴费情况
    #icon-jiaofeiqingkuang
  • 个人就医购药
    #icon-gerenjiuyigouyao
  • 个人权益登记
    #icon-gerenquanyidengji
  • 密码
    #icon-mima
  • 个人信息查询
    #icon-gerenxinxichaxun
  • 特殊疾病登记
    #icon-teshujibingdengji
  • 首页-状态追踪
    #icon-shouye-zhuangtaizhuizong
  • 盾牌
    #icon-dunpai1
  • 放大镜
    #icon-fangdajing1
  • 社保-养老保险-基本信息
    #icon-shebao-yanglaobaoxian-jibenxinxi1
  • 医院
    #icon-yiyuan1
  • 手机
    #icon-shouji1
  • 联系信息修改
    #icon-lianxixinxixiugai1
  • 右返回
    #icon-youfanhui1
  • 左返回
    #icon-zuofanhui1
  • 我的点击
    #icon-wodedianji1
  • 便民-实心
    #icon-bianmin-shixin1
  • 我的社保
    #icon-wodeshebao
  • 就业服务
    #icon-jiuyefuwu
  • 个人信息
    #icon-gerenxinxi1
  • 对号
    #icon-duihao2
  • 蓝牙
    #icon-lanya
  • usb
    #icon-usb
  • 网络
    #icon-wangluo
  • 用户
    #icon-yonghu
  • 指纹
    #icon-zhiwen
  • 链接失败
    #icon-lianjieshibai
  • 检测中
    #icon-jiancezhong
  • 链接成功
    #icon-lianjiechenggong
  • 养老保险待遇领取资格认证
    #icon-yanglaobaoxiandaiyulingquzigerenzheng
  • 待遇领取资格认证查询
    #icon-daiyulingquzigerenzhengchaxun
  • 忘记密码
    #icon-wangjimima
  • 首页-经办-实
    #icon-shouyejingban-shi
  • 首页-经办
    #icon-shouye-jingban
  • 社保缴费设置
    #icon-shebaojiaofeishezhi
  • #icon-cha1
  • 社保-就业信息登记
    #icon-shebao-jiuyexinxidengji
  • 首页-就业人才服务
    #icon-shouye-jiuyerencaifuwu
  • 社保-政府问卷调查
    #icon-shebao-zhengfuwenjuantiaocha
  • 社保-求职信息精准推送
    #icon-shebao-qiuzhixinxijingzhuntuisong
  • 社保-个人信用查询
    #icon-shebao-gerenxinyongchaxun
  • 城乡居民参保缴费支付
    #icon-chengxiangjumincanbaojiaofeizhifu
  • 岗位招聘
    #icon-gangweizhaopin
  • 养老保险个体户收缴
    #icon-yanglaobaoxiangetihushoujiao
  • 我的-温情提示
    #icon-wode-wenqingtishi
  • 养老-离退休人员养老金拨付记录查询
    #icon-yanglao-lituixiurenyuanyanglaojinbofujiluchaxun
  • 中国农业银行
    #icon-zhongguonongyeyinhang
  • 中国银行
    #icon-zhongguoyinhang
  • 下拉
    #icon-xiala
  • 搜索关闭
    #icon-shouye-danchuguanbi
  • 对号
    #icon-duihao3
  • 卡激活
    #icon-qiajihuo
  • 卡解挂
    #icon-qiajiegua
  • 卡注销
    #icon-qiazhuxiao
  • 卡补办
    #icon-qiabuban
  • 信息安全宣传
    #icon-xinxianquanxuanchuan
  • 养老在职转个体
    #icon-yanglaozaizhizhuangeti
  • 求职招聘
    #icon-jiuyechuangyefuwu-qiuzhizhaopin
  • 就业创业服务-困难人员
    #icon-jiuyechuangyefuwu-kunnanrenyuan
  • 社会保险服务-个体缴费设置
    #icon-shehuibaoxianfuwu-getijiaofeishezhi
  • 我的-五险信息 医疗
    #icon-wode-wuxianxinxiyiliao
  • 我的-五险信息 养老
    #icon-wode-wuxianxinxiyanglao
  • 社会保险服务-跨年补缴设置
    #icon-shehuibaoxianfuwu-kuanianbujiaoshezhi
  • 就业创业服务-就业援助
    #icon-jiuyechuangyefuwu-jiuyeyuanzhu
  • 社会保险服务-养老欠费补缴
    #icon-shehuibaoxianfuwu-yanglaoqianfeibujiao
  • 就业创业服务-就失业证
    #icon-jiuyechuangyefuwu-jiushiyezheng1
  • 就业创业服务-创业贷款
    #icon-jiuyechuangyefuwu-chuangyedaikuan
  • 社会保险服务-医保个人缴费
    #icon-shehuibaoxianfuwu-yibaogerenjiaofei
  • 就业创业服务-培训报名
    #icon-jiuyechuangyefuwu-peixunbaoming
  • 咨询-人社头条
    #icon-zixun-renshetoutiao
  • 咨询-图片新闻
    #icon-zixun-tupianxinwen
  • 咨询-通知公告
    #icon-zixun-tongzhigonggao
  • 咨询-政策法规
    #icon-zixun-zhengcefagui
  • 社会保险服务-待遇领取认证
    #icon-shehuibaoxianfuwu-daiyulingqurenzheng
  • 咨询-就业信息
    #icon-zixun-jiuyexinxi
  • 社会保险服务-全民信息校核
    #icon-shehuibaoxianfuwu-quanminxinxixiaohe
  • 社会保险服务-社保卡 卡跟踪
    #icon-shehuibaoxianfuwu-shebaoqiaqiagenzong
  • 社会保险服务-社保卡 挂失
    #icon-shehuibaoxianfuwu-shebaoqiaguashi
  • 工商保险
    #icon-wode-wuxianxinxigongshang
  • 社会保险服务-社保卡 解挂
    #icon-shehuibaoxianfuwu-shebaoqiajiegua
  • 生育
    #icon-wode-wuxianxinxishengyu
  • 社会保险服务业-社保卡 注销
    #icon-shehuibaoxianfuwuye-shebaoqiazhuxiao
  • 登录-用户名
    #icon-denglu-yonghuming
  • 登录-密码
    #icon-denglu-mima
  • 我的-五险信息 失业
    #icon-wode-wuxianxinxishiye
  • 登录-显示密码
    #icon-denglu-xianshimima
  • 首页-更多
    #icon-shouye-gengduo
  • 设置
    #icon-shezhi
  • 我的-就业
    #icon-wode-jiuye
  • 我的-我的保险
    #icon-wode-wodebaoxian
  • 我的保险
    #icon-wodebaoxian
  • 我的就业
    #icon-wodejiuye
  • 新用户注册
    #icon-xinyonghuzhuce1
  • 忘记密码
    #icon-wangjimima1
  • 关于
    #icon-guanyu
  • 客服电话
    #icon-kefudianhua1
  • 身份认证
    #icon-shenfenrenzheng
  • 最新职位
    #icon-zuixinzhiwei
  • 热门职位
    #icon-remenzhiwei
  • 全省职位
    #icon-quanshengzhiwei1
  • 就业登记-失败
    #icon-jiuyedengji-shibai1
  • 就业登记-成功
    #icon-jiuyedengji-chenggong1
  • 我的简历
    #icon-wodejianli
  • 右返回
    #icon-youfanhui
  • 左返回
    #icon-zuofanhui
  • 我的业务
    #icon-wodeyewu
  • 我的社保卡
    #icon-wodeshebaoqia
  • 我的就业
    #icon-wodejiuye1
  • 下箭头
    #icon-xiajiantou1
  • 右箭头
    #icon-youjiantou
  • 人脸识别
    #icon-renlianshibie
  • 电子社保卡
    #icon-dianzishebaoqia
  • 扫一扫
    #icon-saoyisao
  • 发送邀请函
    #icon-fasongyaoqinghan
  • 接收邀请函
    #icon-jieshouyaoqinghan
  • 我的简历
    #icon-wodejianli1
  • 城乡居民医疗保险停用
    #icon-chengxiangjuminyiliaobaoxiantingyong
  • 享受政策信息
    #icon-xiangshouzhengcexinxi
  • 就业再就业培训
    #icon-jiuyezaijiuyepeixun
  • 就业登记信息
    #icon-jiuyedengjixinxi
  • 就业失业登记信息
    #icon-jiuyeshiyedengjixinxi
  • 就业补贴信息
    #icon-jiuyebutiexinxi
  • 我的家庭成员
    #icon-wodejiatingchengyuan
  • 个人工资条
    #icon-gerengongzitiao
  • 我的工资条
    #icon-wodegongzitiao
  • 个体退休申报
    #icon-getituixiushenbao
  • 社保卡申领
    #icon-shebaoqiashenling
  • 点击上传
    #icon-dianjishangchuan
  • 企业小标识
    #icon-qiyexiaobiaoshi
  • 人事人才
    #icon-renshirencai
  • 就业政策
    #icon-jiuyezhengce
  • 创业政策
    #icon-chuangyezhengce
  • 社会保险
    #icon-shehuibaoxian
  • 已审核
    #icon-daishenhe
  • 待审核
    #icon-yishenhe
  • 已驳回
    #icon-yibohui
  • 服务
    #icon-fuwu
  • 服务(经过)
    #icon-fuwujingguo
  • 首页
    #icon-shouye
  • 首页(经过)
    #icon-shouyejingguo
  • 资讯
    #icon-zixun
  • 资讯(经过)
    #icon-zixunjingguo
  • 我的
    #icon-wode
  • 我的(经过)
    #icon-wodejingguo
  • 培训补贴
    #icon-peixunbutie
  • 求职信息
    #icon-qiuzhixinxi
  • 社保补贴
    #icon-shebaobutie
  • 就业登记
    #icon-jiuyedengji
  • 失业登记
    #icon-shiyedengji
  • 个人信息
    #icon-gerenxinxi
  • 全面信息审核
    #icon-quanmianxinxishenhe
  • 业务经办
    #icon-yewujingban
  • 待遇领取认证
    #icon-daiyulingqurenzheng
  • 社保查询
    #icon-shebaochaxun
  • 养老欠费补交
    #icon-yanglaoqianfeibujiao
  • 社保卡
    #icon-shebaoka
  • 跨年缴费设置
    #icon-kuanianjiaofeishezhi
  • 医保个人缴费
    #icon-yibaogerenjiaofei
  • 个体缴费设置
    #icon-getijiaofeishezhi
  • 就失业证
    #icon-jiushiyezheng
  • 技工教育
    #icon-jigongjiaoyu
  • 稳岗补贴
    #icon-wengangbutie
  • 孵化基地
    #icon-fuhuajidi
  • 创业项目
    #icon-chuangyexiangmu
  • 证书查询
    #icon-zhengshuchaxun
  • 语音
    #icon-yuyin
  • 消息
    #icon-xiaoxi
  • 咨询
    #icon-zixun1
  • 推荐服务
    #icon-tuijianfuwu
  • 删除
    #icon-shanchu
  • 选中
    #icon-xuanzhong
  • 未选中
    #icon-weixuanzhong
  • 添加
    #icon-tianjia
  • 设置
    #icon-shezhi1
  • 头像
    #icon-touxiang
  • 岗位类型
    #icon-gangweileixing
  • 定位
    #icon-dingwei1
  • 手机
    #icon-shouji
  • 职位
    #icon-zhiwei
  • 硕士
    #icon-shuoshi
  • 工资
    #icon-gongzi
  • 消息对话
    #icon-xiaoxiduihua
  • 公司
    #icon-gongsi
  • 项目
    #icon-xiangmu
  • 未认证
    #icon-weirenzheng
  • 交流会
    #icon-jiaoliuhui
  • 语言
    #icon-yuyan
  • 证书
    #icon-zhengshu
  • 筛选
    #icon-shaixuan
  • 相机
    #icon-xiangji
  • 人脸识别
    #icon-renlianshibie2
  • 关闭
    #icon-guanbi
  • 已选择
    #icon-yixuanze
  • 头像标签
    #icon-touxiangbiaoqian
  • 技能补贴
    #icon-jinengbutie
  • 专业技能
    #icon-zhuanyejineng
  • 教育经历
    #icon-jiaoyujingli
  • 在职转个体
    #icon-zaizhizhuangeti
  • 城乡居民医疗保险停保
    #icon-chengxiangjuminyiliaobaoxiantingbao
  • 退休申请
    #icon-tuixiushenqing

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>