• 便民服务
    
  • 城管业务
    
  • 问题报送
    
  • 版本更新
    
  • 帮助中心
    
  • 关于与帮助
    
  • 服务协议
    
  • 快速拍照
    
  • 屏蔽信息
    
  • 清理缓存
    
  • 设置
    
  • 手机号设置
    
  • 修改密码
    
  • 意见建议
    
  • 修改昵称
    
  • 申请补卡
    
  • 申请记录
    
  • 申请退卡
    
  • 申请充值
    
  • 线上卡务
    
  • 申请租车卡
    
  • 扫码租车
    
  • 人行道违停查询
    
  • 每日一题
    
  • 邀请注册
    
  • 数据发布
    
  • 城市照明
    
  • 市民热线
    
  • 办事大厅
    
  • 积分排行榜
    
  • 锦旗排行榜
    
  • 便民通知
    
  • 人行道违停
    
  • 我的消息
    
  • 帮停车
    
  • 公共自行车
    
  • 优秀案卷
    
  • 智慧渣土
    
  • 智慧环卫
    
  • 垃圾分类
    
  • 找公厕
    
  • 我的积分
    
  • APP下载
    
  • 解绑手机号
    
  • 我的账单
    
  • 意见反馈
    
  • 更换手机号
    
  • 我的活动
    
  • 志愿者认证
    
  • 问题报送小提示
    
  • 扫码租车
    
  • 专题报送
    
  • 奖励办法
    
  • 我的案卷
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1622016283376') format('woff2'),
       url('iconfont.woff?t=1622016283376') format('woff'),
       url('iconfont.ttf?t=1622016283376') 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"。

  • 便民服务
    .iconbianminfuwu
  • 城管业务
    .iconchengguanyewu1
  • 问题报送
    .iconwentibaosong
  • 版本更新
    .iconbanbengengxin
  • 帮助中心
    .iconbangzhuzhongxin
  • 关于与帮助
    .iconguanyuyubangzhu
  • 服务协议
    .iconfuwuxieyi
  • 快速拍照
    .iconkuaisupaizhao
  • 屏蔽信息
    .iconpingbixinxi
  • 清理缓存
    .iconqinglihuancun
  • 设置
    .iconshezhi
  • 手机号设置
    .iconshoujihaoshezhi
  • 修改密码
    .iconxiugaimima
  • 意见建议
    .iconyijianjianyi
  • 修改昵称
    .iconxiugainicheng
  • 申请补卡
    .iconshenqingbuka
  • 申请记录
    .iconshenqingjilu
  • 申请退卡
    .iconshenqingtuika
  • 申请充值
    .iconshenqingchongzhi
  • 线上卡务
    .iconxianshangkawu
  • 申请租车卡
    .iconshenqingzucheka
  • 扫码租车
    .iconsaomazuche1
  • 人行道违停查询
    .iconrenhangdaoweitingchaxun
  • 每日一题
    .iconmeiriyiti
  • 邀请注册
    .iconyaoqingzhuce
  • 数据发布
    .iconshujufabu
  • 城市照明
    .iconchengshizhaoming
  • 市民热线
    .iconshiminrexian
  • 办事大厅
    .iconbanshidating2
  • 积分排行榜
    .iconjifenpaihangbang
  • 锦旗排行榜
    .iconjinqipaihangbang1
  • 便民通知
    .iconbianmintongzhi1
  • 人行道违停
    .iconrenhangdaoweiting
  • 我的消息
    .iconwodexiaoxi1
  • 帮停车
    .iconbangtingche1
  • 公共自行车
    .icongonggongzihangche
  • 优秀案卷
    .iconyouxiuanjuan1
  • 智慧渣土
    .iconzhihuizhatu1
  • 智慧环卫
    .iconzhihuihuanwei1
  • 垃圾分类
    .iconlajifenlei1
  • 找公厕
    .iconzhaogongce1
  • 我的积分
    .iconwodejifen
  • APP下载
    .iconAPPxiazai
  • 解绑手机号
    .iconjiebangshoujihao
  • 我的账单
    .iconwodezhangdan
  • 意见反馈
    .iconyijianfankui
  • 更换手机号
    .icongenghuanshoujihao
  • 我的活动
    .iconwodehuodong
  • 志愿者认证
    .iconzhiyuanzherenzheng
  • 问题报送小提示
    .iconwentibaosongxiaotishi
  • 扫码租车
    .iconsaomazuche
  • 专题报送
    .iconzhuantibaosong
  • 奖励办法
    .iconjianglibanfa
  • 我的案卷
    .iconwodeanjuan

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

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

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

  • 便民服务
    #iconbianminfuwu
  • 城管业务
    #iconchengguanyewu1
  • 问题报送
    #iconwentibaosong
  • 版本更新
    #iconbanbengengxin
  • 帮助中心
    #iconbangzhuzhongxin
  • 关于与帮助
    #iconguanyuyubangzhu
  • 服务协议
    #iconfuwuxieyi
  • 快速拍照
    #iconkuaisupaizhao
  • 屏蔽信息
    #iconpingbixinxi
  • 清理缓存
    #iconqinglihuancun
  • 设置
    #iconshezhi
  • 手机号设置
    #iconshoujihaoshezhi
  • 修改密码
    #iconxiugaimima
  • 意见建议
    #iconyijianjianyi
  • 修改昵称
    #iconxiugainicheng
  • 申请补卡
    #iconshenqingbuka
  • 申请记录
    #iconshenqingjilu
  • 申请退卡
    #iconshenqingtuika
  • 申请充值
    #iconshenqingchongzhi
  • 线上卡务
    #iconxianshangkawu
  • 申请租车卡
    #iconshenqingzucheka
  • 扫码租车
    #iconsaomazuche1
  • 人行道违停查询
    #iconrenhangdaoweitingchaxun
  • 每日一题
    #iconmeiriyiti
  • 邀请注册
    #iconyaoqingzhuce
  • 数据发布
    #iconshujufabu
  • 城市照明
    #iconchengshizhaoming
  • 市民热线
    #iconshiminrexian
  • 办事大厅
    #iconbanshidating2
  • 积分排行榜
    #iconjifenpaihangbang
  • 锦旗排行榜
    #iconjinqipaihangbang1
  • 便民通知
    #iconbianmintongzhi1
  • 人行道违停
    #iconrenhangdaoweiting
  • 我的消息
    #iconwodexiaoxi1
  • 帮停车
    #iconbangtingche1
  • 公共自行车
    #icongonggongzihangche
  • 优秀案卷
    #iconyouxiuanjuan1
  • 智慧渣土
    #iconzhihuizhatu1
  • 智慧环卫
    #iconzhihuihuanwei1
  • 垃圾分类
    #iconlajifenlei1
  • 找公厕
    #iconzhaogongce1
  • 我的积分
    #iconwodejifen
  • APP下载
    #iconAPPxiazai
  • 解绑手机号
    #iconjiebangshoujihao
  • 我的账单
    #iconwodezhangdan
  • 意见反馈
    #iconyijianfankui
  • 更换手机号
    #icongenghuanshoujihao
  • 我的活动
    #iconwodehuodong
  • 志愿者认证
    #iconzhiyuanzherenzheng
  • 问题报送小提示
    #iconwentibaosongxiaotishi
  • 扫码租车
    #iconsaomazuche
  • 专题报送
    #iconzhuantibaosong
  • 奖励办法
    #iconjianglibanfa
  • 我的案卷
    #iconwodeanjuan

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>