• uploading_e57
    
  • person_e
    
  • menu_format
    
  • icon_share
    
  • menu_copy
    
  • swsd-v
    
  • swsd
    
  • menu_update
    
  • top
    
  • logo
    
  • more
    
  • shop_car
    
  • scene_c
    
  • international
    
  • next
    
  • back
    
  • logo-4dage-en
    
  • logo-4dage-cn
    
  • share
    
  • unbind
    
  • show
    
  • file
    
  • folder
    
  • icon-kfckfc
    
  • Facebook
    
  • play
    
  • ar
    
  • cloud
    
  • sdk
    
  • siwei
    
  • link
    
  • QQ
    
  • weixin
    
  • weibo
    
  • new_folder
    
  • new_camera
    
  • menu_cooperation
    
  • phone
    
  • mail
    
  • del
    
  • mall
    
  • look_flatten
    
  • look_list
    
  • look_date
    
  • look_position
    
  • look_like
    
  • look_share
    
  • look_watch
    
  • look_people
    
  • download
    
  • list_delete
    
  • vip_wrong
    
  • vip_right
    
  • menu_rename
    
  • menu_panorama
    
  • menu_move
    
  • view_screen
    
  • data_time
    
  • folder_bg
    
  • arrow
    
  • arrow
    
  • folder
    
  • address
    
  • cam_cloud
    
  • list_menu
    
  • choose
    
  • mail
    
  • nav_order
    
  • preview
    
  • nav_cam
    
  • phone
    
  • nav_scene
    
  • plus
    
  • nav_my
    
  • nav_data
    
  • search
    
  • reduce
    
  • share_link
    
  • register_help
    
  • register_agreement
    
  • share_qq
    
  • share_wx
    
  • share_wb
    
  • view_list
    
  • main_list
    
  • main_grid
    
  • 横标EN
    
  • 确认
    
  • 警示
    
  • 密码不可见
    
  • 密码可见
    
  • 回顶页尖嘴
    
  • logo
    
  • 新购物车
    
  • 对号
    
  • 叹号
    
  • 购物车
    
  • 首页公仔
    
  • case_teamwork
    
  • case_hot
    
  • case_recommend
    
  • case_new
    
  • 视频教学
    
  • ctmservice
    
  • 6month
    
  • 3month
    
  • year
    
  • month
    
  • vas
    
  • home
    
  • edit
    
  • choice
    
  • cloud
    
  • 全部
    
  • _eye
    
  • forbid
    
  • close
    
  • 发展机会
    
  • 店面布置
    
  • 宣传资料
    
  • 专属客服
    
  • 利润分成
    
  • 经销商
    
  • 保修条款
    
  • 箭头
    
  • vip_false
    
  • vip_true
    
  • 减号
    
  • 加号
    
  • 
  • shoppingcart
    
  • liulan
    
  • bianji
    
  • dianlang
    
  • 3d
    
  • sfm
    
  • qiumu
    
  • haisi
    
  • sony
    
  • kaiguan1
    
  • kaiguan
    
  • 使用手册
    
  • shang
    
  • xia
    
  • yuandian
    
  • 8-sanwei
    
  • 1
    
  • 2
    
  • 3
    
  • 4
    
  • 5
    
  • lianxi
    
  • kehu
    
  • meiti
    
  • yewu
    
  • 8-xuanzhe
    
  • 8-xuanzhe
    
  • zuo
    
  • you
    
  • 8-renren
    
  • 8-AI
    
  • 空间定位
    
  • 空间建模
    
  • 空间展示
    
  • 使用教程
    
  • 服务条款
    
  • 维修服务
    
  • app下载
    
  • 常见问题
    
  • 行业-房地产
    
  • 行业-博物馆
    
  • 行业-工业
    
  • 行业-电商
    
  • 行业-餐饮
    
  • 行业-app
    
  • 六目相机
    
  • 二目相机
    
  • 相机配件
    
  • 关闭
    
  • 关闭
    
  • 4dkk
    
  • 4dkk
    
  • 抖音
    
  • chat
    
  • geren
    
  • 新浪
    
  • facebook
    
  • 提升
    
  • 苹果
    
  • 左箭头
    
  • 微信
    
  • ins
    
  • 搜索
    
  • 安卓
    
  • 

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • uploading_e57
    .icon-uploading_e57
  • person_e
    .icon-person_e
  • menu_format
    .icon-menu_format
  • icon_share
    .icon-icon_share
  • menu_copy
    .icon-menu_copy
  • swsd-v
    .icon-swsd-v
  • swsd
    .icon-swsd
  • menu_update
    .icon-menu_update
  • top
    .icon-top
  • logo
    .icon-logo1
  • more
    .icon-more
  • shop_car
    .icon-shop_car
  • scene_c
    .icon-scene_c
  • international
    .icon-international
  • next
    .icon-next
  • back
    .icon-back
  • logo-4dage-en
    .icon-logo-4dage-en
  • logo-4dage-cn
    .icon-logo-4dage-cn
  • share
    .icon-share
  • unbind
    .icon-unbind
  • show
    .icon-show
  • file
    .icon-file
  • folder
    .icon-folder1
  • icon-kfckfc
    .icon-Twitter
  • Facebook
    .icon-Facebook
  • play
    .icon-play
  • ar
    .icon-ar
  • cloud
    .icon-cloud1
  • sdk
    .icon-sdk
  • siwei
    .icon-siwei
  • link
    .icon-link
  • QQ
    .icon-QQ
  • weixin
    .icon-weixin1
  • weibo
    .icon-weibo
  • new_folder
    .icon-new_folder
  • new_camera
    .icon-new_camera
  • menu_cooperation
    .icon-menu_cooperation1
  • phone
    .icon-phone1
  • mail
    .icon-mail1
  • del
    .icon-del
  • mall
    .icon-mall
  • look_flatten
    .icon-look_flatten
  • look_list
    .icon-look_list
  • look_date
    .icon-look_date
  • look_position
    .icon-look_position
  • look_like
    .icon-look_like
  • look_share
    .icon-look_share
  • look_watch
    .icon-look_watch
  • look_people
    .icon-look_people
  • download
    .icon-download
  • list_delete
    .icon-list_delete
  • vip_wrong
    .icon-vip_wrong
  • vip_right
    .icon-vip_right
  • menu_rename
    .icon-menu_rename
  • menu_panorama
    .icon-menu_panorama
  • menu_move
    .icon-menu_move
  • view_screen
    .icon-view_screen
  • data_time
    .icon-data_time
  • folder_bg
    .icon-folder_bg
  • arrow
    .icon-arrow-copy
  • arrow
    .icon-arrow
  • folder
    .icon-folder
  • address
    .icon-address
  • cam_cloud
    .icon-cam_cloud
  • list_menu
    .icon-list_menu
  • choose
    .icon-choose
  • mail
    .icon-mail
  • nav_order
    .icon-nav_order
  • preview
    .icon-preview
  • nav_cam
    .icon-nav_cam
  • phone
    .icon-phone
  • nav_scene
    .icon-nav_scene
  • plus
    .icon-plus
  • nav_my
    .icon-nav_my
  • nav_data
    .icon-nav_data
  • search
    .icon-search
  • reduce
    .icon-reduce
  • share_link
    .icon-share_link
  • register_help
    .icon-register_help
  • register_agreement
    .icon-register_agreement
  • share_qq
    .icon-share_qq
  • share_wx
    .icon-share_wx
  • share_wb
    .icon-share_wb
  • view_list
    .icon-view_list
  • main_list
    .icon-main_list
  • main_grid
    .icon-main_grid
  • 横标EN
    .icon-hengbiaoEN
  • 确认
    .icon-queren
  • 警示
    .icon-jingshi
  • 密码不可见
    .icon-mimabukejian
  • 密码可见
    .icon-mimakejian
  • 回顶页尖嘴
    .icon-huidingyejianzui
  • logo
    .icon-logo
  • 新购物车
    .icon-xingouwuche
  • 对号
    .icon-duihao
  • 叹号
    .icon-tanhao
  • 购物车
    .icon-gouwuche
  • 首页公仔
    .icon-shouyegongzi
  • case_teamwork
    .icon-case_teamwork
  • case_hot
    .icon-case_hot
  • case_recommend
    .icon-case_recommend
  • case_new
    .icon-case_new
  • 视频教学
    .icon-teaching
  • ctmservice
    .icon-ctmservice
  • 6month
    .icon-month2
  • 3month
    .icon-month1
  • year
    .icon-year
  • month
    .icon-month
  • vas
    .icon-vas
  • home
    .icon-home
  • edit
    .icon-edit
  • choice
    .icon-choice
  • cloud
    .icon-cloud
  • 全部
    .icon-all
  • _eye
    .icon-eye
  • forbid
    .icon-forbid
  • close
    .icon-close
  • 发展机会
    .icon-fazhanjihui
  • 店面布置
    .icon-dianmianbuzhi
  • 宣传资料
    .icon-xuanchuanziliao
  • 专属客服
    .icon-zhuanshukefu
  • 利润分成
    .icon-lirunfencheng
  • 经销商
    .icon-jingxiaoshang
  • 保修条款
    .icon-baoxiutiaokuan
  • 箭头
    .icon-jiantou
  • vip_false
    .icon-vip_false
  • vip_true
    .icon-vip_true
  • 减号
    .icon-jianhao
  • 加号
    .icon-jiahao
  • .icon-and
  • shoppingcart
    .icon-cart
  • liulan
    .icon-liulan
  • bianji
    .icon-bianji
  • dianlang
    .icon-dianlang
  • 3d
    .icon-3d
  • sfm
    .icon-sfm
  • qiumu
    .icon-qiumu
  • haisi
    .icon-haisi
  • sony
    .icon-sony
  • kaiguan1
    .icon-kaiguan1
  • kaiguan
    .icon-kaiguan
  • 使用手册
    .icon-ser_manual
  • shang
    .icon-shang
  • xia
    .icon-xia
  • yuandian
    .icon-yuandian
  • 8-sanwei
    .icon--sanwei
  • 1
    .icon-icon-test
  • 2
    .icon-icon-test1
  • 3
    .icon-icon-test2
  • 4
    .icon-icon-test3
  • 5
    .icon-icon-test4
  • lianxi
    .icon-lianxi
  • kehu
    .icon-kehu
  • meiti
    .icon-meiti
  • yewu
    .icon-yewu
  • 8-xuanzhe
    .icon--xuanzhe-copy
  • 8-xuanzhe
    .icon--xuanzhe-copy-copy
  • zuo
    .icon-zuo
  • you
    .icon-you
  • 8-renren
    .icon--renren
  • 8-AI
    .icon--AI
  • 空间定位
    .icon-tech_space_location
  • 空间建模
    .icon-tech_space_modeling
  • 空间展示
    .icon-tech_space_display
  • 使用教程
    .icon-tutorial
  • 服务条款
    .icon-protocol
  • 维修服务
    .icon-service
  • app下载
    .icon-appdown
  • 常见问题
    .icon-faq
  • 行业-房地产
    .icon-industry_realty
  • 行业-博物馆
    .icon-industry_museum
  • 行业-工业
    .icon-industry_industry
  • 行业-电商
    .icon-industry_ecom
  • 行业-餐饮
    .icon-industry_catering
  • 行业-app
    .icon-industry_app
  • 六目相机
    .icon-icon_cam_pro
  • 二目相机
    .icon-icon_cam_lite
  • 相机配件
    .icon-icon_cam_fitting
  • 关闭
    .icon-cuowu
  • 关闭
    .icon-guanbi
  • 4dkk
    .icon-logo_a
  • 4dkk
    .icon-logo_b
  • 抖音
    .icon-douyin
  • chat
    .icon-chat
  • geren
    .icon-geren
  • 新浪
    .icon-xinlang
  • facebook
    .icon-facebook
  • 提升
    .icon-tisheng
  • 苹果
    .icon-pingguo
  • 左箭头
    .icon-youjiantou
  • 微信
    .icon-weixin
  • ins
    .icon-ins
  • 搜索
    .icon-sousuo
  • 安卓
    .icon-anzhuo
  • .icon-dui

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

  • uploading_e57
    #icon-uploading_e57
  • person_e
    #icon-person_e
  • menu_format
    #icon-menu_format
  • icon_share
    #icon-icon_share
  • menu_copy
    #icon-menu_copy
  • swsd-v
    #icon-swsd-v
  • swsd
    #icon-swsd
  • menu_update
    #icon-menu_update
  • top
    #icon-top
  • logo
    #icon-logo1
  • more
    #icon-more
  • shop_car
    #icon-shop_car
  • scene_c
    #icon-scene_c
  • international
    #icon-international
  • next
    #icon-next
  • back
    #icon-back
  • logo-4dage-en
    #icon-logo-4dage-en
  • logo-4dage-cn
    #icon-logo-4dage-cn
  • share
    #icon-share
  • unbind
    #icon-unbind
  • show
    #icon-show
  • file
    #icon-file
  • folder
    #icon-folder1
  • icon-kfckfc
    #icon-Twitter
  • Facebook
    #icon-Facebook
  • play
    #icon-play
  • ar
    #icon-ar
  • cloud
    #icon-cloud1
  • sdk
    #icon-sdk
  • siwei
    #icon-siwei
  • link
    #icon-link
  • QQ
    #icon-QQ
  • weixin
    #icon-weixin1
  • weibo
    #icon-weibo
  • new_folder
    #icon-new_folder
  • new_camera
    #icon-new_camera
  • menu_cooperation
    #icon-menu_cooperation1
  • phone
    #icon-phone1
  • mail
    #icon-mail1
  • del
    #icon-del
  • mall
    #icon-mall
  • look_flatten
    #icon-look_flatten
  • look_list
    #icon-look_list
  • look_date
    #icon-look_date
  • look_position
    #icon-look_position
  • look_like
    #icon-look_like
  • look_share
    #icon-look_share
  • look_watch
    #icon-look_watch
  • look_people
    #icon-look_people
  • download
    #icon-download
  • list_delete
    #icon-list_delete
  • vip_wrong
    #icon-vip_wrong
  • vip_right
    #icon-vip_right
  • menu_rename
    #icon-menu_rename
  • menu_panorama
    #icon-menu_panorama
  • menu_move
    #icon-menu_move
  • view_screen
    #icon-view_screen
  • data_time
    #icon-data_time
  • folder_bg
    #icon-folder_bg
  • arrow
    #icon-arrow-copy
  • arrow
    #icon-arrow
  • folder
    #icon-folder
  • address
    #icon-address
  • cam_cloud
    #icon-cam_cloud
  • list_menu
    #icon-list_menu
  • choose
    #icon-choose
  • mail
    #icon-mail
  • nav_order
    #icon-nav_order
  • preview
    #icon-preview
  • nav_cam
    #icon-nav_cam
  • phone
    #icon-phone
  • nav_scene
    #icon-nav_scene
  • plus
    #icon-plus
  • nav_my
    #icon-nav_my
  • nav_data
    #icon-nav_data
  • search
    #icon-search
  • reduce
    #icon-reduce
  • share_link
    #icon-share_link
  • register_help
    #icon-register_help
  • register_agreement
    #icon-register_agreement
  • share_qq
    #icon-share_qq
  • share_wx
    #icon-share_wx
  • share_wb
    #icon-share_wb
  • view_list
    #icon-view_list
  • main_list
    #icon-main_list
  • main_grid
    #icon-main_grid
  • 横标EN
    #icon-hengbiaoEN
  • 确认
    #icon-queren
  • 警示
    #icon-jingshi
  • 密码不可见
    #icon-mimabukejian
  • 密码可见
    #icon-mimakejian
  • 回顶页尖嘴
    #icon-huidingyejianzui
  • logo
    #icon-logo
  • 新购物车
    #icon-xingouwuche
  • 对号
    #icon-duihao
  • 叹号
    #icon-tanhao
  • 购物车
    #icon-gouwuche
  • 首页公仔
    #icon-shouyegongzi
  • case_teamwork
    #icon-case_teamwork
  • case_hot
    #icon-case_hot
  • case_recommend
    #icon-case_recommend
  • case_new
    #icon-case_new
  • 视频教学
    #icon-teaching
  • ctmservice
    #icon-ctmservice
  • 6month
    #icon-month2
  • 3month
    #icon-month1
  • year
    #icon-year
  • month
    #icon-month
  • vas
    #icon-vas
  • home
    #icon-home
  • edit
    #icon-edit
  • choice
    #icon-choice
  • cloud
    #icon-cloud
  • 全部
    #icon-all
  • _eye
    #icon-eye
  • forbid
    #icon-forbid
  • close
    #icon-close
  • 发展机会
    #icon-fazhanjihui
  • 店面布置
    #icon-dianmianbuzhi
  • 宣传资料
    #icon-xuanchuanziliao
  • 专属客服
    #icon-zhuanshukefu
  • 利润分成
    #icon-lirunfencheng
  • 经销商
    #icon-jingxiaoshang
  • 保修条款
    #icon-baoxiutiaokuan
  • 箭头
    #icon-jiantou
  • vip_false
    #icon-vip_false
  • vip_true
    #icon-vip_true
  • 减号
    #icon-jianhao
  • 加号
    #icon-jiahao
  • #icon-and
  • shoppingcart
    #icon-cart
  • liulan
    #icon-liulan
  • bianji
    #icon-bianji
  • dianlang
    #icon-dianlang
  • 3d
    #icon-3d
  • sfm
    #icon-sfm
  • qiumu
    #icon-qiumu
  • haisi
    #icon-haisi
  • sony
    #icon-sony
  • kaiguan1
    #icon-kaiguan1
  • kaiguan
    #icon-kaiguan
  • 使用手册
    #icon-ser_manual
  • shang
    #icon-shang
  • xia
    #icon-xia
  • yuandian
    #icon-yuandian
  • 8-sanwei
    #icon--sanwei
  • 1
    #icon-icon-test
  • 2
    #icon-icon-test1
  • 3
    #icon-icon-test2
  • 4
    #icon-icon-test3
  • 5
    #icon-icon-test4
  • lianxi
    #icon-lianxi
  • kehu
    #icon-kehu
  • meiti
    #icon-meiti
  • yewu
    #icon-yewu
  • 8-xuanzhe
    #icon--xuanzhe-copy
  • 8-xuanzhe
    #icon--xuanzhe-copy-copy
  • zuo
    #icon-zuo
  • you
    #icon-you
  • 8-renren
    #icon--renren
  • 8-AI
    #icon--AI
  • 空间定位
    #icon-tech_space_location
  • 空间建模
    #icon-tech_space_modeling
  • 空间展示
    #icon-tech_space_display
  • 使用教程
    #icon-tutorial
  • 服务条款
    #icon-protocol
  • 维修服务
    #icon-service
  • app下载
    #icon-appdown
  • 常见问题
    #icon-faq
  • 行业-房地产
    #icon-industry_realty
  • 行业-博物馆
    #icon-industry_museum
  • 行业-工业
    #icon-industry_industry
  • 行业-电商
    #icon-industry_ecom
  • 行业-餐饮
    #icon-industry_catering
  • 行业-app
    #icon-industry_app
  • 六目相机
    #icon-icon_cam_pro
  • 二目相机
    #icon-icon_cam_lite
  • 相机配件
    #icon-icon_cam_fitting
  • 关闭
    #icon-cuowu
  • 关闭
    #icon-guanbi
  • 4dkk
    #icon-logo_a
  • 4dkk
    #icon-logo_b
  • 抖音
    #icon-douyin
  • chat
    #icon-chat
  • geren
    #icon-geren
  • 新浪
    #icon-xinlang
  • facebook
    #icon-facebook
  • 提升
    #icon-tisheng
  • 苹果
    #icon-pingguo
  • 左箭头
    #icon-youjiantou
  • 微信
    #icon-weixin
  • ins
    #icon-ins
  • 搜索
    #icon-sousuo
  • 安卓
    #icon-anzhuo
  • #icon-dui

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>