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

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

  • 我的保险
    .iconwodebaoxian1
  • 提示
    .icontishi
  • 身份证号
    .iconshenfenzhenghao
  • 我的就业
    .iconwodejiuye2
  • 照片上传
    .iconzhaopianshangchuan
  • 人脸识别认证
    .iconrenlianshibierenzheng
  • 灵活就业社保补贴
    .iconlinghuojiuyeshebaobutie
  • 上传
    .iconshangchuan
  • 招聘信息
    .iconzhaopinxinxi
  • 现场招聘
    .iconxianchangzhaopin
  • 在职转个体
    .iconzaizhizhuangeti
  • 城乡居民医疗保险停保
    .iconchengxiangjuminyiliaobaoxiantingbao
  • 退休申请
    .icontuixiushenqing
  • 专业技能
    .iconzhuanyejineng
  • 教育经历
    .iconjiaoyujingli
  • 技能补贴
    .iconjinengbutie
  • 补贴情况
    .iconbutieqingkuang1
  • 社保-养老保险-个人账户
    .iconshebao-yanglaobaoxian-gerenzhanghu
  • 异地居民转诊备案
    .iconyidijuminzhuanzhenbeian
  • 缴费情况
    .iconjiaofeiqingkuang
  • 个人就医购药
    .icongerenjiuyigouyao
  • 个人权益登记
    .icongerenquanyidengji
  • 密码
    .iconmima
  • 个人信息查询
    .icongerenxinxichaxun
  • 特殊疾病登记
    .iconteshujibingdengji
  • 首页-状态追踪
    .iconshouye-zhuangtaizhuizong
  • 盾牌
    .icondunpai1
  • 放大镜
    .iconfangdajing1
  • 社保-养老保险-基本信息
    .iconshebao-yanglaobaoxian-jibenxinxi1
  • 医院
    .iconyiyuan1
  • 手机
    .iconshouji1
  • 联系信息修改
    .iconlianxixinxixiugai1
  • 右返回
    .iconyoufanhui1
  • 左返回
    .iconzuofanhui1
  • 我的点击
    .iconwodedianji1
  • 便民-实心
    .iconbianmin-shixin1
  • 我的社保
    .iconwodeshebao
  • 就业服务
    .iconjiuyefuwu
  • 个人信息
    .icongerenxinxi1
  • 对号
    .iconduihao2
  • 蓝牙
    .iconlanya
  • usb
    .iconusb
  • 网络
    .iconwangluo
  • 用户
    .iconyonghu
  • 指纹
    .iconzhiwen
  • 链接失败
    .iconlianjieshibai
  • 检测中
    .iconjiancezhong
  • 链接成功
    .iconlianjiechenggong
  • 养老保险待遇领取资格认证
    .iconyanglaobaoxiandaiyulingquzigerenzheng
  • 待遇领取资格认证查询
    .icondaiyulingquzigerenzhengchaxun
  • 忘记密码
    .iconwangjimima
  • 首页-经办-实
    .iconshouyejingban-shi
  • 首页-经办
    .iconshouye-jingban
  • 社保缴费设置
    .iconshebaojiaofeishezhi
  • .iconcha1
  • 社保-就业信息登记
    .iconshebao-jiuyexinxidengji
  • 首页-就业人才服务
    .iconshouye-jiuyerencaifuwu
  • 社保-政府问卷调查
    .iconshebao-zhengfuwenjuantiaocha
  • 社保-求职信息精准推送
    .iconshebao-qiuzhixinxijingzhuntuisong
  • 社保-个人信用查询
    .iconshebao-gerenxinyongchaxun
  • 城乡居民参保缴费支付
    .iconchengxiangjumincanbaojiaofeizhifu
  • 岗位招聘
    .icongangweizhaopin
  • 养老保险个体户收缴
    .iconyanglaobaoxiangetihushoujiao
  • 我的-温情提示
    .iconwode-wenqingtishi
  • 养老-离退休人员养老金拨付记录查询
    .iconyanglao-lituixiurenyuanyanglaojinbofujiluchaxun
  • 中国农业银行
    .iconzhongguonongyeyinhang
  • 中国银行
    .iconzhongguoyinhang
  • 下拉
    .iconxiala
  • 搜索关闭
    .iconshouye-danchuguanbi
  • 对号
    .iconduihao3
  • 卡激活
    .iconqiajihuo
  • 卡解挂
    .iconqiajiegua
  • 卡注销
    .iconqiazhuxiao
  • 卡补办
    .iconqiabuban
  • 信息安全宣传
    .iconxinxianquanxuanchuan
  • 求职招聘
    .iconjiuyechuangyefuwu-qiuzhizhaopin
  • 就业创业服务-困难人员
    .iconjiuyechuangyefuwu-kunnanrenyuan
  • 社会保险服务-个体缴费设置
    .iconshehuibaoxianfuwu-getijiaofeishezhi
  • 我的-五险信息 医疗
    .iconwode-wuxianxinxiyiliao
  • 我的-五险信息 养老
    .iconwode-wuxianxinxiyanglao
  • 就业创业服务-就业援助
    .iconjiuyechuangyefuwu-jiuyeyuanzhu
  • 社会保险服务-养老欠费补缴
    .iconshehuibaoxianfuwu-yanglaoqianfeibujiao
  • 就业创业服务-就失业证
    .iconjiuyechuangyefuwu-jiushiyezheng1
  • 就业创业服务-创业贷款
    .iconjiuyechuangyefuwu-chuangyedaikuan
  • 社会保险服务-医保个人缴费
    .iconshehuibaoxianfuwu-yibaogerenjiaofei
  • 就业创业服务-培训报名
    .iconjiuyechuangyefuwu-peixunbaoming
  • 咨询-人社头条
    .iconzixun-renshetoutiao
  • 咨询-图片新闻
    .iconzixun-tupianxinwen
  • 咨询-通知公告
    .iconzixun-tongzhigonggao
  • 咨询-政策法规
    .iconzixun-zhengcefagui
  • 社会保险服务-待遇领取认证
    .iconshehuibaoxianfuwu-daiyulingqurenzheng
  • 咨询-就业信息
    .iconzixun-jiuyexinxi
  • 社会保险服务-全民信息校核
    .iconshehuibaoxianfuwu-quanminxinxixiaohe
  • 社会保险服务-社保卡 卡跟踪
    .iconshehuibaoxianfuwu-shebaoqiaqiagenzong
  • 社会保险服务-社保卡 挂失
    .iconshehuibaoxianfuwu-shebaoqiaguashi
  • 工商保险
    .iconwode-wuxianxinxigongshang
  • 社会保险服务-社保卡 解挂
    .iconshehuibaoxianfuwu-shebaoqiajiegua
  • 生育
    .iconwode-wuxianxinxishengyu
  • 社会保险服务业-社保卡 注销
    .iconshehuibaoxianfuwuye-shebaoqiazhuxiao
  • 登录-用户名
    .icondenglu-yonghuming
  • 登录-密码
    .icondenglu-mima
  • 我的-五险信息 失业
    .iconwode-wuxianxinxishiye
  • 登录-显示密码
    .icondenglu-xianshimima
  • 首页-更多
    .iconshouye-gengduo
  • 我的-就业
    .iconwode-jiuye
  • 我的-我的保险
    .iconwode-wodebaoxian
  • 我的保险
    .iconwodebaoxian
  • 我的就业
    .iconwodejiuye
  • 新用户注册
    .iconxinyonghuzhuce1
  • 忘记密码
    .iconwangjimima1
  • 关于
    .iconguanyu
  • 客服电话
    .iconkefudianhua1
  • 身份认证
    .iconshenfenrenzheng
  • 最新职位
    .iconzuixinzhiwei
  • 热门职位
    .iconremenzhiwei
  • 全省职位
    .iconquanshengzhiwei1
  • 就业登记-失败
    .iconjiuyedengji-shibai1
  • 就业登记-成功
    .iconjiuyedengji-chenggong1
  • 我的简历
    .iconwodejianli
  • 右返回
    .iconyoufanhui
  • 左返回
    .iconzuofanhui
  • 我的业务
    .iconwodeyewu
  • 我的社保卡
    .iconwodeshebaoqia
  • 我的就业
    .iconwodejiuye1
  • 下箭头
    .iconxiajiantou1
  • 右箭头
    .iconyoujiantou
  • 人脸识别
    .iconrenlianshibie
  • 电子社保卡
    .icondianzishebaoqia
  • 发送邀请函
    .iconfasongyaoqinghan
  • 接收邀请函
    .iconjieshouyaoqinghan
  • 我的简历
    .iconwodejianli1
  • 享受政策信息
    .iconxiangshouzhengcexinxi
  • 就业再就业培训
    .iconjiuyezaijiuyepeixun
  • 就业登记信息
    .iconjiuyedengjixinxi
  • 就业失业登记信息
    .iconjiuyeshiyedengjixinxi
  • 就业补贴信息
    .iconjiuyebutiexinxi
  • 我的家庭成员
    .iconwodejiatingchengyuan
  • 个人工资条
    .icongerengongzitiao
  • 我的工资条
    .iconwodegongzitiao
  • 个体退休申报
    .icongetituixiushenbao
  • 社保卡申领
    .iconshebaoqiashenling
  • 点击上传
    .icondianjishangchuan
  • 人事人才
    .iconrenshirencai
  • 就业政策
    .iconjiuyezhengce
  • 创业政策
    .iconchuangyezhengce
  • 社会保险
    .iconshehuibaoxian
  • 已审核
    .icondaishenhe
  • 待审核
    .iconyishenhe
  • 已驳回
    .iconyibohui
  • 服务
    .iconfuwu
  • 服务(经过)
    .iconfuwujingguo
  • 首页
    .iconshouye
  • 首页(经过)
    .iconshouyejingguo
  • 资讯
    .iconzixun
  • 资讯(经过)
    .iconzixunjingguo
  • 我的
    .iconwode
  • 我的(经过)
    .iconwodejingguo
  • 培训补贴
    .iconpeixunbutie
  • 求职信息
    .iconqiuzhixinxi
  • 社保补贴
    .iconshebaobutie
  • 就业登记
    .iconjiuyedengji
  • 失业登记
    .iconshiyedengji
  • 个人信息
    .icongerenxinxi
  • 全面信息审核
    .iconquanmianxinxishenhe
  • 业务经办
    .iconyewujingban
  • 待遇领取认证
    .icondaiyulingqurenzheng
  • 社保查询
    .iconshebaochaxun
  • 养老欠费补交
    .iconyanglaoqianfeibujiao
  • 社保卡
    .iconshebaoka
  • 跨年缴费设置
    .iconkuanianjiaofeishezhi
  • 医保个人缴费
    .iconyibaogerenjiaofei
  • 个体缴费设置
    .icongetijiaofeishezhi
  • 就失业证
    .iconjiushiyezheng
  • 技工教育
    .iconjigongjiaoyu
  • 稳岗补贴
    .iconwengangbutie
  • 孵化基地
    .iconfuhuajidi
  • 创业项目
    .iconchuangyexiangmu
  • 证书查询
    .iconzhengshuchaxun
  • 语音
    .iconyuyin
  • 消息
    .iconxiaoxi
  • 咨询
    .iconzixun1
  • 推荐服务
    .icontuijianfuwu
  • 删除
    .iconshanchu
  • 选中
    .iconxuanzhong
  • 未选中
    .iconweixuanzhong
  • 添加
    .icontianjia
  • 设置
    .iconshezhi1
  • 头像
    .icontouxiang
  • 岗位类型
    .icongangweileixing
  • 定位
    .icondingwei1
  • 手机
    .iconshouji
  • 职位
    .iconzhiwei
  • 硕士
    .iconshuoshi
  • 工资
    .icongongzi
  • 消息对话
    .iconxiaoxiduihua
  • 公司
    .icongongsi
  • 项目
    .iconxiangmu
  • 未认证
    .iconweirenzheng
  • 交流会
    .iconjiaoliuhui
  • 语言
    .iconyuyan
  • 证书
    .iconzhengshu
  • 筛选
    .iconshaixuan
  • 下箭头
    .iconxiajiantou
  • 相机
    .iconxiangji
  • 对号
    .iconduihao
  • 人脸识别
    .iconrenlianshibie2
  • 18生命周期
    .iconshengmingzhouqi
  • 关闭
    .iconguanbi
  • 电话
    .icondianhua
  • 已选择
    .iconyixuanze
  • 错号
    .iconcuohao
  • 头像标签
    .icontouxiangbiaoqian
  • 对号2
    .iconduihao1
  • 个人资料
    .icongerenziliao
  • 二维码
    .iconerweima
  • 公告法规
    .icongonggaofagui
  • 客服
    .iconkefu
  • 链接
    .iconlianjie
  • 社保
    .iconshebao
  • 沙漏
    .iconshalou
  • 社保-养老保险-待遇信息
    .iconshebao-yanglaobaoxian-daiyuxinxi
  • 社保-养老保险-缴费情况
    .iconshebao-yanglaobaoxian-jiaofeiqingkuang
  • 问号
    .iconwenhao
  • 药店
    .iconyaodian
  • 信息校核
    .iconxinxixiaohe
  • 找周边
    .iconzhaozhoubian
  • 基本信息
    .iconjibenxinxi
  • 卡挂失
    .iconqiaguashi
  • 享受政策
    .iconxiangshouzhengce
  • 参保登记
    .iconcanbaodengji
  • 投资明细
    .icontouzimingxi1
  • .iconwo1
  • 身份认证
    .iconshenfenrenzheng1
  • 登记信息
    .icondengjixinxi
  • 指南
    .iconzhinan1
  • 计算器
    .iconjisuanqi1
  • 生存指南查询
    .iconshengcunzhinanchaxun1
  • 待遇明细
    .icondaiyumingxi
  • 浏览器打开
    .iconliulanqidakai
  • 缴费情况
    .iconjiaofeiqingkuang2
  • 主页-实心
    .iconzhuye-shixin
  • 医疗报销
    .iconyiliaobaoxiao
  • 异地居住人员转诊记录
    .iconyidijuzhurenyuanzhuanzhenjilu
  • 待遇领取明细
    .icondaiyulingqumingxi
  • 退休领取标准
    .icontuixiulingqubiaozhun
  • 退休年历调整
    .icontuixiunianlitiaozheng
  • 退休待遇
    .icontuixiudaiyu
  • 认定鉴定
    .iconrendingjianding
  • close
    .iconclose
  • arrow-down-2
    .iconarrow-down-
  • 个人现金报销
    .icongerenxianjinbaoxiao
  • 个人账户收支
    .icongerenzhanghushouzhi
  • 个人转外就医
    .icongerenzhuanwaijiuyi
  • 急诊备案登记
    .iconjizhenbeiandengji
  • 三项目录
    .iconsanxiangmulu
  • 消费记录
    .iconxiaofeijilu
  • 社保卡号
    .iconshebaoqiahao
  • 定位
    .icondingwei
  • 默认用户
    .iconmorenyonghu
  • 下拉指向
    .iconxialazhixiang
  • 医保消费明细
    .iconyibaoxiaofeimingxi
  • 个人中心-版本更新
    .icongerenzhongxin-banbengengxin
  • 个人中心-客服
    .icongerenzhongxin-kefu
  • 个人中心-好友分享
    .icongerenzhongxin-haoyoufenxiang
  • 个人中心-关于
    .icongerenzhongxin-guanyu
  • 个人中心-输入密码
    .icongerenzhongxin-shurumima
  • 消费明细
    .iconxiaofeimingxi
  • 身份证
    .iconshenfenzheng
  • 新用户注册
    .iconxinyonghuzhuce
  • 联系信息修改
    .iconlianxixinxixiugai
  • 身份证上传
    .iconshenfenzhengshangchuan
  • 认证
    .iconrenzheng
  • 登记证
    .icondengjizheng

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont iconxxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 我的保险
    #iconwodebaoxian1
  • 提示
    #icontishi
  • 身份证号
    #iconshenfenzhenghao
  • 我的就业
    #iconwodejiuye2
  • 照片上传
    #iconzhaopianshangchuan
  • 人脸识别认证
    #iconrenlianshibierenzheng
  • 灵活就业社保补贴
    #iconlinghuojiuyeshebaobutie
  • 上传
    #iconshangchuan
  • 招聘信息
    #iconzhaopinxinxi
  • 现场招聘
    #iconxianchangzhaopin
  • 在职转个体
    #iconzaizhizhuangeti
  • 城乡居民医疗保险停保
    #iconchengxiangjuminyiliaobaoxiantingbao
  • 退休申请
    #icontuixiushenqing
  • 专业技能
    #iconzhuanyejineng
  • 教育经历
    #iconjiaoyujingli
  • 技能补贴
    #iconjinengbutie
  • 补贴情况
    #iconbutieqingkuang1
  • 社保-养老保险-个人账户
    #iconshebao-yanglaobaoxian-gerenzhanghu
  • 异地居民转诊备案
    #iconyidijuminzhuanzhenbeian
  • 缴费情况
    #iconjiaofeiqingkuang
  • 个人就医购药
    #icongerenjiuyigouyao
  • 个人权益登记
    #icongerenquanyidengji
  • 密码
    #iconmima
  • 个人信息查询
    #icongerenxinxichaxun
  • 特殊疾病登记
    #iconteshujibingdengji
  • 首页-状态追踪
    #iconshouye-zhuangtaizhuizong
  • 盾牌
    #icondunpai1
  • 放大镜
    #iconfangdajing1
  • 社保-养老保险-基本信息
    #iconshebao-yanglaobaoxian-jibenxinxi1
  • 医院
    #iconyiyuan1
  • 手机
    #iconshouji1
  • 联系信息修改
    #iconlianxixinxixiugai1
  • 右返回
    #iconyoufanhui1
  • 左返回
    #iconzuofanhui1
  • 我的点击
    #iconwodedianji1
  • 便民-实心
    #iconbianmin-shixin1
  • 我的社保
    #iconwodeshebao
  • 就业服务
    #iconjiuyefuwu
  • 个人信息
    #icongerenxinxi1
  • 对号
    #iconduihao2
  • 蓝牙
    #iconlanya
  • usb
    #iconusb
  • 网络
    #iconwangluo
  • 用户
    #iconyonghu
  • 指纹
    #iconzhiwen
  • 链接失败
    #iconlianjieshibai
  • 检测中
    #iconjiancezhong
  • 链接成功
    #iconlianjiechenggong
  • 养老保险待遇领取资格认证
    #iconyanglaobaoxiandaiyulingquzigerenzheng
  • 待遇领取资格认证查询
    #icondaiyulingquzigerenzhengchaxun
  • 忘记密码
    #iconwangjimima
  • 首页-经办-实
    #iconshouyejingban-shi
  • 首页-经办
    #iconshouye-jingban
  • 社保缴费设置
    #iconshebaojiaofeishezhi
  • #iconcha1
  • 社保-就业信息登记
    #iconshebao-jiuyexinxidengji
  • 首页-就业人才服务
    #iconshouye-jiuyerencaifuwu
  • 社保-政府问卷调查
    #iconshebao-zhengfuwenjuantiaocha
  • 社保-求职信息精准推送
    #iconshebao-qiuzhixinxijingzhuntuisong
  • 社保-个人信用查询
    #iconshebao-gerenxinyongchaxun
  • 城乡居民参保缴费支付
    #iconchengxiangjumincanbaojiaofeizhifu
  • 岗位招聘
    #icongangweizhaopin
  • 养老保险个体户收缴
    #iconyanglaobaoxiangetihushoujiao
  • 我的-温情提示
    #iconwode-wenqingtishi
  • 养老-离退休人员养老金拨付记录查询
    #iconyanglao-lituixiurenyuanyanglaojinbofujiluchaxun
  • 中国农业银行
    #iconzhongguonongyeyinhang
  • 中国银行
    #iconzhongguoyinhang
  • 下拉
    #iconxiala
  • 搜索关闭
    #iconshouye-danchuguanbi
  • 对号
    #iconduihao3
  • 卡激活
    #iconqiajihuo
  • 卡解挂
    #iconqiajiegua
  • 卡注销
    #iconqiazhuxiao
  • 卡补办
    #iconqiabuban
  • 信息安全宣传
    #iconxinxianquanxuanchuan
  • 求职招聘
    #iconjiuyechuangyefuwu-qiuzhizhaopin
  • 就业创业服务-困难人员
    #iconjiuyechuangyefuwu-kunnanrenyuan
  • 社会保险服务-个体缴费设置
    #iconshehuibaoxianfuwu-getijiaofeishezhi
  • 我的-五险信息 医疗
    #iconwode-wuxianxinxiyiliao
  • 我的-五险信息 养老
    #iconwode-wuxianxinxiyanglao
  • 就业创业服务-就业援助
    #iconjiuyechuangyefuwu-jiuyeyuanzhu
  • 社会保险服务-养老欠费补缴
    #iconshehuibaoxianfuwu-yanglaoqianfeibujiao
  • 就业创业服务-就失业证
    #iconjiuyechuangyefuwu-jiushiyezheng1
  • 就业创业服务-创业贷款
    #iconjiuyechuangyefuwu-chuangyedaikuan
  • 社会保险服务-医保个人缴费
    #iconshehuibaoxianfuwu-yibaogerenjiaofei
  • 就业创业服务-培训报名
    #iconjiuyechuangyefuwu-peixunbaoming
  • 咨询-人社头条
    #iconzixun-renshetoutiao
  • 咨询-图片新闻
    #iconzixun-tupianxinwen
  • 咨询-通知公告
    #iconzixun-tongzhigonggao
  • 咨询-政策法规
    #iconzixun-zhengcefagui
  • 社会保险服务-待遇领取认证
    #iconshehuibaoxianfuwu-daiyulingqurenzheng
  • 咨询-就业信息
    #iconzixun-jiuyexinxi
  • 社会保险服务-全民信息校核
    #iconshehuibaoxianfuwu-quanminxinxixiaohe
  • 社会保险服务-社保卡 卡跟踪
    #iconshehuibaoxianfuwu-shebaoqiaqiagenzong
  • 社会保险服务-社保卡 挂失
    #iconshehuibaoxianfuwu-shebaoqiaguashi
  • 工商保险
    #iconwode-wuxianxinxigongshang
  • 社会保险服务-社保卡 解挂
    #iconshehuibaoxianfuwu-shebaoqiajiegua
  • 生育
    #iconwode-wuxianxinxishengyu
  • 社会保险服务业-社保卡 注销
    #iconshehuibaoxianfuwuye-shebaoqiazhuxiao
  • 登录-用户名
    #icondenglu-yonghuming
  • 登录-密码
    #icondenglu-mima
  • 我的-五险信息 失业
    #iconwode-wuxianxinxishiye
  • 登录-显示密码
    #icondenglu-xianshimima
  • 首页-更多
    #iconshouye-gengduo
  • 我的-就业
    #iconwode-jiuye
  • 我的-我的保险
    #iconwode-wodebaoxian
  • 我的保险
    #iconwodebaoxian
  • 我的就业
    #iconwodejiuye
  • 新用户注册
    #iconxinyonghuzhuce1
  • 忘记密码
    #iconwangjimima1
  • 关于
    #iconguanyu
  • 客服电话
    #iconkefudianhua1
  • 身份认证
    #iconshenfenrenzheng
  • 最新职位
    #iconzuixinzhiwei
  • 热门职位
    #iconremenzhiwei
  • 全省职位
    #iconquanshengzhiwei1
  • 就业登记-失败
    #iconjiuyedengji-shibai1
  • 就业登记-成功
    #iconjiuyedengji-chenggong1
  • 我的简历
    #iconwodejianli
  • 右返回
    #iconyoufanhui
  • 左返回
    #iconzuofanhui
  • 我的业务
    #iconwodeyewu
  • 我的社保卡
    #iconwodeshebaoqia
  • 我的就业
    #iconwodejiuye1
  • 下箭头
    #iconxiajiantou1
  • 右箭头
    #iconyoujiantou
  • 人脸识别
    #iconrenlianshibie
  • 电子社保卡
    #icondianzishebaoqia
  • 发送邀请函
    #iconfasongyaoqinghan
  • 接收邀请函
    #iconjieshouyaoqinghan
  • 我的简历
    #iconwodejianli1
  • 享受政策信息
    #iconxiangshouzhengcexinxi
  • 就业再就业培训
    #iconjiuyezaijiuyepeixun
  • 就业登记信息
    #iconjiuyedengjixinxi
  • 就业失业登记信息
    #iconjiuyeshiyedengjixinxi
  • 就业补贴信息
    #iconjiuyebutiexinxi
  • 我的家庭成员
    #iconwodejiatingchengyuan
  • 个人工资条
    #icongerengongzitiao
  • 我的工资条
    #iconwodegongzitiao
  • 个体退休申报
    #icongetituixiushenbao
  • 社保卡申领
    #iconshebaoqiashenling
  • 点击上传
    #icondianjishangchuan
  • 人事人才
    #iconrenshirencai
  • 就业政策
    #iconjiuyezhengce
  • 创业政策
    #iconchuangyezhengce
  • 社会保险
    #iconshehuibaoxian
  • 已审核
    #icondaishenhe
  • 待审核
    #iconyishenhe
  • 已驳回
    #iconyibohui
  • 服务
    #iconfuwu
  • 服务(经过)
    #iconfuwujingguo
  • 首页
    #iconshouye
  • 首页(经过)
    #iconshouyejingguo
  • 资讯
    #iconzixun
  • 资讯(经过)
    #iconzixunjingguo
  • 我的
    #iconwode
  • 我的(经过)
    #iconwodejingguo
  • 培训补贴
    #iconpeixunbutie
  • 求职信息
    #iconqiuzhixinxi
  • 社保补贴
    #iconshebaobutie
  • 就业登记
    #iconjiuyedengji
  • 失业登记
    #iconshiyedengji
  • 个人信息
    #icongerenxinxi
  • 全面信息审核
    #iconquanmianxinxishenhe
  • 业务经办
    #iconyewujingban
  • 待遇领取认证
    #icondaiyulingqurenzheng
  • 社保查询
    #iconshebaochaxun
  • 养老欠费补交
    #iconyanglaoqianfeibujiao
  • 社保卡
    #iconshebaoka
  • 跨年缴费设置
    #iconkuanianjiaofeishezhi
  • 医保个人缴费
    #iconyibaogerenjiaofei
  • 个体缴费设置
    #icongetijiaofeishezhi
  • 就失业证
    #iconjiushiyezheng
  • 技工教育
    #iconjigongjiaoyu
  • 稳岗补贴
    #iconwengangbutie
  • 孵化基地
    #iconfuhuajidi
  • 创业项目
    #iconchuangyexiangmu
  • 证书查询
    #iconzhengshuchaxun
  • 语音
    #iconyuyin
  • 消息
    #iconxiaoxi
  • 咨询
    #iconzixun1
  • 推荐服务
    #icontuijianfuwu
  • 删除
    #iconshanchu
  • 选中
    #iconxuanzhong
  • 未选中
    #iconweixuanzhong
  • 添加
    #icontianjia
  • 设置
    #iconshezhi1
  • 头像
    #icontouxiang
  • 岗位类型
    #icongangweileixing
  • 定位
    #icondingwei1
  • 手机
    #iconshouji
  • 职位
    #iconzhiwei
  • 硕士
    #iconshuoshi
  • 工资
    #icongongzi
  • 消息对话
    #iconxiaoxiduihua
  • 公司
    #icongongsi
  • 项目
    #iconxiangmu
  • 未认证
    #iconweirenzheng
  • 交流会
    #iconjiaoliuhui
  • 语言
    #iconyuyan
  • 证书
    #iconzhengshu
  • 筛选
    #iconshaixuan
  • 下箭头
    #iconxiajiantou
  • 相机
    #iconxiangji
  • 对号
    #iconduihao
  • 人脸识别
    #iconrenlianshibie2
  • 18生命周期
    #iconshengmingzhouqi
  • 关闭
    #iconguanbi
  • 电话
    #icondianhua
  • 已选择
    #iconyixuanze
  • 错号
    #iconcuohao
  • 头像标签
    #icontouxiangbiaoqian
  • 对号2
    #iconduihao1
  • 个人资料
    #icongerenziliao
  • 二维码
    #iconerweima
  • 公告法规
    #icongonggaofagui
  • 客服
    #iconkefu
  • 链接
    #iconlianjie
  • 社保
    #iconshebao
  • 沙漏
    #iconshalou
  • 社保-养老保险-待遇信息
    #iconshebao-yanglaobaoxian-daiyuxinxi
  • 社保-养老保险-缴费情况
    #iconshebao-yanglaobaoxian-jiaofeiqingkuang
  • 问号
    #iconwenhao
  • 药店
    #iconyaodian
  • 信息校核
    #iconxinxixiaohe
  • 找周边
    #iconzhaozhoubian
  • 基本信息
    #iconjibenxinxi
  • 卡挂失
    #iconqiaguashi
  • 享受政策
    #iconxiangshouzhengce
  • 参保登记
    #iconcanbaodengji
  • 投资明细
    #icontouzimingxi1
  • #iconwo1
  • 身份认证
    #iconshenfenrenzheng1
  • 登记信息
    #icondengjixinxi
  • 指南
    #iconzhinan1
  • 计算器
    #iconjisuanqi1
  • 生存指南查询
    #iconshengcunzhinanchaxun1
  • 待遇明细
    #icondaiyumingxi
  • 浏览器打开
    #iconliulanqidakai
  • 缴费情况
    #iconjiaofeiqingkuang2
  • 主页-实心
    #iconzhuye-shixin
  • 医疗报销
    #iconyiliaobaoxiao
  • 异地居住人员转诊记录
    #iconyidijuzhurenyuanzhuanzhenjilu
  • 待遇领取明细
    #icondaiyulingqumingxi
  • 退休领取标准
    #icontuixiulingqubiaozhun
  • 退休年历调整
    #icontuixiunianlitiaozheng
  • 退休待遇
    #icontuixiudaiyu
  • 认定鉴定
    #iconrendingjianding
  • close
    #iconclose
  • arrow-down-2
    #iconarrow-down-
  • 个人现金报销
    #icongerenxianjinbaoxiao
  • 个人账户收支
    #icongerenzhanghushouzhi
  • 个人转外就医
    #icongerenzhuanwaijiuyi
  • 急诊备案登记
    #iconjizhenbeiandengji
  • 三项目录
    #iconsanxiangmulu
  • 消费记录
    #iconxiaofeijilu
  • 社保卡号
    #iconshebaoqiahao
  • 定位
    #icondingwei
  • 默认用户
    #iconmorenyonghu
  • 下拉指向
    #iconxialazhixiang
  • 医保消费明细
    #iconyibaoxiaofeimingxi
  • 个人中心-版本更新
    #icongerenzhongxin-banbengengxin
  • 个人中心-客服
    #icongerenzhongxin-kefu
  • 个人中心-好友分享
    #icongerenzhongxin-haoyoufenxiang
  • 个人中心-关于
    #icongerenzhongxin-guanyu
  • 个人中心-输入密码
    #icongerenzhongxin-shurumima
  • 消费明细
    #iconxiaofeimingxi
  • 身份证
    #iconshenfenzheng
  • 新用户注册
    #iconxinyonghuzhuce
  • 联系信息修改
    #iconlianxixinxixiugai
  • 身份证上传
    #iconshenfenzhengshangchuan
  • 认证
    #iconrenzheng
  • 登记证
    #icondengjizheng

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>