• 微信支付
    
  • 支付宝
    
  • 刷新
    
  • 
  • 天气
    
  • 微信
    
  • 问题
    
  • 好评
    
  • 定位
    
  • 手机
    
  • jiaose
    
  • 𐂩
    邀请
    𐂩
  • 𐂪
    礼品
    𐂪
  • Notifications
    
  • Settings
    
  • 钻石
    
  • SmileOutlined
    
  • 皇冠
    
  • 设置
    
  • 微信
    
  • 常见问题 帮助
    
  • 用户群组
    
  • 通知
    
  • 手机
    
  • 礼物
    
  • 天气
    
  • 𐂻
    定位
    𐂻
  • 绑定手机
    
  • vip
    
  • 绑定手机
    
  • 绑定微信
    
  • 礼物
    
  • 扫码加群
    
  • 收 藏
    
  • 文章
    
  • 视频
    
  • 地图
    
  • 兑换码
    
  • 设 置
    
  • 
  • 好评
    
  • 刷新
    
  • 问题
    
  • 金币
    
  • 分享
    
  • 好评
    
  • 任务
    
  • 用车百科
    
  • 商店
    
  • 钻石
    
  • 通知
    
  • 潮汐-1
    
  • 百科
    
  • vip
    
  • 关 闭
    
  • 下 拉
    
  • 评论
    
  • 首页-选中
    
  • 回到顶部
    
  • 最新
    
  • 最新活动 (2)
    
  • 免费
    
  • 后退
    
  • 赚钱
    
  • 第一名
    
  • 第二名
    
  • 第三名
    
  • 免费
    
  • 安全
    
  • 分 享 (1)
    
  • 免费
    
  • 上传图片
    
  • 测评
    
  • 免费课程
    
  • 新东方-刷新图标
    
  • 上传图片
    
  • 话费
    
  • 提醒
    
  • 录音赚钱
    
  • 清扫
    
  • 
  • 合并
    
  • 清扫
    
  • 我 的
    
  • 余额
    
  • 通知
    
  • 支付宝支付
    
  • 悬赏-选中
    
  • 微信支付
    
  • 互助
    
  • 通知 (1)
    
  • 任务查询
    
  • 任务
    
  • 任务悬赏-平台图标
    
  • 广场
    
  • 选中
    
  • 
  • 我的
    
  • 暂无数据
    
  • 
  • 公告
    
  • 已抢完
    
  • 高价悬赏
    
  • 认证
    
  • 商城管理
    
  • 分享
    
  • 优惠券
    
  • 开关 关
    
  • 开关 关
    
  • 排序
    
  • 复制
    
  • 下 拉
    
  • 下 拉
    
  • 帮助
    
  • 二维码
    
  • 好评
    
  • 群组
    
  • 论坛热帖
    
  • 朋友圈
    
  • 朋友圈
    
  • 
  • 发布 (9)
    
  • 收 藏
    
  • 评 论
    
  • 分 享
    
  • 
  • 我 的
    
  • 评论
    
  • 分 享
    
  • 评 论
    
  • 认证
    
  • 拍卖
    
  • 分 享2
    
  • 积分
    
  • 邀请
    
  • 红包
    
  • 提醒
    
  • 
  • 实名认证
    
  • 退出
    
  • 微信
    
  • 大炮
    
  • 中国国旗
    
  • 白菜猪肉饺子
    
  • 韭菜猪肉饺子
    
  • 航空航天-aerospace-导弹-mi
    
  • 美女剪影
    
  • VIP
    
  • 图层
    
  • 图层
    
  • 百科
    
  • 百科
    
  • 点赞
    
  • 上引号
    
  • 宝箱-01
    
  • 导航
    
  • 
  • 当前位置
    
  • vip
    
  • vip
    
  • 礼品
    
  • 铃铛
    
  • 位置
    
  • 
  • 天气
    
  • 潮汐
    
  • 钓鱼
    
  • 我 的
    
  • 分享赚钱
    
  • 潮汐-彩
    
  • 实心正方形
    
  • 审核-xsy-1
    
  • 商品
    
  • 订单
    
  • 支付成功
    
  • 前往
    
  • 前往
    
  • 关 闭
    
  • 分享
    
  • 红包
    
  • 玉石-1
    
  • 联系我们
    
  • 
  • 帮助
    
  • 抽奖
    
  • 
  • 玉石
    
  • 新手教程
    
  • 更多(箭头)
    
  • vip
    
  • 完成
    
  • 帮 助
    
  • 帮助
    
  • haoyou
    
  • 客服
    
  • 笑脸
    
  • 商店
    
  • 发现
    
  • 钓鱼
    
  • 我 的
    
  • 钓鱼
    
  • 叉叉
    
  • 勾选
    
  • 未勾选
    
  • 解释
    
  • 签到
    
  • 拍照
    
  • 完成
    
  • 分 享
    
  • 电话
    
  • 点赞 (1)
    
  • 拍照
    
  • 更多
    
  • 报错
    
  • 电话
    
  • 评 论
    
  • 水库
    
  • 河流
    
  • 向下
    
  • 垂钓水岸
    
  • 搜索--1
    
  • 前往A
    
  • 位置
    
  • 五角星
    
  • 鱼塘隐患
    
  • 首页-水务设施-河流
    
  • 河流位置@2x
    
  • 水库
    
  • 钓鱼
    
  • 农家乐
    
  • 搜索--1
    
  • 竖线
    
  • 
  • 首页
    
  • 分享
    
  • 喇叭
    
  • 太阳
    
  • 月亮
    
  • 导航
    
  • 天气-日出
    
  • 天气-日落
    
  • 天气-月出
    
  • 天气-月落
    
  • 日出
    
  • 日落
    
  • 日落
    
  • 日出
    
  • 
  • 
  • 
  • 三角_下
    
  • 
    定位
    
  • 定位
    
  • 定位大头针
    
  • 添加
    
  • 定位
    
  • 搜索
    
  • 日出日落
    
  • 钓鱼
    
  • 钓鱼
    
  • 钓鱼
    
  • 对话框3
    
  • VIP
    
  • 我的
    
  • 
  • 道具
    
  • 倒计时
    
  • 婚姻状态
    
  • 黄瓜
    
  • 香蕉
    
  • 完成
    
  • 帮助
    
  • 水蜜桃
    
  • 香蕉
    
  • 小黄瓜
    
  • 广场
    
  • 首页1
    
  • 我的1
    
  • 首页
    
  • 商店
    
  • 我的
    
  • 美女
    
  • 
  • 鸡儿
    
  • 鸡蛋
    
  • 小鸡
    
  • 
  • 小黄鸡
    
  • 设置
    
  • 邀请
    
  • 统计
    
  • 更新
    
  • 设置
    
  • 钱币-彩
    
  • 认证
    
  • 转出
    
  • 电话
    
  • 列表模式
    
  • 定位
    
  • 列表模式_地标
    
  • 
  • 
  • 邮箱
    
  • 日历
    
  • 面积
    
  • 评论
    
  • 清空
    
  • 
  • 地图
    
  • 地图
    
  • 定位
    
  • 历史查询
    
  • 历史查询
    
  • 起飞
    
  • 到达
    
  • 保障
    
  • 酒店
    
  • 电话
    
  • 回复
    
  • 点赞
    
  • 我的激活
    
  • 我的未激活
    
  • 我的空心
    
  • 飞行 旅游 出差 飞机 800
    
  • 释义 解释 注释
    
  • 类型
    
  • 悲伤
    
  • 悲伤
    
  • 人员
    
  • 时间
    
  • 航班延误
    
  • 金币
    
  • 支付
    
  • 笑脸
    
  • 创意实验室
    
  • 转换
    
  • 图片
    
  • 签名
    
  • 签名
    
  • 筛选
    
  • 点选 - 勾
    
  • 坐标
    
  • 评 论
    
  • 
  • 
  • 
  • 相机
    
  • 定位
    
  • 酒店
    
  • 抢购
    
  • 前进
    
  • 其他
    
  • 前进
    
  • 星星
    
  • 旅游出行
    
  • 保障
    
  • 健康
    
  • 其他 (1)
    
  • 其他
    
  • 安全保障
    
  • 爱心
    
  • 酒店3
    
  • 出行_s
    
  • 错误
    
  • 预定管理2
    
  • 任务
    
  • 感叹号
    
  • 特殊要求
    
  • 正确
    
  • Mastercard
    
  • 管理
    
  • 毛线
    
  • 我来爆料
    
  • 礼物
    
  • 管理
    
  • 银联
    
  • 添加
    
  • Beta
    
  • 提醒
    
  • 发现点击
    
  • 发现_normal
    
  • 发现
    
  • 我的
    
  • 活动图标2
    
  • 我的动态
    
  • 活动专区ai-01
    
  • 账单
    
  • 消息
    
  • 色块-卡包
    
  • 设置
    
  • 关于我们icon
    
  • 帮助
    
  • 呕吐-1
    
  • 通知
    
  • VIP
    
  • 
  • 评论
    
  • 信用卡
    
  • 楼主标签
    
  • 收藏
    
  • 
  • 回复
    
  • 
  • 引进风险保障
    
  • 餐饮
    
  • 出行特权
    
  • 
  • 
  • 
  • 浦发银行
    
  • visa
    
  • VIP
    
  • 礼物
    
  • 点点
    
  • 银联支付
    
  • 
  • 招商
    
  • 举报
    
  • 酒店
    
  • 兑换
    
  • 
  • 
  • 
  • 蜜罐
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1647915196452') format('woff2'),
       url('iconfont.woff?t=1647915196452') format('woff'),
       url('iconfont.ttf?t=1647915196452') 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-weixinzhifu1
  • 支付宝
    .icon-zhifubao
  • 刷新
    .icon-shuaxin1
  • .icon-gou1
  • 天气
    .icon-tianqi1
  • 微信
    .icon-weixin2
  • 问题
    .icon-wenti1
  • 好评
    .icon-haoping2
  • 定位
    .icon-dingwei5
  • 手机
    .icon-shouji1
  • jiaose
    .icon-jiaose
  • 邀请
    .icon-yaoqing2
  • 礼品
    .icon-lipin1
  • Notifications
    .icon-Notifications
  • Settings
    .icon-Settings
  • 钻石
    .icon-BasicIcons-all-
  • SmileOutlined
    .icon-biaoqing
  • 皇冠
    .icon-huangguan
  • 设置
    .icon-shezhi3
  • 微信
    .icon-weixin1
  • 常见问题 帮助
    .icon-changjianwentibangzhu
  • 用户群组
    .icon-yonghuqunzu
  • 通知
    .icon-tongzhi4
  • 手机
    .icon-shouji
  • 礼物
    .icon-liwu2
  • 天气
    .icon-tianqi
  • 定位
    .icon-dingwei4
  • 绑定手机
    .icon-bangdingshouji
  • vip
    .icon-vip3
  • 绑定手机
    .icon-bangdingshouji1
  • 绑定微信
    .icon-bangdingweixin
  • 礼物
    .icon-liwu1
  • 扫码加群
    .icon-saomajiaqun
  • 收 藏
    .icon-shoucang1
  • 文章
    .icon-wenzhang
  • 视频
    .icon-shipin1
  • 地图
    .icon-ditu1
  • 兑换码
    .icon-duihuanma
  • 设 置
    .icon-shezhi2
  • .icon-08
  • 好评
    .icon-haoping
  • 刷新
    .icon-shuaxin
  • 问题
    .icon-wenti
  • 金币
    .icon-jinbi1
  • 分享
    .icon-fenxiang7
  • 好评
    .icon-haoping1
  • 任务
    .icon-renwu1
  • 用车百科
    .icon-yongchebaike
  • 商店
    .icon-shangdian1
  • 钻石
    .icon-diamond
  • 通知
    .icon-tongzhi3
  • 潮汐-1
    .icon-chaoxi-
  • 百科
    .icon-baike2
  • vip
    .icon-vip2
  • 关 闭
    .icon-guanbi1
  • 下 拉
    .icon-xiala2
  • 评论
    .icon-pinglun5
  • 首页-选中
    .icon-yemian-copy-copy-copy
  • 回到顶部
    .icon-huidaodingbu
  • 最新
    .icon-zuixin
  • 最新活动 (2)
    .icon-zuixinhuodong
  • 免费
    .icon-mianfei
  • 后退
    .icon-houtui
  • 赚钱
    .icon-zhuanqian
  • 第一名
    .icon-diyiming
  • 第二名
    .icon-dierming
  • 第三名
    .icon-disanming
  • 免费
    .icon-mianfei1
  • 安全
    .icon-anquan
  • 分 享 (1)
    .icon-fenxiang6
  • 免费
    .icon-mianfei2
  • 上传图片
    .icon-shangchuantupian1
  • 测评
    .icon-icon-test
  • 免费课程
    .icon-mianfeikecheng
  • 新东方-刷新图标
    .icon-refresh
  • 上传图片
    .icon-shangchuantupian
  • 话费
    .icon-huafei
  • 提醒
    .icon-tixing1
  • 录音赚钱
    .icon-luyinzhuanqian
  • 清扫
    .icon-qingsao1
  • .icon-shang2
  • 合并
    .icon-hebing
  • 清扫
    .icon-qingsao
  • 我 的
    .icon-wode5
  • 余额
    .icon-yue
  • 通知
    .icon-tongzhi1
  • 支付宝支付
    .icon-zhifubaozhifu
  • 悬赏-选中
    .icon-xuanshang-
  • 微信支付
    .icon-weixinzhifu
  • 互助
    .icon-huzhu
  • 通知 (1)
    .icon-tongzhi2
  • 任务查询
    .icon-renwuchaxun
  • 任务
    .icon-renwu
  • 任务悬赏-平台图标
    .icon-renwuxuanshang-pingtaitubiao
  • 广场
    .icon-guangchang1
  • 选中
    .icon-xuanzhong
  • .icon-dian1
  • 我的
    .icon-my-on
  • 暂无数据
    .icon-zanwushuju
  • .icon-jia2
  • 公告
    .icon-gonggao
  • 已抢完
    .icon-yiqiangwan
  • 高价悬赏
    .icon-gaojiaxuanshang
  • 认证
    .icon-renzheng2
  • 商城管理
    .icon-shangchengguanli
  • 分享
    .icon-Artboard
  • 优惠券
    .icon-youhuiquan
  • 开关 关
    .icon-kaiguanguan-copy
  • 开关 关
    .icon-kaiguanguan-open
  • 排序
    .icon-order-asc
  • 复制
    .icon-fuzhi
  • 下 拉
    .icon-xiala
  • 下 拉
    .icon-xiala1
  • 帮助
    .icon-icon_help
  • 二维码
    .icon-ico
  • 好评
    .icon-icon_good
  • 群组
    .icon-qunzu
  • 论坛热帖
    .icon-luntanretie
  • 朋友圈
    .icon-pengyouquan
  • 朋友圈
    .icon-friends
  • .icon-hua
  • 发布 (9)
    .icon-fabu
  • 收 藏
    .icon-shoucang
  • 评 论
    .icon-pinglun12
  • 分 享
    .icon-fenxiang5
  • .icon-hua1
  • 我 的
    .icon-wodedangxuan
  • 评论
    .icon-pinglun4
  • 分 享
    .icon-fenxiang4
  • 评 论
    .icon-pinglun11
  • 认证
    .icon-renzheng1
  • 拍卖
    .icon-paimai
  • 分 享2
    .icon-fenxiang3
  • 积分
    .icon-jifen
  • 邀请
    .icon-yaoqing1
  • 红包
    .icon-hongbao1
  • 提醒
    .icon-tixing
  • .icon-shang1
  • 实名认证
    .icon-shimingrenzheng
  • 退出
    .icon-tuichu
  • 微信
    .icon-weixin
  • 大炮
    .icon-dapao
  • 中国国旗
    .icon-guoqi
  • 白菜猪肉饺子
    .icon-tubiaozhizuo-
  • 韭菜猪肉饺子
    .icon-tubiaozhizuo-2
  • 航空航天-aerospace-导弹-mi
    .icon-hangkonghangtian-aerospace-daodan-mi
  • 美女剪影
    .icon-afdcb
  • VIP
    .icon-VIP2
  • 图层
    .icon-tuceng
  • 图层
    .icon-tuceng1
  • 百科
    .icon-baike1
  • 百科
    .icon-baike
  • 点赞
    .icon-zan12
  • 上引号
    .icon-shangyinhao
  • 宝箱-01
    .icon-baoxiang-01
  • 导航
    .icon-daohang1
  • .icon-dian
  • 当前位置
    .icon-dangqianweizhi
  • vip
    .icon-vip2222-copy
  • vip
    .icon-vip1
  • 礼品
    .icon-lipin
  • 铃铛
    .icon-iconset0218
  • 位置
    .icon-weizhi2
  • .icon-xia-copy1
  • 天气
    .icon-icon-power-fi-weather
  • 潮汐
    .icon-chaoxi
  • 钓鱼
    .icon--chuidiao
  • 我 的
    .icon-wode4
  • 分享赚钱
    .icon-fenxiangzhuanqian-copy
  • 潮汐-彩
    .icon-chaoxicai
  • 实心正方形
    .icon-shixinzhengfangxing
  • 审核-xsy-1
    .icon-shenhe
  • 商品
    .icon-shangpin-copy
  • 订单
    .icon-icon-
  • 支付成功
    .icon-zhifuchenggong
  • 前往
    .icon-qianwang
  • 前往
    .icon-qianwang1
  • 关 闭
    .icon-guanbi
  • 分享
    .icon-fenxiang2
  • 红包
    .icon-hongbao
  • 玉石-1
    .icon-bowlder
  • 联系我们
    .icon-lianxiwomen
  • .icon-qun
  • 帮助
    .icon-msnui-help-inversem
  • 抽奖
    .icon-choujiang
  • .icon-kong1
  • 玉石
    .icon-yushi
  • 新手教程
    .icon-xinshoujiaocheng
  • 更多(箭头)
    .icon-gengduo1
  • vip
    .icon-vip
  • 完成
    .icon-wancheng11
  • 帮 助
    .icon-bangzhu3
  • 帮助
    .icon-bangzhu2
  • haoyou
    .icon-haoyou
  • 客服
    .icon-wodekefu
  • 笑脸
    .icon-xiaolian1
  • 商店
    .icon-icon-life-shop
  • 发现
    .icon-faxian1
  • 钓鱼
    .icon-diaoyu2
  • 我 的
    .icon-wode-copy-copy
  • 钓鱼
    .icon-xintubiao_diaoyu
  • 叉叉
    .icon-chacha
  • 勾选
    .icon-gouxuan
  • 未勾选
    .icon-weigouxuan
  • 解释
    .icon-jieshi
  • 签到
    .icon-qiandao
  • 拍照
    .icon-paizhao1
  • 完成
    .icon-wancheng1
  • 分 享
    .icon-fenxiang1
  • 电话
    .icon-yidongduanicon--copy
  • 点赞 (1)
    .icon-dianzan-copy
  • 拍照
    .icon-paizhao
  • 更多
    .icon-gengduo
  • 报错
    .icon-baocuo
  • 电话
    .icon-yidongduanicon-
  • 评 论
    .icon-pinglun3
  • 水库
    .icon-shuiku1
  • 河流
    .icon-heliu
  • 向下
    .icon-xiangxia
  • 垂钓水岸
    .icon-chuidiaoshuian
  • 搜索--1
    .icon-sousuo-copy
  • 前往A
    .icon-iconzhuanqu41
  • 位置
    .icon-weizhi1
  • 五角星
    .icon-xingzhuang60kaobei2
  • 鱼塘隐患
    .icon-yutangyinhuan
  • 首页-水务设施-河流
    .icon-shouye-shuiwusheshi-heliu
  • 河流位置@2x
    .icon-heliuweizhix
  • 水库
    .icon-shuiku
  • 钓鱼
    .icon-diaoyu1
  • 农家乐
    .icon-nongjiale
  • 搜索--1
    .icon-sousuo
  • 竖线
    .icon-tubiaozhizuo-1
  • .icon-zuo
  • 首页
    .icon-iconfontzhizuobiaozhun023101
  • 分享
    .icon-fenxiang
  • 喇叭
    .icon-laba
  • 太阳
    .icon-weibiaoti-1
  • 月亮
    .icon-yueliang
  • 导航
    .icon-daohang
  • 天气-日出
    .icon-tianqi-richu
  • 天气-日落
    .icon-tianqi-rila
  • 天气-月出
    .icon-tianqi-yuechu
  • 天气-月落
    .icon-tianqi-yuela
  • 日出
    .icon-richu
  • 日落
    .icon-rila
  • 日落
    .icon-sunset
  • 日出
    .icon-sunrise
  • .icon-shang
  • .icon-xia1
  • .icon-fork
  • 三角_下
    .icon-sanjiao_xia
  • 定位
    .icon-dingwei3
  • 定位
    .icon-weizhi
  • 定位大头针
    .icon-dingweidatouzhen
  • 添加
    .icon-tianjia
  • 定位
    .icon-dingwei2
  • 搜索
    .icon-xiazai17
  • 日出日落
    .icon-richurila
  • 钓鱼
    .icon-diaoyu
  • 钓鱼
    .icon-shore__easyiconnet
  • 钓鱼
    .icon-ziyuan
  • 对话框3
    .icon-duihuakuang3
  • VIP
    .icon-shenqingchengweiVIP
  • 我的
    .icon-wode3
  • .icon-xing1
  • 道具
    .icon-daoju
  • 倒计时
    .icon-icon065
  • 婚姻状态
    .icon-hunyinzhuangtai
  • 黄瓜
    .icon-huanggua
  • 香蕉
    .icon-xiangjiao
  • 完成
    .icon-wancheng
  • 帮助
    .icon-bangzhu1
  • 水蜜桃
    .icon-shuimitao
  • 香蕉
    .icon-xiangjiao1
  • 小黄瓜
    .icon-xiaohuanggua
  • 广场
    .icon-guangchang
  • 首页1
    .icon-shouye1
  • 我的1
    .icon-wode2
  • 首页
    .icon-shouye
  • 商店
    .icon-shangdian
  • 我的
    .icon-wode1
  • 美女
    .icon-nv
  • .icon-dan
  • 鸡儿
    .icon-xiaojier
  • 鸡蛋
    .icon-jidan
  • 小鸡
    .icon-chicken
  • .icon-woman
  • 小黄鸡
    .icon-xiaohuangji
  • 设置
    .icon-10
  • 邀请
    .icon-yaoqing
  • 统计
    .icon-dibugeicon_tongji
  • 更新
    .icon-gengxin
  • 设置
    .icon-shezhi1
  • 钱币-彩
    .icon-qianbicolor
  • 认证
    .icon-renzheng
  • 转出
    .icon-roll-out
  • 电话
    .icon-dianhua1
  • 列表模式
    .icon-liebiaomoshi
  • 定位
    .icon-dingwei1
  • 列表模式_地标
    .icon-liebiaomoshidibiao
  • .icon-you
  • .icon-zan11
  • 邮箱
    .icon-youxiang
  • 日历
    .icon-rili
  • 面积
    .icon-mianji
  • 评论
    .icon-pinglun2
  • 清空
    .icon-qingkong
  • .icon-chuang
  • 地图
    .icon-map
  • 地图
    .icon-ditu
  • 定位
    .icon-locate-04
  • 历史查询
    .icon-lishichaxun
  • 历史查询
    .icon-lishichaxun1
  • 起飞
    .icon-qifei1
  • 到达
    .icon-daoda1
  • 保障
    .icon-weibiaoti-
  • 酒店
    .icon-jiudian3
  • 电话
    .icon-dianhua
  • 回复
    .icon-reply
  • 点赞
    .icon-zan1
  • 我的激活
    .icon-wodejihuo
  • 我的未激活
    .icon-wodeweijihuo
  • 我的空心
    .icon-wodekongxin
  • 飞行 旅游 出差 飞机 800
    .icon-feiji800
  • 释义 解释 注释
    .icon-shiyijieshizhushi
  • 类型
    .icon-leixing
  • 悲伤
    .icon-beishang
  • 悲伤
    .icon-beishang1
  • 人员
    .icon-staff-copy
  • 时间
    .icon-shijian
  • 航班延误
    .icon-hangbanyanwu
  • 金币
    .icon-jinbi
  • 支付
    .icon-zhifu
  • 笑脸
    .icon-xiaolian
  • 创意实验室
    .icon-chuangyishiyanshi
  • 转换
    .icon-zhuanhuan
  • 图片
    .icon-tupian
  • 签名
    .icon-qianming
  • 签名
    .icon-qianming1
  • 筛选
    .icon-shaixuan
  • 点选 - 勾
    .icon-gou
  • 坐标
    .icon-zuobiao
  • 评 论
    .icon-pinglun1
  • .icon-xia2
  • .icon-xing
  • .icon-xia
  • 相机
    .icon-xiangji
  • 定位
    .icon-dingwei
  • 酒店
    .icon-jiudian2
  • 抢购
    .icon-qianggou
  • 前进
    .icon-qianjin
  • 其他
    .icon-qita2
  • 前进
    .icon-go
  • 星星
    .icon-star
  • 旅游出行
    .icon-lvyouchuhang
  • 保障
    .icon-baozhang
  • 健康
    .icon-jiankang
  • 其他 (1)
    .icon-qita
  • 其他
    .icon-qita1
  • 安全保障
    .icon-anquanbaozhang
  • 爱心
    .icon-aixin-copy
  • 酒店3
    .icon-jiudian1
  • 出行_s
    .icon-chuhang_s
  • 错误
    .icon-58b471
  • 预定管理2
    .icon-yudingguanli
  • 任务
    .icon-msnui-task-inverse
  • 感叹号
    .icon-iconfontgantanhao
  • 特殊要求
    .icon-teshuyaoqiu
  • 正确
    .icon-zhengque
  • Mastercard
    .icon-Mastercard
  • 管理
    .icon-guanli7
  • 毛线
    .icon-mx
  • 我来爆料
    .icon-wolaibaoliao
  • 礼物
    .icon-gift__easyico
  • 管理
    .icon-guanli
  • 银联
    .icon-yinlian
  • 添加
    .icon-tianjia4
  • Beta
    .icon-beta
  • 提醒
    .icon-iconfontzhizuobiaozhun41
  • 发现点击
    .icon-faxiandianji
  • 发现_normal
    .icon-faxian_normal
  • 发现
    .icon-faxian
  • 我的
    .icon-wode
  • 活动图标2
    .icon-huodongtubiao
  • 我的动态
    .icon-wodedongtai
  • 活动专区ai-01
    .icon-huodongzhuanquai-
  • 账单
    .icon-zhangdan
  • 消息
    .icon-yibangaojing
  • 色块-卡包
    .icon-sekuaiqiabao
  • 设置
    .icon-shezhi
  • 关于我们icon
    .icon-guanyuwomenicon
  • 帮助
    .icon-bangzhu
  • 呕吐-1
    .icon--vomiting-
  • 通知
    .icon-tongzhi
  • VIP
    .icon-VIP1
  • .icon-jia
  • 评论
    .icon-pinglun
  • 信用卡
    .icon-xinyongqia
  • 楼主标签
    .icon-louzhubiaoqian
  • 收藏
    .icon-shoucangshixin
  • .icon-jia1
  • 回复
    .icon-hf
  • .icon-xia-copy
  • 引进风险保障
    .icon-yinjinfengxianbaozhang
  • 餐饮
    .icon-icon
  • 出行特权
    .icon-chuxingtequan
  • .icon-nian
  • .icon-ding
  • .icon-cai
  • 浦发银行
    .icon-pufayinhang
  • visa
    .icon-visa
  • VIP
    .icon-VIP
  • 礼物
    .icon-liwu
  • 点点
    .icon-diandian
  • 银联支付
    .icon-yinlianzhifu
  • .icon-tu
  • 招商
    .icon-zhaoshang
  • 举报
    .icon-jubao
  • 酒店
    .icon-jiudian
  • 兑换
    .icon-duihuan
  • .icon-jian
  • .icon-zeng
  • .icon-fan
  • 蜜罐
    .icon-miguan

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-weixinzhifu1
  • 支付宝
    #icon-zhifubao
  • 刷新
    #icon-shuaxin1
  • #icon-gou1
  • 天气
    #icon-tianqi1
  • 微信
    #icon-weixin2
  • 问题
    #icon-wenti1
  • 好评
    #icon-haoping2
  • 定位
    #icon-dingwei5
  • 手机
    #icon-shouji1
  • jiaose
    #icon-jiaose
  • 邀请
    #icon-yaoqing2
  • 礼品
    #icon-lipin1
  • Notifications
    #icon-Notifications
  • Settings
    #icon-Settings
  • 钻石
    #icon-BasicIcons-all-
  • SmileOutlined
    #icon-biaoqing
  • 皇冠
    #icon-huangguan
  • 设置
    #icon-shezhi3
  • 微信
    #icon-weixin1
  • 常见问题 帮助
    #icon-changjianwentibangzhu
  • 用户群组
    #icon-yonghuqunzu
  • 通知
    #icon-tongzhi4
  • 手机
    #icon-shouji
  • 礼物
    #icon-liwu2
  • 天气
    #icon-tianqi
  • 定位
    #icon-dingwei4
  • 绑定手机
    #icon-bangdingshouji
  • vip
    #icon-vip3
  • 绑定手机
    #icon-bangdingshouji1
  • 绑定微信
    #icon-bangdingweixin
  • 礼物
    #icon-liwu1
  • 扫码加群
    #icon-saomajiaqun
  • 收 藏
    #icon-shoucang1
  • 文章
    #icon-wenzhang
  • 视频
    #icon-shipin1
  • 地图
    #icon-ditu1
  • 兑换码
    #icon-duihuanma
  • 设 置
    #icon-shezhi2
  • #icon-08
  • 好评
    #icon-haoping
  • 刷新
    #icon-shuaxin
  • 问题
    #icon-wenti
  • 金币
    #icon-jinbi1
  • 分享
    #icon-fenxiang7
  • 好评
    #icon-haoping1
  • 任务
    #icon-renwu1
  • 用车百科
    #icon-yongchebaike
  • 商店
    #icon-shangdian1
  • 钻石
    #icon-diamond
  • 通知
    #icon-tongzhi3
  • 潮汐-1
    #icon-chaoxi-
  • 百科
    #icon-baike2
  • vip
    #icon-vip2
  • 关 闭
    #icon-guanbi1
  • 下 拉
    #icon-xiala2
  • 评论
    #icon-pinglun5
  • 首页-选中
    #icon-yemian-copy-copy-copy
  • 回到顶部
    #icon-huidaodingbu
  • 最新
    #icon-zuixin
  • 最新活动 (2)
    #icon-zuixinhuodong
  • 免费
    #icon-mianfei
  • 后退
    #icon-houtui
  • 赚钱
    #icon-zhuanqian
  • 第一名
    #icon-diyiming
  • 第二名
    #icon-dierming
  • 第三名
    #icon-disanming
  • 免费
    #icon-mianfei1
  • 安全
    #icon-anquan
  • 分 享 (1)
    #icon-fenxiang6
  • 免费
    #icon-mianfei2
  • 上传图片
    #icon-shangchuantupian1
  • 测评
    #icon-icon-test
  • 免费课程
    #icon-mianfeikecheng
  • 新东方-刷新图标
    #icon-refresh
  • 上传图片
    #icon-shangchuantupian
  • 话费
    #icon-huafei
  • 提醒
    #icon-tixing1
  • 录音赚钱
    #icon-luyinzhuanqian
  • 清扫
    #icon-qingsao1
  • #icon-shang2
  • 合并
    #icon-hebing
  • 清扫
    #icon-qingsao
  • 我 的
    #icon-wode5
  • 余额
    #icon-yue
  • 通知
    #icon-tongzhi1
  • 支付宝支付
    #icon-zhifubaozhifu
  • 悬赏-选中
    #icon-xuanshang-
  • 微信支付
    #icon-weixinzhifu
  • 互助
    #icon-huzhu
  • 通知 (1)
    #icon-tongzhi2
  • 任务查询
    #icon-renwuchaxun
  • 任务
    #icon-renwu
  • 任务悬赏-平台图标
    #icon-renwuxuanshang-pingtaitubiao
  • 广场
    #icon-guangchang1
  • 选中
    #icon-xuanzhong
  • #icon-dian1
  • 我的
    #icon-my-on
  • 暂无数据
    #icon-zanwushuju
  • #icon-jia2
  • 公告
    #icon-gonggao
  • 已抢完
    #icon-yiqiangwan
  • 高价悬赏
    #icon-gaojiaxuanshang
  • 认证
    #icon-renzheng2
  • 商城管理
    #icon-shangchengguanli
  • 分享
    #icon-Artboard
  • 优惠券
    #icon-youhuiquan
  • 开关 关
    #icon-kaiguanguan-copy
  • 开关 关
    #icon-kaiguanguan-open
  • 排序
    #icon-order-asc
  • 复制
    #icon-fuzhi
  • 下 拉
    #icon-xiala
  • 下 拉
    #icon-xiala1
  • 帮助
    #icon-icon_help
  • 二维码
    #icon-ico
  • 好评
    #icon-icon_good
  • 群组
    #icon-qunzu
  • 论坛热帖
    #icon-luntanretie
  • 朋友圈
    #icon-pengyouquan
  • 朋友圈
    #icon-friends
  • #icon-hua
  • 发布 (9)
    #icon-fabu
  • 收 藏
    #icon-shoucang
  • 评 论
    #icon-pinglun12
  • 分 享
    #icon-fenxiang5
  • #icon-hua1
  • 我 的
    #icon-wodedangxuan
  • 评论
    #icon-pinglun4
  • 分 享
    #icon-fenxiang4
  • 评 论
    #icon-pinglun11
  • 认证
    #icon-renzheng1
  • 拍卖
    #icon-paimai
  • 分 享2
    #icon-fenxiang3
  • 积分
    #icon-jifen
  • 邀请
    #icon-yaoqing1
  • 红包
    #icon-hongbao1
  • 提醒
    #icon-tixing
  • #icon-shang1
  • 实名认证
    #icon-shimingrenzheng
  • 退出
    #icon-tuichu
  • 微信
    #icon-weixin
  • 大炮
    #icon-dapao
  • 中国国旗
    #icon-guoqi
  • 白菜猪肉饺子
    #icon-tubiaozhizuo-
  • 韭菜猪肉饺子
    #icon-tubiaozhizuo-2
  • 航空航天-aerospace-导弹-mi
    #icon-hangkonghangtian-aerospace-daodan-mi
  • 美女剪影
    #icon-afdcb
  • VIP
    #icon-VIP2
  • 图层
    #icon-tuceng
  • 图层
    #icon-tuceng1
  • 百科
    #icon-baike1
  • 百科
    #icon-baike
  • 点赞
    #icon-zan12
  • 上引号
    #icon-shangyinhao
  • 宝箱-01
    #icon-baoxiang-01
  • 导航
    #icon-daohang1
  • #icon-dian
  • 当前位置
    #icon-dangqianweizhi
  • vip
    #icon-vip2222-copy
  • vip
    #icon-vip1
  • 礼品
    #icon-lipin
  • 铃铛
    #icon-iconset0218
  • 位置
    #icon-weizhi2
  • #icon-xia-copy1
  • 天气
    #icon-icon-power-fi-weather
  • 潮汐
    #icon-chaoxi
  • 钓鱼
    #icon--chuidiao
  • 我 的
    #icon-wode4
  • 分享赚钱
    #icon-fenxiangzhuanqian-copy
  • 潮汐-彩
    #icon-chaoxicai
  • 实心正方形
    #icon-shixinzhengfangxing
  • 审核-xsy-1
    #icon-shenhe
  • 商品
    #icon-shangpin-copy
  • 订单
    #icon-icon-
  • 支付成功
    #icon-zhifuchenggong
  • 前往
    #icon-qianwang
  • 前往
    #icon-qianwang1
  • 关 闭
    #icon-guanbi
  • 分享
    #icon-fenxiang2
  • 红包
    #icon-hongbao
  • 玉石-1
    #icon-bowlder
  • 联系我们
    #icon-lianxiwomen
  • #icon-qun
  • 帮助
    #icon-msnui-help-inversem
  • 抽奖
    #icon-choujiang
  • #icon-kong1
  • 玉石
    #icon-yushi
  • 新手教程
    #icon-xinshoujiaocheng
  • 更多(箭头)
    #icon-gengduo1
  • vip
    #icon-vip
  • 完成
    #icon-wancheng11
  • 帮 助
    #icon-bangzhu3
  • 帮助
    #icon-bangzhu2
  • haoyou
    #icon-haoyou
  • 客服
    #icon-wodekefu
  • 笑脸
    #icon-xiaolian1
  • 商店
    #icon-icon-life-shop
  • 发现
    #icon-faxian1
  • 钓鱼
    #icon-diaoyu2
  • 我 的
    #icon-wode-copy-copy
  • 钓鱼
    #icon-xintubiao_diaoyu
  • 叉叉
    #icon-chacha
  • 勾选
    #icon-gouxuan
  • 未勾选
    #icon-weigouxuan
  • 解释
    #icon-jieshi
  • 签到
    #icon-qiandao
  • 拍照
    #icon-paizhao1
  • 完成
    #icon-wancheng1
  • 分 享
    #icon-fenxiang1
  • 电话
    #icon-yidongduanicon--copy
  • 点赞 (1)
    #icon-dianzan-copy
  • 拍照
    #icon-paizhao
  • 更多
    #icon-gengduo
  • 报错
    #icon-baocuo
  • 电话
    #icon-yidongduanicon-
  • 评 论
    #icon-pinglun3
  • 水库
    #icon-shuiku1
  • 河流
    #icon-heliu
  • 向下
    #icon-xiangxia
  • 垂钓水岸
    #icon-chuidiaoshuian
  • 搜索--1
    #icon-sousuo-copy
  • 前往A
    #icon-iconzhuanqu41
  • 位置
    #icon-weizhi1
  • 五角星
    #icon-xingzhuang60kaobei2
  • 鱼塘隐患
    #icon-yutangyinhuan
  • 首页-水务设施-河流
    #icon-shouye-shuiwusheshi-heliu
  • 河流位置@2x
    #icon-heliuweizhix
  • 水库
    #icon-shuiku
  • 钓鱼
    #icon-diaoyu1
  • 农家乐
    #icon-nongjiale
  • 搜索--1
    #icon-sousuo
  • 竖线
    #icon-tubiaozhizuo-1
  • #icon-zuo
  • 首页
    #icon-iconfontzhizuobiaozhun023101
  • 分享
    #icon-fenxiang
  • 喇叭
    #icon-laba
  • 太阳
    #icon-weibiaoti-1
  • 月亮
    #icon-yueliang
  • 导航
    #icon-daohang
  • 天气-日出
    #icon-tianqi-richu
  • 天气-日落
    #icon-tianqi-rila
  • 天气-月出
    #icon-tianqi-yuechu
  • 天气-月落
    #icon-tianqi-yuela
  • 日出
    #icon-richu
  • 日落
    #icon-rila
  • 日落
    #icon-sunset
  • 日出
    #icon-sunrise
  • #icon-shang
  • #icon-xia1
  • #icon-fork
  • 三角_下
    #icon-sanjiao_xia
  • 定位
    #icon-dingwei3
  • 定位
    #icon-weizhi
  • 定位大头针
    #icon-dingweidatouzhen
  • 添加
    #icon-tianjia
  • 定位
    #icon-dingwei2
  • 搜索
    #icon-xiazai17
  • 日出日落
    #icon-richurila
  • 钓鱼
    #icon-diaoyu
  • 钓鱼
    #icon-shore__easyiconnet
  • 钓鱼
    #icon-ziyuan
  • 对话框3
    #icon-duihuakuang3
  • VIP
    #icon-shenqingchengweiVIP
  • 我的
    #icon-wode3
  • #icon-xing1
  • 道具
    #icon-daoju
  • 倒计时
    #icon-icon065
  • 婚姻状态
    #icon-hunyinzhuangtai
  • 黄瓜
    #icon-huanggua
  • 香蕉
    #icon-xiangjiao
  • 完成
    #icon-wancheng
  • 帮助
    #icon-bangzhu1
  • 水蜜桃
    #icon-shuimitao
  • 香蕉
    #icon-xiangjiao1
  • 小黄瓜
    #icon-xiaohuanggua
  • 广场
    #icon-guangchang
  • 首页1
    #icon-shouye1
  • 我的1
    #icon-wode2
  • 首页
    #icon-shouye
  • 商店
    #icon-shangdian
  • 我的
    #icon-wode1
  • 美女
    #icon-nv
  • #icon-dan
  • 鸡儿
    #icon-xiaojier
  • 鸡蛋
    #icon-jidan
  • 小鸡
    #icon-chicken
  • #icon-woman
  • 小黄鸡
    #icon-xiaohuangji
  • 设置
    #icon-10
  • 邀请
    #icon-yaoqing
  • 统计
    #icon-dibugeicon_tongji
  • 更新
    #icon-gengxin
  • 设置
    #icon-shezhi1
  • 钱币-彩
    #icon-qianbicolor
  • 认证
    #icon-renzheng
  • 转出
    #icon-roll-out
  • 电话
    #icon-dianhua1
  • 列表模式
    #icon-liebiaomoshi
  • 定位
    #icon-dingwei1
  • 列表模式_地标
    #icon-liebiaomoshidibiao
  • #icon-you
  • #icon-zan11
  • 邮箱
    #icon-youxiang
  • 日历
    #icon-rili
  • 面积
    #icon-mianji
  • 评论
    #icon-pinglun2
  • 清空
    #icon-qingkong
  • #icon-chuang
  • 地图
    #icon-map
  • 地图
    #icon-ditu
  • 定位
    #icon-locate-04
  • 历史查询
    #icon-lishichaxun
  • 历史查询
    #icon-lishichaxun1
  • 起飞
    #icon-qifei1
  • 到达
    #icon-daoda1
  • 保障
    #icon-weibiaoti-
  • 酒店
    #icon-jiudian3
  • 电话
    #icon-dianhua
  • 回复
    #icon-reply
  • 点赞
    #icon-zan1
  • 我的激活
    #icon-wodejihuo
  • 我的未激活
    #icon-wodeweijihuo
  • 我的空心
    #icon-wodekongxin
  • 飞行 旅游 出差 飞机 800
    #icon-feiji800
  • 释义 解释 注释
    #icon-shiyijieshizhushi
  • 类型
    #icon-leixing
  • 悲伤
    #icon-beishang
  • 悲伤
    #icon-beishang1
  • 人员
    #icon-staff-copy
  • 时间
    #icon-shijian
  • 航班延误
    #icon-hangbanyanwu
  • 金币
    #icon-jinbi
  • 支付
    #icon-zhifu
  • 笑脸
    #icon-xiaolian
  • 创意实验室
    #icon-chuangyishiyanshi
  • 转换
    #icon-zhuanhuan
  • 图片
    #icon-tupian
  • 签名
    #icon-qianming
  • 签名
    #icon-qianming1
  • 筛选
    #icon-shaixuan
  • 点选 - 勾
    #icon-gou
  • 坐标
    #icon-zuobiao
  • 评 论
    #icon-pinglun1
  • #icon-xia2
  • #icon-xing
  • #icon-xia
  • 相机
    #icon-xiangji
  • 定位
    #icon-dingwei
  • 酒店
    #icon-jiudian2
  • 抢购
    #icon-qianggou
  • 前进
    #icon-qianjin
  • 其他
    #icon-qita2
  • 前进
    #icon-go
  • 星星
    #icon-star
  • 旅游出行
    #icon-lvyouchuhang
  • 保障
    #icon-baozhang
  • 健康
    #icon-jiankang
  • 其他 (1)
    #icon-qita
  • 其他
    #icon-qita1
  • 安全保障
    #icon-anquanbaozhang
  • 爱心
    #icon-aixin-copy
  • 酒店3
    #icon-jiudian1
  • 出行_s
    #icon-chuhang_s
  • 错误
    #icon-58b471
  • 预定管理2
    #icon-yudingguanli
  • 任务
    #icon-msnui-task-inverse
  • 感叹号
    #icon-iconfontgantanhao
  • 特殊要求
    #icon-teshuyaoqiu
  • 正确
    #icon-zhengque
  • Mastercard
    #icon-Mastercard
  • 管理
    #icon-guanli7
  • 毛线
    #icon-mx
  • 我来爆料
    #icon-wolaibaoliao
  • 礼物
    #icon-gift__easyico
  • 管理
    #icon-guanli
  • 银联
    #icon-yinlian
  • 添加
    #icon-tianjia4
  • Beta
    #icon-beta
  • 提醒
    #icon-iconfontzhizuobiaozhun41
  • 发现点击
    #icon-faxiandianji
  • 发现_normal
    #icon-faxian_normal
  • 发现
    #icon-faxian
  • 我的
    #icon-wode
  • 活动图标2
    #icon-huodongtubiao
  • 我的动态
    #icon-wodedongtai
  • 活动专区ai-01
    #icon-huodongzhuanquai-
  • 账单
    #icon-zhangdan
  • 消息
    #icon-yibangaojing
  • 色块-卡包
    #icon-sekuaiqiabao
  • 设置
    #icon-shezhi
  • 关于我们icon
    #icon-guanyuwomenicon
  • 帮助
    #icon-bangzhu
  • 呕吐-1
    #icon--vomiting-
  • 通知
    #icon-tongzhi
  • VIP
    #icon-VIP1
  • #icon-jia
  • 评论
    #icon-pinglun
  • 信用卡
    #icon-xinyongqia
  • 楼主标签
    #icon-louzhubiaoqian
  • 收藏
    #icon-shoucangshixin
  • #icon-jia1
  • 回复
    #icon-hf
  • #icon-xia-copy
  • 引进风险保障
    #icon-yinjinfengxianbaozhang
  • 餐饮
    #icon-icon
  • 出行特权
    #icon-chuxingtequan
  • #icon-nian
  • #icon-ding
  • #icon-cai
  • 浦发银行
    #icon-pufayinhang
  • visa
    #icon-visa
  • VIP
    #icon-VIP
  • 礼物
    #icon-liwu
  • 点点
    #icon-diandian
  • 银联支付
    #icon-yinlianzhifu
  • #icon-tu
  • 招商
    #icon-zhaoshang
  • 举报
    #icon-jubao
  • 酒店
    #icon-jiudian
  • 兑换
    #icon-duihuan
  • #icon-jian
  • #icon-zeng
  • #icon-fan
  • 蜜罐
    #icon-miguan

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>