• 访客
    
  • 访问
    
  • 主页
    
  • 起点
    
  • 任务管理
    
  • 多语言
    
  • 账号
    
  • icon-exit
    
  • 时钟-fill
    
  • 轨道交通
    
  • 问答
    
  • 电话
    
  • 客服
    
  • 洗手间
    
  • 导航
    
  • 餐饮
    
  • 展开
    
  • 返回
    
  • 首页
    
  • 文化馆
    
  • 阅湖台
    
  • 出入口
    
  • 停车场
    
  • 露营地
    
  • 关闭
    
  • 定位
    
  • 摄像头
    
  • 摄像头
    
  • vip
    
  • 缩小
    
  • 放大
    
  • 隐藏
    
  • 语音切换
    
  • 暂停
    
  • 下一集
    
  • 建筑建材
    
  • 33、全选
    
  • daohang
    
  • 自动讲解
    
  • 周边
    
  • 足迹
    
  • 巡逻
    
  • icon-xianlu
    
  • 巡逻任务
    
  • 唱片
    
  • 点赞_块
    
  • 分类
    
  • 点亮点位
    
  • 距离
    
  • 添加
    
  • 表情
    
  • 意见反馈
    
  • 我的足迹
    
  • 分享
    
  • 去这里
    
  • 打卡
    
  • AR导航
    
  • 退出
    
  • 已收藏
    
  • 添加图片
    
  • 收藏
    
  • 简介
    
  • 下拉
    
  • 关怀
    
  • 自动讲解
    
  • 暂停播放
    
  • 播放
    
  • 开始导航
    
  • 搜索
    
  • 筛选
    
  • 相机1
    
  • 路线
    
  • 右箭头圆圈
    
  • 减号
    
  • 更多
    
  • 我的题库
    
  • KHCFDC_问卷
    
  • 图片
    
  • 录制管理
    
  • VR
    
  • 地图
    
  • 指南针
    
  • 
  • 面性图标747
    
  • 我的
    
  • 出入库记录
    
  • icon_车辆出入管理
    
  • icon_车辆出入管理
    
  • 刷新
    
  • 图标-电池框
    
  • 向下
    
  • 折叠2
    
  • 折叠1
    
  • 数据分析
    
  • 轨迹,线路,路径
    
  • 31停车位
    
  • 工牌
    
  • 数据
    
  • 车辆管理
    
  • 车辆 (1)
    
  • 车辆 (4)
    
  • 车辆 (3)
    
  • 车辆 (1)
    
  • 扫码
    
  • 周边
    
  • 𐃐
    添加好友
    𐃐
  • 位置共享 目的地
    
  • 咨询
    
  • 消息
    
  • 分 享
    
  • 语言切换
    
  • 定位
    
  • 停车场
    
  • 退格
    
  • 浏览
    
  • 点击
    
  • 太阳
    
  • 笑脸
    
  • 哭脸
    
  • 时钟
    
  • 咨询
    
  • 文件-方案
    
  • 节点
    
  • 
  • 对话框1
    
  • 左后方转弯
    
  • 直行
    
  • 左前方
    
  • 电梯
    
  • 扶梯
    
  • 楼梯
    
  • 左转向
    
  • 电话
    
  • 部门
    
  • 个人
    
  • 法人代表
    
  • 向上
    
  • 24gl-move
    
  • 箭头_向上
    
  • 向上4
    
  • 操作-退格
    
  • 箭头3-右_fill
    
  • 左转
    
  • 学院
    
  • 报文信息查询
    
  • 资讯
    
  • scan
    
  • 办事大厅
    
  • 在展藏品
    
  • 二维码
    
  • 标题
    
  • 广告
    
  • 刷新
    
  • 警告
    
  • 单选-已选
    
  • 单选
    
  • 支付宝
    
  • 微信
    
  • 已处理
    
  • 已关闭
    
  • 已支付
    
  • 未支付
    
  • 已开通
    
  • 待回复
    
  • 已完成
    
  • 垃圾桶
    
  • 成功
    
  • 24gl-fileText
    
  • 成功
    
  • 荣誉
    
  • 24gl-tags3
    
  • 暂无图片
    
  • 𐂼
    打卡
    𐂼
  • 一键生成
    
  • 已生成
    
  • 服务_o
    
  • 问题
    
  • 三足鼎
    
  • 列表
    
  • 影院
    
  • 体育场馆使用申请
    
  • 地图
    
  • 语音
    
  • 语音2
    
  • 24gl-volumeDisable
    
  • 24gl-volumeMiddle
    
  • 24gf-play
    
  • 
  • 微信
    
  • 24gf-envelope2
    
  • 更多
    
  • 分享
    
  • 蓝牙
    
  • 休息一下
    
  • 下箭头
    
  • 置顶
    
  • 3D模型@3x
    
  • 全屏
    
  • 退出全屏
    
  • AR导航
    
  • 指示牌
    
  • 项目
    
  • 收藏
    
  • 设备设施
    
  • 留言
    
  • 订单
    
  • 周边
    
  • 企业
    
  • 复制
    
  • 基本icon_寻车
    
  • 已收藏
    
  • 定位小
    
  • 地图
    
  • 步行
    
  • 导航-选中
    
  • 导航
    
  • 门窗 门窗五金安装
    
  • 定位-定位
    
  • 开门
    
  • 
  • 收起
    
  • 
  • 建筑物
    
  • 6起点
    
  • 9终点
    
  • 导航
    
  • 箭头_切换向上
    
  • 楼层
    
  • 我的文章
    
  • 凸形
    
  • 寻车中
    
  • 楼梯(上)
    
  • 洗手间
    
  • 扶梯
    
  • 电梯
    
  • 双指拖动
    
  • 电梯
    
  • 转换
    
  • 方向路线资料
    
  • 灭火器
    
  • 全景
    
  • 全景
    
  • 全景数
    
  • 全景照片-面
    
  • 全景图
    
  • Ruler
    
  • 地图尺子,测量,测距,距离
    
  • 节点统计
    
  • 
  • 横拉
    
  • 点击
    
  • 缩放
    
  • 鼠标点击
    
  • 鼠标移动
    
  • 鼠标中间
    
  • 键盘
    
  • 分支
    
  • 推荐路线
    
  • 跳转分支
    
  • 步行人
    
  • 室内行走模式
    
  • 空间_输入
    
  • 服务工作空间
    
  • 3D渲染文件
    
  • 小屏
    
  • plus
    
  • scenes
    
  • VR-互动
    
  • cube
    
  • 静音
    
  • scene-select
    
  • play
    
  • 导航
    
  • text
    
  • see user o
    
  • 地图
    
  • 办会家_3d签到
    
  • 停止
    
  • image
    
  • 电话
    
  • 喇叭
    
  • down
    
  • 点击选多边形
    
  • 素材库
    
  • music
    
  • vr
    
  • Collection normal
    
  • 效果总览
    
  • 隐藏键盘
    
  • 视频
    
  • 陀螺仪
    
  • 场景打开
    
  • 场景默认
    
  • AR
    
  • 星星
    
  • 热点
    
  • component
    
  • 402导航
    
  • 星星
    
  • 笑脸
    
  • 
  • heart
    
  • user
    
  • hot
    
  • return
    
  • sun
    
  • 不显示
    
  • 开关
    
  • 撤销
    
  • close
    
  • 雪花
    
  • edit
    
  • menu
    
  • 全景
    
  • 720°全景
    
  • 视角
    
  • 大雨
    
  • 订单管理
    
  • 订单
    
  • right
    
  • 麦克风-静音
    
  • 删 除
    
  • sun
    
  • 确认密码
    
  • Url
    
  • 爱心+
    
  • left
    
  • 006主页
    
  • 切片导航
    
  • 扇形图
    
  • 19.导航地图-01
    
  • 模板管理
    
  • 卡卷
    
  • 卡卷
    
  • 禁止
    
  • sun
    
  • left
    
  • down
    
  • 消息
    
  • 消息
    
  • 视频
    
  • 3d
    
  • share
    
  • round_check
    
  • 上传
    
  • 分享
    
  • share
    
  • 3.1-旋转
    
  • help
    
  • left
    
  • more
    
  • message
    
  • search
    
  • 导航-购物车
    
  • video
    
  • trangle-mini-right
    
  • trangle-mini-up
    
  • trangle-mini-down
    
  • trangle-mini-left
    
  • sign-eyeoff
    
  • sign-eyeon
    
  • 评 论
    
  • 视频2
    
  • settings
    
  • 小雨
    
  • Full screen
    
  • phone
    
  • 弹幕
    
  • 语音
    
  • 太阳
    
  • star
    
  • 红包
    
  • message
    
  • 删除
    
  • lock-o
    
  • wechat
    
  • pause
    
  • arrows_squares
    
  • close-fill
    
  • menu
    
  • 喇叭001_hover
    
  • 清屏
    
  • message
    
  • 音乐
    
  • 模型-线
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 访客
    .iconfangke
  • 访问
    .iconfangke1
  • 主页
    .iconzhuye1
  • 起点
    .iconqidian1
  • 任务管理
    .iconrenwuguanli
  • 多语言
    .iconduoyuyan
  • 账号
    .iconzhanghao
  • icon-exit
    .iconicon-exit
  • 时钟-fill
    .iconshizhongfill
  • 轨道交通
    .iconguidaojiaotong
  • 问答
    .iconwenda
  • 电话
    .icondianhua1
  • 客服
    .iconkefu
  • 洗手间
    .iconxishoujian1
  • 导航
    .icondaohang3
  • 餐饮
    .iconcanyin
  • 展开
    .iconzhankai
  • 返回
    .iconfanhui
  • 首页
    .iconshouye
  • 文化馆
    .iconwenhuaguan
  • 阅湖台
    .iconyuehutai
  • 出入口
    .iconchurukou
  • 停车场
    .icontingchechang1
  • 露营地
    .iconlouyingdi
  • 关闭
    .iconguanbi
  • 定位
    .icondingwei
  • 摄像头
    .iconshexiangtou
  • 摄像头
    .iconshexiangtou1
  • vip
    .iconvip
  • 缩小
    .iconsuoxiao
  • 放大
    .iconfangda
  • 隐藏
    .iconyincang
  • 语音切换
    .iconyuyinqiehuan
  • 暂停
    .iconzanting
  • 下一集
    .iconxiayiji
  • 建筑建材
    .iconjianzhujiancai
  • 33、全选
    .iconquanxuan
  • daohang
    .icondaohang2
  • 自动讲解
    .iconzidongjiangjie1
  • 周边
    .iconzhoubian2
  • 足迹
    .iconzuji
  • 巡逻
    .iconxunluo
  • icon-xianlu
    .iconxunluojilu
  • 巡逻任务
    .iconxunluorenwu
  • 唱片
    .iconchangpian
  • 点赞_块
    .icondianzan_kuai
  • 分类
    .iconfenlei
  • 点亮点位
    .icondianliangdianwei
  • 距离
    .iconjuli
  • 添加
    .icontianjia
  • 表情
    .iconbiaoqing
  • 意见反馈
    .iconyijianfankui
  • 我的足迹
    .iconwodezuji
  • 分享
    .iconfenxiang3
  • 去这里
    .iconquzheli
  • 打卡
    .icondaka1
  • AR导航
    .iconARdaohang1
  • 退出
    .icontuichu
  • 已收藏
    .iconyishoucang1
  • 添加图片
    .icontianjiatupian
  • 收藏
    .iconshoucang1
  • 简介
    .iconjianjie
  • 下拉
    .iconxiala
  • 关怀
    .iconguanhuai
  • 自动讲解
    .iconzidongjiangjie
  • 暂停播放
    .iconzantingbofang
  • 播放
    .iconbofang
  • 开始导航
    .iconkaishidaohang
  • 搜索
    .iconsousuo
  • 筛选
    .iconshaixuan
  • 相机1
    .iconxiangji1
  • 路线
    .iconziyuan
  • 右箭头圆圈
    .iconyoujiantouyuanquan
  • 减号
    .iconjianhao
  • 更多
    .icongengduo2
  • 我的题库
    .iconwodetiku
  • KHCFDC_问卷
    .iconwenjuan
  • 图片
    .icontupian
  • 录制管理
    .iconluzhiguanli
  • VR
    .iconVR
  • 地图
    .iconditu2
  • 指南针
    .iconzhinanzhen
  • .iconche1
  • 面性图标747
    .iconmianxingtubiao747
  • 我的
    .iconwode
  • 出入库记录
    .iconchurukujilu
  • icon_车辆出入管理
    .iconicon_cheliangchuruguanli
  • icon_车辆出入管理
    .iconicon_cheliangchuruguanli1
  • 刷新
    .iconshuaxin1
  • 图标-电池框
    .icontubiao-dianchikuang
  • 向下
    .iconxiangxia
  • 折叠2
    .iconzhedie2
  • 折叠1
    .iconzhedie1
  • 数据分析
    .iconshujufenxi
  • 轨迹,线路,路径
    .iconorbit
  • 31停车位
    .icontingchewei
  • 工牌
    .icongongpai
  • 数据
    .iconicon_huabanfuben
  • 车辆管理
    .iconcheliangguanli
  • 车辆 (1)
    .icona-cheliang1
  • 车辆 (4)
    .icona-cheliang4
  • 车辆 (3)
    .icona-cheliang3
  • 车辆 (1)
    .icona-cheliang11
  • 扫码
    .iconsaoma
  • 周边
    .iconzhoubian1
  • 添加好友
    .icontianjiahaoyou
  • 位置共享 目的地
    .iconweizhigongxiangmudedi
  • 咨询
    .iconzixun2
  • 消息
    .iconxiaoxi2
  • 分 享
    .iconfenxiang2
  • 语言切换
    .iconyuyanqiehuan
  • 定位
    .iconicon-test2
  • 停车场
    .icontingchechang
  • 退格
    .icontuige
  • 浏览
    .iconliulan
  • 点击
    .icondianji1
  • 太阳
    .icontaiyang
  • 笑脸
    .iconxiaolian1
  • 哭脸
    .iconkulian
  • 时钟
    .iconshizhong
  • 咨询
    .iconzixun1
  • 文件-方案
    .iconwj-fa
  • 节点
    .iconjiedian
  • .iconche
  • 对话框1
    .iconduihuakuang1
  • 左后方转弯
    .iconic_turn_left_back
  • 直行
    .iconzhihang
  • 左前方
    .iconzuoqianfang
  • 电梯
    .icondianti1
  • 扶梯
    .iconfuti
  • 楼梯
    .iconlouti
  • 左转向
    .iconzuozhuanxiang
  • 电话
    .icondianhua
  • 部门
    .iconbumen
  • 个人
    .icongeren
  • 法人代表
    .iconfarendaibiao
  • 向上
    .iconxiangshang
  • 24gl-move
    .icon24gl-move
  • 箭头_向上
    .iconjiantou_xiangshang
  • 向上4
    .iconxiangshang4
  • 操作-退格
    .iconcaozuo-tuige
  • 箭头3-右_fill
    .iconarrow3-right_fill
  • 左转
    .iconzuozhuan
  • 学院
    .iconxueyuan1
  • 报文信息查询
    .iconbaowenxinxichaxun
  • 资讯
    .iconzixun
  • scan
    .iconscan
  • 办事大厅
    .iconbanshidating
  • 在展藏品
    .iconzaizhancangpin
  • 二维码
    .iconerweima
  • 标题
    .iconbiaoti
  • 广告
    .iconguanggao
  • 刷新
    .iconshuaxin
  • 警告
    .iconjinggao
  • 单选-已选
    .icondanxuan-yixuan
  • 单选
    .icondanxuan
  • 支付宝
    .iconzhifubao
  • 微信
    .iconweixin
  • 已处理
    .iconyichuli
  • 已关闭
    .iconyiguanbi
  • 已支付
    .iconyizhifu
  • 未支付
    .iconweizhifu
  • 已开通
    .iconyikaitong
  • 待回复
    .icondaihuifu
  • 已完成
    .iconyiwancheng
  • 垃圾桶
    .iconlajitong
  • 成功
    .iconchenggong
  • 24gl-fileText
    .icon24gl-fileText
  • 成功
    .iconchenggong1
  • 荣誉
    .iconrongyu
  • 24gl-tags3
    .icontags3
  • 暂无图片
    .iconzanwutupian
  • 打卡
    .icondaka
  • 一键生成
    .iconiconfontyijiantuiguang
  • 已生成
    .iconyishengcheng
  • 服务_o
    .iconfuwu_o
  • 问题
    .iconwenti
  • 三足鼎
    .iconpot
  • 列表
    .iconliebiao
  • 影院
    .iconyingyuan
  • 体育场馆使用申请
    .icontiyuchangguanshiyongshenqing
  • 地图
    .iconditu11
  • 语音
    .iconyuyin1
  • 语音2
    .iconyuyin11
  • 24gl-volumeDisable
    .iconvolumeDisable
  • 24gl-volumeMiddle
    .iconvolumeMiddle
  • 24gf-play
    .iconplay1
  • .iconjia
  • 微信
    .iconai-weixin
  • 24gf-envelope2
    .iconenvelope2
  • 更多
    .icongengduo1
  • 分享
    .iconfenxiang1
  • 蓝牙
    .iconlanya
  • 休息一下
    .iconxiuxiyixia
  • 下箭头
    .iconxiajiantou
  • 置顶
    .iconzhiding
  • 3D模型@3x
    .iconDmoxingx
  • 全屏
    .iconquanping1
  • 退出全屏
    .icontuichuquanping
  • AR导航
    .iconARdaohang
  • 指示牌
    .iconzhishipai
  • 项目
    .iconxiangmu
  • 收藏
    .iconshoucang
  • 设备设施
    .iconshebeisheshi
  • 留言
    .iconliuyan
  • 订单
    .icondingdan
  • 周边
    .iconzhoubian
  • 企业
    .iconqiye
  • 复制
    .iconfuzhi
  • 基本icon_寻车
    .iconjibenicon_xunche
  • 已收藏
    .iconyishoucang
  • 定位小
    .icondingweixiao
  • 地图
    .iconditu1
  • 步行
    .iconbuhang
  • 导航-选中
    .icondaohang-xuanzhong
  • 导航
    .icondaohang11
  • 门窗 门窗五金安装
    .iconmenchuangmenchuangwujinanzhuang
  • 定位-定位
    .icondingwei-dingwei
  • 开门
    .iconkaimen2-05-05
  • .iconcuo
  • 收起
    .iconshouqi
  • .iconcha1
  • 建筑物
    .iconjianzhuwu
  • 6起点
    .iconqidian
  • 9终点
    .iconzhongdian
  • 导航
    .iconicon-test1
  • 箭头_切换向上
    .iconjiantou_qiehuanxiangshang
  • 楼层
    .iconjiayantubiao-12
  • 我的文章
    .iconwodewenzhang
  • 凸形
    .icontuxing
  • 寻车中
    .iconxunchezhong
  • 楼梯(上)
    .iconshanglou
  • 洗手间
    .iconxishoujian
  • 扶梯
    .iconnoun_Escalator_1918330
  • 电梯
    .iconnoun_Elevator_1683038
  • 双指拖动
    .icon13423425300
  • 电梯
    .icondianti
  • 转换
    .iconzhuanhuan
  • 方向路线资料
    .iconfangxiangluxianziliao
  • 灭火器
    .iconmiehuoqi
  • 全景
    .iconquanjing2
  • 全景
    .iconquanjing1
  • 全景数
    .iconquanjingshu
  • 全景照片-面
    .iconquanjingzhaopianmian
  • 全景图
    .iconquanjingtu
  • Ruler
    .iconRuler
  • 地图尺子,测量,测距,距离
    .iconmap-ruler
  • 节点统计
    .iconjiediantongji
  • .iconmen
  • 横拉
    .iconhengla
  • 点击
    .icondianji
  • 缩放
    .iconsuofang
  • 鼠标点击
    .iconshubiaodianji
  • 鼠标移动
    .iconshubiaoyidong
  • 鼠标中间
    .iconshubiaozhongjian
  • 键盘
    .iconjianpan
  • 分支
    .iconbranch
  • 推荐路线
    .icontuijianluxian
  • 跳转分支
    .icontiaozhuanfenzhi
  • 步行人
    .iconbuhangren
  • 室内行走模式
    .iconshineihangzoumoshi
  • 空间_输入
    .iconkongjian_shuru
  • 服务工作空间
    .iconfuwugongzuokongjian
  • 3D渲染文件
    .icon3Dxuanranwenjian
  • 小屏
    .iconxiaoping
  • plus
    .iconplus
  • scenes
    .iconi-scenes
  • VR-互动
    .iconvr-m
  • cube
    .iconcube1
  • 静音
    .iconjingyin1
  • scene-select
    .iconscene-select
  • play
    .iconplay
  • 导航
    .icondaohang
  • text
    .icontext
  • see user o
    .iconseeusero
  • 地图
    .iconditu
  • 办会家_3d签到
    .iconcube
  • 停止
    .icontingzhi
  • image
    .iconimage
  • 电话
    .icondianhua-s
  • 喇叭
    .iconlaba
  • down
    .icondown-double
  • 点击选多边形
    .iconicon-dianjiduobianxing
  • 素材库
    .iconsucaiku
  • music
    .iconmusic
  • vr
    .iconvr
  • Collection normal
    .iconxinchangtai
  • 效果总览
    .iconxiaoguozonglan
  • 隐藏键盘
    .iconhidekeyboard
  • 视频
    .iconshipin
  • 陀螺仪
    .icontuoluoyi
  • 场景打开
    .iconchangjingdakai
  • 场景默认
    .iconchangjingmoren
  • AR
    .iconAR
  • 星星
    .iconxingxing
  • 热点
    .iconredian
  • component
    .iconcomponent-outline
  • 402导航
    .icondaohang1
  • 星星
    .iconxingxing1
  • 笑脸
    .iconxiaolian
  • .iconzan
  • heart
    .iconheart
  • user
    .iconuser
  • hot
    .iconhot
  • return
    .iconreturn
  • sun
    .iconsun2
  • 不显示
    .iconbuxianshi
  • 开关
    .iconkaiguan
  • 撤销
    .iconrevoke
  • close
    .iconclose-outline
  • 雪花
    .iconsnowflakessnowf
  • edit
    .iconedit
  • menu
    .iconmenu2
  • 全景
    .iconquanjing
  • 720°全景
    .iconicon-test
  • 视角
    .iconshijiao
  • 大雨
    .icond-
  • 订单管理
    .icondingdanguanli
  • 订单
    .iconfl-dingdan
  • right
    .iconproicon-
  • 麦克风-静音
    .iconmaikefeng-jingyin-tianchongsvg
  • 删 除
    .iconclose
  • sun
    .iconsun1
  • 确认密码
    .iconquerenmima
  • Url
    .iconUrl
  • 爱心+
    .iconaixin1
  • left
    .iconnext-copy
  • 006主页
    .iconzhuye
  • 切片导航
    .iconqiepiandaohang
  • 扇形图
    .iconmian-shanxingtu
  • 19.导航地图-01
    .icondaohangditu-
  • 模板管理
    .iconmobanguanli
  • 卡卷
    .iconqiajuan
  • 卡卷
    .iconqiajuan1
  • 禁止
    .iconjinzhi
  • sun
    .iconsun11
  • left
    .iconprev-copy
  • down
    .iconup-double
  • 消息
    .iconxiaoxi
  • 消息
    .iconxiaoxi1
  • 视频
    .iconshipin1
  • 3d
    .icond
  • share
    .iconshare
  • round_check
    .iconroundcheck
  • 上传
    .iconshangchuan
  • 分享
    .iconfenxiang
  • share
    .iconshare1
  • 3.1-旋转
    .icon31xuanzhuan
  • help
    .iconhelp
  • left
    .iconprev
  • more
    .iconmore
  • message
    .iconmessage
  • search
    .iconsearch
  • 导航-购物车
    .icondaohanggouwuche
  • video
    .iconvideo1
  • trangle-mini-right
    .icontrangleminiright
  • trangle-mini-up
    .icontrangleminiup
  • trangle-mini-down
    .icontrangleminidown
  • trangle-mini-left
    .icontrangleminileft
  • sign-eyeoff
    .iconsigneyeoff
  • sign-eyeon
    .iconsigneyeon
  • 评 论
    .iconpinglun
  • 视频2
    .iconshipin2
  • settings
    .iconsettings
  • 小雨
    .iconiconset0463
  • Full screen
    .iconfullscreen
  • phone
    .iconphone
  • 弹幕
    .icondanmu
  • 语音
    .iconyuyin
  • 太阳
    .iconhalf-taiyang
  • star
    .iconstar
  • 红包
    .iconhongbao1
  • message
    .iconmessage1
  • 删除
    .icontrash
  • lock-o
    .icon46
  • wechat
    .iconwechat
  • pause
    .iconpause
  • arrows_squares
    .iconsquares
  • close-fill
    .iconclosefill
  • menu
    .iconmenu
  • 喇叭001_hover
    .iconlaba001hover
  • 清屏
    .iconjinyan
  • message
    .iconmessage2
  • 音乐
    .iconyinle
  • 模型-线
    .iconmoxing-xian

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

  • 访客
    #iconfangke
  • 访问
    #iconfangke1
  • 主页
    #iconzhuye1
  • 起点
    #iconqidian1
  • 任务管理
    #iconrenwuguanli
  • 多语言
    #iconduoyuyan
  • 账号
    #iconzhanghao
  • icon-exit
    #iconicon-exit
  • 时钟-fill
    #iconshizhongfill
  • 轨道交通
    #iconguidaojiaotong
  • 问答
    #iconwenda
  • 电话
    #icondianhua1
  • 客服
    #iconkefu
  • 洗手间
    #iconxishoujian1
  • 导航
    #icondaohang3
  • 餐饮
    #iconcanyin
  • 展开
    #iconzhankai
  • 返回
    #iconfanhui
  • 首页
    #iconshouye
  • 文化馆
    #iconwenhuaguan
  • 阅湖台
    #iconyuehutai
  • 出入口
    #iconchurukou
  • 停车场
    #icontingchechang1
  • 露营地
    #iconlouyingdi
  • 关闭
    #iconguanbi
  • 定位
    #icondingwei
  • 摄像头
    #iconshexiangtou
  • 摄像头
    #iconshexiangtou1
  • vip
    #iconvip
  • 缩小
    #iconsuoxiao
  • 放大
    #iconfangda
  • 隐藏
    #iconyincang
  • 语音切换
    #iconyuyinqiehuan
  • 暂停
    #iconzanting
  • 下一集
    #iconxiayiji
  • 建筑建材
    #iconjianzhujiancai
  • 33、全选
    #iconquanxuan
  • daohang
    #icondaohang2
  • 自动讲解
    #iconzidongjiangjie1
  • 周边
    #iconzhoubian2
  • 足迹
    #iconzuji
  • 巡逻
    #iconxunluo
  • icon-xianlu
    #iconxunluojilu
  • 巡逻任务
    #iconxunluorenwu
  • 唱片
    #iconchangpian
  • 点赞_块
    #icondianzan_kuai
  • 分类
    #iconfenlei
  • 点亮点位
    #icondianliangdianwei
  • 距离
    #iconjuli
  • 添加
    #icontianjia
  • 表情
    #iconbiaoqing
  • 意见反馈
    #iconyijianfankui
  • 我的足迹
    #iconwodezuji
  • 分享
    #iconfenxiang3
  • 去这里
    #iconquzheli
  • 打卡
    #icondaka1
  • AR导航
    #iconARdaohang1
  • 退出
    #icontuichu
  • 已收藏
    #iconyishoucang1
  • 添加图片
    #icontianjiatupian
  • 收藏
    #iconshoucang1
  • 简介
    #iconjianjie
  • 下拉
    #iconxiala
  • 关怀
    #iconguanhuai
  • 自动讲解
    #iconzidongjiangjie
  • 暂停播放
    #iconzantingbofang
  • 播放
    #iconbofang
  • 开始导航
    #iconkaishidaohang
  • 搜索
    #iconsousuo
  • 筛选
    #iconshaixuan
  • 相机1
    #iconxiangji1
  • 路线
    #iconziyuan
  • 右箭头圆圈
    #iconyoujiantouyuanquan
  • 减号
    #iconjianhao
  • 更多
    #icongengduo2
  • 我的题库
    #iconwodetiku
  • KHCFDC_问卷
    #iconwenjuan
  • 图片
    #icontupian
  • 录制管理
    #iconluzhiguanli
  • VR
    #iconVR
  • 地图
    #iconditu2
  • 指南针
    #iconzhinanzhen
  • #iconche1
  • 面性图标747
    #iconmianxingtubiao747
  • 我的
    #iconwode
  • 出入库记录
    #iconchurukujilu
  • icon_车辆出入管理
    #iconicon_cheliangchuruguanli
  • icon_车辆出入管理
    #iconicon_cheliangchuruguanli1
  • 刷新
    #iconshuaxin1
  • 图标-电池框
    #icontubiao-dianchikuang
  • 向下
    #iconxiangxia
  • 折叠2
    #iconzhedie2
  • 折叠1
    #iconzhedie1
  • 数据分析
    #iconshujufenxi
  • 轨迹,线路,路径
    #iconorbit
  • 31停车位
    #icontingchewei
  • 工牌
    #icongongpai
  • 数据
    #iconicon_huabanfuben
  • 车辆管理
    #iconcheliangguanli
  • 车辆 (1)
    #icona-cheliang1
  • 车辆 (4)
    #icona-cheliang4
  • 车辆 (3)
    #icona-cheliang3
  • 车辆 (1)
    #icona-cheliang11
  • 扫码
    #iconsaoma
  • 周边
    #iconzhoubian1
  • 添加好友
    #icontianjiahaoyou
  • 位置共享 目的地
    #iconweizhigongxiangmudedi
  • 咨询
    #iconzixun2
  • 消息
    #iconxiaoxi2
  • 分 享
    #iconfenxiang2
  • 语言切换
    #iconyuyanqiehuan
  • 定位
    #iconicon-test2
  • 停车场
    #icontingchechang
  • 退格
    #icontuige
  • 浏览
    #iconliulan
  • 点击
    #icondianji1
  • 太阳
    #icontaiyang
  • 笑脸
    #iconxiaolian1
  • 哭脸
    #iconkulian
  • 时钟
    #iconshizhong
  • 咨询
    #iconzixun1
  • 文件-方案
    #iconwj-fa
  • 节点
    #iconjiedian
  • #iconche
  • 对话框1
    #iconduihuakuang1
  • 左后方转弯
    #iconic_turn_left_back
  • 直行
    #iconzhihang
  • 左前方
    #iconzuoqianfang
  • 电梯
    #icondianti1
  • 扶梯
    #iconfuti
  • 楼梯
    #iconlouti
  • 左转向
    #iconzuozhuanxiang
  • 电话
    #icondianhua
  • 部门
    #iconbumen
  • 个人
    #icongeren
  • 法人代表
    #iconfarendaibiao
  • 向上
    #iconxiangshang
  • 24gl-move
    #icon24gl-move
  • 箭头_向上
    #iconjiantou_xiangshang
  • 向上4
    #iconxiangshang4
  • 操作-退格
    #iconcaozuo-tuige
  • 箭头3-右_fill
    #iconarrow3-right_fill
  • 左转
    #iconzuozhuan
  • 学院
    #iconxueyuan1
  • 报文信息查询
    #iconbaowenxinxichaxun
  • 资讯
    #iconzixun
  • scan
    #iconscan
  • 办事大厅
    #iconbanshidating
  • 在展藏品
    #iconzaizhancangpin
  • 二维码
    #iconerweima
  • 标题
    #iconbiaoti
  • 广告
    #iconguanggao
  • 刷新
    #iconshuaxin
  • 警告
    #iconjinggao
  • 单选-已选
    #icondanxuan-yixuan
  • 单选
    #icondanxuan
  • 支付宝
    #iconzhifubao
  • 微信
    #iconweixin
  • 已处理
    #iconyichuli
  • 已关闭
    #iconyiguanbi
  • 已支付
    #iconyizhifu
  • 未支付
    #iconweizhifu
  • 已开通
    #iconyikaitong
  • 待回复
    #icondaihuifu
  • 已完成
    #iconyiwancheng
  • 垃圾桶
    #iconlajitong
  • 成功
    #iconchenggong
  • 24gl-fileText
    #icon24gl-fileText
  • 成功
    #iconchenggong1
  • 荣誉
    #iconrongyu
  • 24gl-tags3
    #icontags3
  • 暂无图片
    #iconzanwutupian
  • 打卡
    #icondaka
  • 一键生成
    #iconiconfontyijiantuiguang
  • 已生成
    #iconyishengcheng
  • 服务_o
    #iconfuwu_o
  • 问题
    #iconwenti
  • 三足鼎
    #iconpot
  • 列表
    #iconliebiao
  • 影院
    #iconyingyuan
  • 体育场馆使用申请
    #icontiyuchangguanshiyongshenqing
  • 地图
    #iconditu11
  • 语音
    #iconyuyin1
  • 语音2
    #iconyuyin11
  • 24gl-volumeDisable
    #iconvolumeDisable
  • 24gl-volumeMiddle
    #iconvolumeMiddle
  • 24gf-play
    #iconplay1
  • #iconjia
  • 微信
    #iconai-weixin
  • 24gf-envelope2
    #iconenvelope2
  • 更多
    #icongengduo1
  • 分享
    #iconfenxiang1
  • 蓝牙
    #iconlanya
  • 休息一下
    #iconxiuxiyixia
  • 下箭头
    #iconxiajiantou
  • 置顶
    #iconzhiding
  • 3D模型@3x
    #iconDmoxingx
  • 全屏
    #iconquanping1
  • 退出全屏
    #icontuichuquanping
  • AR导航
    #iconARdaohang
  • 指示牌
    #iconzhishipai
  • 项目
    #iconxiangmu
  • 收藏
    #iconshoucang
  • 设备设施
    #iconshebeisheshi
  • 留言
    #iconliuyan
  • 订单
    #icondingdan
  • 周边
    #iconzhoubian
  • 企业
    #iconqiye
  • 复制
    #iconfuzhi
  • 基本icon_寻车
    #iconjibenicon_xunche
  • 已收藏
    #iconyishoucang
  • 定位小
    #icondingweixiao
  • 地图
    #iconditu1
  • 步行
    #iconbuhang
  • 导航-选中
    #icondaohang-xuanzhong
  • 导航
    #icondaohang11
  • 门窗 门窗五金安装
    #iconmenchuangmenchuangwujinanzhuang
  • 定位-定位
    #icondingwei-dingwei
  • 开门
    #iconkaimen2-05-05
  • #iconcuo
  • 收起
    #iconshouqi
  • #iconcha1
  • 建筑物
    #iconjianzhuwu
  • 6起点
    #iconqidian
  • 9终点
    #iconzhongdian
  • 导航
    #iconicon-test1
  • 箭头_切换向上
    #iconjiantou_qiehuanxiangshang
  • 楼层
    #iconjiayantubiao-12
  • 我的文章
    #iconwodewenzhang
  • 凸形
    #icontuxing
  • 寻车中
    #iconxunchezhong
  • 楼梯(上)
    #iconshanglou
  • 洗手间
    #iconxishoujian
  • 扶梯
    #iconnoun_Escalator_1918330
  • 电梯
    #iconnoun_Elevator_1683038
  • 双指拖动
    #icon13423425300
  • 电梯
    #icondianti
  • 转换
    #iconzhuanhuan
  • 方向路线资料
    #iconfangxiangluxianziliao
  • 灭火器
    #iconmiehuoqi
  • 全景
    #iconquanjing2
  • 全景
    #iconquanjing1
  • 全景数
    #iconquanjingshu
  • 全景照片-面
    #iconquanjingzhaopianmian
  • 全景图
    #iconquanjingtu
  • Ruler
    #iconRuler
  • 地图尺子,测量,测距,距离
    #iconmap-ruler
  • 节点统计
    #iconjiediantongji
  • #iconmen
  • 横拉
    #iconhengla
  • 点击
    #icondianji
  • 缩放
    #iconsuofang
  • 鼠标点击
    #iconshubiaodianji
  • 鼠标移动
    #iconshubiaoyidong
  • 鼠标中间
    #iconshubiaozhongjian
  • 键盘
    #iconjianpan
  • 分支
    #iconbranch
  • 推荐路线
    #icontuijianluxian
  • 跳转分支
    #icontiaozhuanfenzhi
  • 步行人
    #iconbuhangren
  • 室内行走模式
    #iconshineihangzoumoshi
  • 空间_输入
    #iconkongjian_shuru
  • 服务工作空间
    #iconfuwugongzuokongjian
  • 3D渲染文件
    #icon3Dxuanranwenjian
  • 小屏
    #iconxiaoping
  • plus
    #iconplus
  • scenes
    #iconi-scenes
  • VR-互动
    #iconvr-m
  • cube
    #iconcube1
  • 静音
    #iconjingyin1
  • scene-select
    #iconscene-select
  • play
    #iconplay
  • 导航
    #icondaohang
  • text
    #icontext
  • see user o
    #iconseeusero
  • 地图
    #iconditu
  • 办会家_3d签到
    #iconcube
  • 停止
    #icontingzhi
  • image
    #iconimage
  • 电话
    #icondianhua-s
  • 喇叭
    #iconlaba
  • down
    #icondown-double
  • 点击选多边形
    #iconicon-dianjiduobianxing
  • 素材库
    #iconsucaiku
  • music
    #iconmusic
  • vr
    #iconvr
  • Collection normal
    #iconxinchangtai
  • 效果总览
    #iconxiaoguozonglan
  • 隐藏键盘
    #iconhidekeyboard
  • 视频
    #iconshipin
  • 陀螺仪
    #icontuoluoyi
  • 场景打开
    #iconchangjingdakai
  • 场景默认
    #iconchangjingmoren
  • AR
    #iconAR
  • 星星
    #iconxingxing
  • 热点
    #iconredian
  • component
    #iconcomponent-outline
  • 402导航
    #icondaohang1
  • 星星
    #iconxingxing1
  • 笑脸
    #iconxiaolian
  • #iconzan
  • heart
    #iconheart
  • user
    #iconuser
  • hot
    #iconhot
  • return
    #iconreturn
  • sun
    #iconsun2
  • 不显示
    #iconbuxianshi
  • 开关
    #iconkaiguan
  • 撤销
    #iconrevoke
  • close
    #iconclose-outline
  • 雪花
    #iconsnowflakessnowf
  • edit
    #iconedit
  • menu
    #iconmenu2
  • 全景
    #iconquanjing
  • 720°全景
    #iconicon-test
  • 视角
    #iconshijiao
  • 大雨
    #icond-
  • 订单管理
    #icondingdanguanli
  • 订单
    #iconfl-dingdan
  • right
    #iconproicon-
  • 麦克风-静音
    #iconmaikefeng-jingyin-tianchongsvg
  • 删 除
    #iconclose
  • sun
    #iconsun1
  • 确认密码
    #iconquerenmima
  • Url
    #iconUrl
  • 爱心+
    #iconaixin1
  • left
    #iconnext-copy
  • 006主页
    #iconzhuye
  • 切片导航
    #iconqiepiandaohang
  • 扇形图
    #iconmian-shanxingtu
  • 19.导航地图-01
    #icondaohangditu-
  • 模板管理
    #iconmobanguanli
  • 卡卷
    #iconqiajuan
  • 卡卷
    #iconqiajuan1
  • 禁止
    #iconjinzhi
  • sun
    #iconsun11
  • left
    #iconprev-copy
  • down
    #iconup-double
  • 消息
    #iconxiaoxi
  • 消息
    #iconxiaoxi1
  • 视频
    #iconshipin1
  • 3d
    #icond
  • share
    #iconshare
  • round_check
    #iconroundcheck
  • 上传
    #iconshangchuan
  • 分享
    #iconfenxiang
  • share
    #iconshare1
  • 3.1-旋转
    #icon31xuanzhuan
  • help
    #iconhelp
  • left
    #iconprev
  • more
    #iconmore
  • message
    #iconmessage
  • search
    #iconsearch
  • 导航-购物车
    #icondaohanggouwuche
  • video
    #iconvideo1
  • trangle-mini-right
    #icontrangleminiright
  • trangle-mini-up
    #icontrangleminiup
  • trangle-mini-down
    #icontrangleminidown
  • trangle-mini-left
    #icontrangleminileft
  • sign-eyeoff
    #iconsigneyeoff
  • sign-eyeon
    #iconsigneyeon
  • 评 论
    #iconpinglun
  • 视频2
    #iconshipin2
  • settings
    #iconsettings
  • 小雨
    #iconiconset0463
  • Full screen
    #iconfullscreen
  • phone
    #iconphone
  • 弹幕
    #icondanmu
  • 语音
    #iconyuyin
  • 太阳
    #iconhalf-taiyang
  • star
    #iconstar
  • 红包
    #iconhongbao1
  • message
    #iconmessage1
  • 删除
    #icontrash
  • lock-o
    #icon46
  • wechat
    #iconwechat
  • pause
    #iconpause
  • arrows_squares
    #iconsquares
  • close-fill
    #iconclosefill
  • menu
    #iconmenu
  • 喇叭001_hover
    #iconlaba001hover
  • 清屏
    #iconjinyan
  • message
    #iconmessage2
  • 音乐
    #iconyinle
  • 模型-线
    #iconmoxing-xian

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>