• 文件
    
  • 数据中台
    
  • 时空中台
    
  • 资源目录线
    
  • 退出登录线
    
  • 地形
    
  • 初始视角
    
  • 个人中心
    
  • 方案模拟
    
  • 查询设置
    
  • 天际线分析
    
  • 分屏比对设置
    
  • 剖面分析
    
  • 建筑密度
    
  • 空间查询统计
    
  • 条件查询
    
  • 数据监测
    
  • 工具设置
    
  • 视图环视
    
  • 顶视图未选中
    
  • 顶视图选中
    
  • 项目列表
    
  • 视频加载失败
    
  • 源数据管理
    
  • 部件库管理
    
  • 配置项管理
    
  • 要素集管理
    
  • 我的工具
    
  • 播放
    
  • 方针模拟2
    
  • 空间面积
    
  • 视图漫游
    
  • 视图快照
    
  • 属性查询
    
  • 全局设置
    
  • 填挖方分析
    
  • 投影面积
    
  • 模型压平
    
  • 透明度
    
  • 基础分析
    
  • 分屏-上下
    
  • 贴地面积
    
  • 模型剖切
    
  • 分屏-左右
    
  • 收藏
    
  • 视频投放
    
  • 统计
    
  • 用地平衡分析
    
  • 绿地率分析
    
  • 控高分析
    
  • 视廊分析
    
  • 规划分析
    
  • 缓冲区分析
    
  • 开挖分析
    
  • 视线分析
    
  • 坡度坡向
    
  • 属性
    
  • 全生命周期
    
  • 标注
    
  • 预警
    
  • 摄像头
    
  • 模拟分析-1
    
  • 测量工具
    
  • 日照模拟2
    
  • BIM工具
    
  • 日照模拟
    
  • 坐标拾取
    
  • 视觉设置
    
  • 场景漫游
    
  • 视点管理
    
  • 分屏比对
    
  • 图层-线
    
  • 设置设置
    
  • 场景特效
    
  • 模拟分析
    
  • 自由漫游
    
  • 暂停
    
  • 场景浏览
    
  • icon-kfckfc
    
  • 场景设置
    
  • 指北针
    
  • 前一视图
    
  • 3D
    
  • 减少
    
  • 后一视图
    
  • 顶视图
    
  • 2D
    
  • 视图操作
    
  • 部件库
    
  • 目录树
    
  • 文件
    
  • 筛选
    
  • 个人中心
    
  • 保存
    
  • 建筑
    
  • 密码
    
  • 消息
    
  • 下载
    
  • 视域分析
    
  • chevron-left
    
  • 项目全生命周期2
    
  • 后页
    
  • 前页
    
  • chevron-right
    
  • 展开
    
  • 更多2
    
  • 收起
    
  • 模型操作
    
  • 更多1
    
  • 箭头-r-1
    
  • 箭头-l-1
    
  • 箭头1-d
    
  • 箭头1-u
    
  • 上传
    
  • 箭头-r
    
  • 放大
    
  • 箭头-l
    
  • 日期
    
  • 缩小
    
  • 快照
    
  • 可视
    
  • 暗色
    
  • 不可视
    
  • 亮度
    
  • 添加
    
  • 排序
    
  • 终端
    
  • 退出
    
  • 时间
    
  • 退出全屏
    
  • 预览
    
  • 设置
    
  • 收藏-1
    
  • 项目全生命周期
    
  • 贴地面积
    
  • 详情
    
  • 分层分户
    
  • Basics_close
    
  • 场景设置
    
  • 场景信息
    
  • 工具配置
    
  • 坡向
    
  • 坡度
    
  • 天气
    
  • 下翻页
    
  • 相机环视
    
  • 上翻页
    
  • 
  • 线
    
  • 
  • 
  • 
  • 
  • 
  • 卷帘
    
  • add
    
  • folder-close-sm
    
  • folder-open-sm
    
  • illuminati
    
  • atmospheric
    
  • 3d
    
  • 2.5d
    
  • measure
    
  • clampLength
    
  • skyline
    
  • viewShed
    
  • sightLine
    
  • heightLimit
    
  • fullscreen
    
  • switchView
    
  • spaceLength
    
  • triangle
    
  • sitting
    
  • azimuth
    
  • angle
    
  • iocn
    
  • gltf
    
  • trackline
    
  • glowline
    
  • arrowline
    
  • radascan
    
  • ripplecircle
    
  • dynamicsurface
    
  • vertebral
    
  • electronWall
    
  • clean
    
  • ality
    
  • defaults
    
  • layers
    
  • document
    
  • scene
    
  • search
    
  • clear
    
  • attachment
    
  • warning-md
    
  • information-md
    
  • success-md
    
  • confirm-md
    
  • information-fill-sm
    
  • warning-fill-sm
    
  • warning-sm
    
  • information-sm
    
  • success-sm
    
  • success-fill-sm
    
  • cancel
    
  • confirm
    
  • new-folder
    
  • rename
    
  • delete
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'cimfont';
  src: url('iconfont.woff2?t=1661494471851') format('woff2'),
       url('iconfont.woff?t=1661494471851') format('woff'),
       url('iconfont.ttf?t=1661494471851') format('truetype'),
       url('iconfont.svg?t=1661494471851#cimfont') format('svg');
}

第二步:定义使用 iconfont 的样式

.cimfont {
  font-family: "cimfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="cimfont">&#x33;</span>

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

  • 文件
    .cim-wenjian1
  • 数据中台
    .cim-shujuzhongtai
  • 时空中台
    .cim-shikongzhongtai
  • 资源目录线
    .cim-ziyuanmuluxian
  • 退出登录线
    .cim-tuichudengluxian
  • 地形
    .cim-dixing
  • 初始视角
    .cim-chushishijiao
  • 个人中心
    .cim-gerenzhongxin1
  • 方案模拟
    .cim-fanganmoni
  • 查询设置
    .cim-chaxunshezhi
  • 天际线分析
    .cim-tianjixianfenxi
  • 分屏比对设置
    .cim-fenpingbiduishezhi
  • 剖面分析
    .cim-poumianfenxi
  • 建筑密度
    .cim-jianzhumidu
  • 空间查询统计
    .cim-kongjianchaxuntongji
  • 条件查询
    .cim-tiaojianchaxun
  • 数据监测
    .cim-shujujiance
  • 工具设置
    .cim-gongjushezhi
  • 视图环视
    .cim-shituhuanshi
  • 顶视图未选中
    .cim-dingshituweixuanzhong
  • 顶视图选中
    .cim-dingshituxuanzhong
  • 项目列表
    .cim-xiangmuliebiao
  • 视频加载失败
    .cim-shipinjiazaishibai
  • 源数据管理
    .cim-yuanshujuguanli
  • 部件库管理
    .cim-bujiankuguanli
  • 配置项管理
    .cim-peizhixiangguanli
  • 要素集管理
    .cim-yaosujiguanli
  • 我的工具
    .cim-wodegongju
  • 播放
    .cim-bofang
  • 方针模拟2
    .cim-fangzhenmoni2
  • 空间面积
    .cim-kongjianmianji
  • 视图漫游
    .cim-shitumanyou
  • 视图快照
    .cim-shitukuaizhao
  • 属性查询
    .cim-shuxingchaxun
  • 全局设置
    .cim-quanjushezhi
  • 填挖方分析
    .cim-tianwafangfenxi
  • 投影面积
    .cim-touyingmianji
  • 模型压平
    .cim-moxingyaping
  • 透明度
    .cim-toumingdu
  • 基础分析
    .cim-jichufenxi
  • 分屏-上下
    .cim-fenping-shangxia
  • 贴地面积
    .cim-tiedimianji1
  • 模型剖切
    .cim-moxingpouqie
  • 分屏-左右
    .cim-fenping-zuoyou
  • 收藏
    .cim-shoucang
  • 视频投放
    .cim-shipintoufang
  • 统计
    .cim-tongji
  • 用地平衡分析
    .cim-yongdipinghengfenxi
  • 绿地率分析
    .cim-lvdishuaifenxi
  • 控高分析
    .cim-konggaofenxi
  • 视廊分析
    .cim-shilangfenxi
  • 规划分析
    .cim-guihuafenxi
  • 缓冲区分析
    .cim-huanchongqufenxi
  • 开挖分析
    .cim-kaiwafenxi
  • 视线分析
    .cim-shixianfenxi
  • 坡度坡向
    .cim-podupoxiang
  • 属性
    .cim-shuxing
  • 全生命周期
    .cim-quanshengmingzhouqi
  • 标注
    .cim-biaozhu
  • 预警
    .cim-yujing
  • 摄像头
    .cim-shexiangtou
  • 模拟分析-1
    .cim-monifenxi-1
  • 测量工具
    .cim-celianggongju
  • 日照模拟2
    .cim-rizhaomoni2
  • BIM工具
    .cim-BIMgongju
  • 日照模拟
    .cim-rizhaomoni
  • 坐标拾取
    .cim-zuobiaoshiqu
  • 视觉设置
    .cim-shijueshezhi
  • 场景漫游
    .cim-changjingmanyou
  • 视点管理
    .cim-shidianguanli
  • 分屏比对
    .cim-fenpingbidui
  • 图层-线
    .cim-tuceng-xian
  • 设置设置
    .cim-shezhishezhi
  • 场景特效
    .cim-changjingtexiao
  • 模拟分析
    .cim-monifenxi
  • 自由漫游
    .cim-ziyoumanyou
  • 暂停
    .cim-zanting
  • 场景浏览
    .cim-changjingliulan
  • icon-kfckfc
    .cim-fuzhugongju
  • 场景设置
    .cim-changjingshezhi1
  • 指北针
    .cim-zhibeizhen
  • 前一视图
    .cim-qianyishitu
  • 3D
    .cim-a-3D
  • 减少
    .cim-jianshao
  • 后一视图
    .cim-houyishitu
  • 顶视图
    .cim-dingshitu
  • 2D
    .cim-a-2D
  • 视图操作
    .cim-shitucaozuo
  • 部件库
    .cim-bujianku
  • 目录树
    .cim-mulushu
  • 文件
    .cim-wenjian
  • 筛选
    .cim-shaixuan
  • 个人中心
    .cim-gerenzhongxin
  • 保存
    .cim-baocun
  • 建筑
    .cim-jianzhu
  • 密码
    .cim-mima
  • 消息
    .cim-xiaoxi
  • 下载
    .cim-xiazai
  • 视域分析
    .cim-shiyufenxi
  • chevron-left
    .cim-chevron-left
  • 项目全生命周期2
    .cim-xiangmuquanshengmingzhouqi2
  • 后页
    .cim-houye
  • 前页
    .cim-qianye
  • chevron-right
    .cim-chevron-right
  • 展开
    .cim-zhankai
  • 更多2
    .cim-gengduo2
  • 收起
    .cim-shouqi
  • 模型操作
    .cim-moxingcaozuo
  • 更多1
    .cim-gengduo1
  • 箭头-r-1
    .cim-jiantou-r-1
  • 箭头-l-1
    .cim-jiantou-l-1
  • 箭头1-d
    .cim-jiantou1-d
  • 箭头1-u
    .cim-jiantou1-u
  • 上传
    .cim-shangchuan
  • 箭头-r
    .cim-jiantou-r
  • 放大
    .cim-fangda
  • 箭头-l
    .cim-jiantou-l
  • 日期
    .cim-riqi
  • 缩小
    .cim-suoxiao
  • 快照
    .cim-kuaizhao
  • 可视
    .cim-keshi
  • 暗色
    .cim-anse
  • 不可视
    .cim-bukeshi
  • 亮度
    .cim-liangdu
  • 添加
    .cim-tianjia
  • 排序
    .cim-paixu
  • 终端
    .cim-zhongduan
  • 退出
    .cim-tuichu
  • 时间
    .cim-shijian
  • 退出全屏
    .cim-tuichuquanping
  • 预览
    .cim-yulan
  • 设置
    .cim-shezhi
  • 收藏-1
    .cim-shoucang-1
  • 项目全生命周期
    .cim-xiangmuquanshengmingzhouqi
  • 贴地面积
    .cim-tiedimianji
  • 详情
    .cim-xiangqing
  • 分层分户
    .cim-fencengfenhu
  • Basics_close
    .cim-close
  • 场景设置
    .cim-changjingshezhi
  • 场景信息
    .cim-changjingxinxi
  • 工具配置
    .cim-gongjupeizhi
  • 坡向
    .cim-poxiang
  • 坡度
    .cim-podu
  • 天气
    .cim-tianqi1
  • 下翻页
    .cim-xiafanye
  • 相机环视
    .cim-xiangjihuanshi
  • 上翻页
    .cim-shangfanye
  • .cim-dian
  • 线
    .cim-xian
  • .cim-mian
  • .cim-xue
  • .cim-yu
  • .cim-wu
  • .cim-yun
  • 卷帘
    .cim-juanlian
  • add
    .cim-add
  • folder-close-sm
    .cim-folder-close-sm
  • folder-open-sm
    .cim-folder-open-sm
  • illuminati
    .cim-illuminati
  • atmospheric
    .cim-atmospheric
  • 3d
    .cim-a-3d
  • 2.5d
    .cim-a-25d
  • measure
    .cim-measure
  • clampLength
    .cim-clampLength
  • skyline
    .cim-skyline
  • viewShed
    .cim-viewShed
  • sightLine
    .cim-sightLine
  • heightLimit
    .cim-heightLimit
  • fullscreen
    .cim-fullscreen
  • switchView
    .cim-switchView
  • spaceLength
    .cim-spaceLength
  • triangle
    .cim-triangle
  • sitting
    .cim-sitting
  • azimuth
    .cim-azimuth
  • angle
    .cim-angulation
  • iocn
    .cim-iocn
  • gltf
    .cim-GLTF
  • trackline
    .cim-trackline
  • glowline
    .cim-glowline
  • arrowline
    .cim-arrowline
  • radascan
    .cim-radascan
  • ripplecircle
    .cim-ripplecircle
  • dynamicsurface
    .cim-dynamicsurface
  • vertebral
    .cim-vertebral
  • electronWall
    .cim-electronwall
  • clean
    .cim-clean
  • ality
    .cim-ality
  • defaults
    .cim-defaults
  • layers
    .cim-layers
  • document
    .cim-document
  • scene
    .cim-scene
  • search
    .cim-search
  • clear
    .cim-clear
  • attachment
    .cim-attachment
  • warning-md
    .cim-warning-md
  • information-md
    .cim-information-md
  • success-md
    .cim-success-md
  • confirm-md
    .cim-confirm-md
  • information-fill-sm
    .cim-information-fill-sm
  • warning-fill-sm
    .cim-warning-fill-sm
  • warning-sm
    .cim-warning-sm
  • information-sm
    .cim-information-sm
  • success-sm
    .cim-success-sm
  • success-fill-sm
    .cim-success-fill-sm
  • cancel
    .cim-cancel
  • confirm
    .cim-confirm
  • new-folder
    .cim-new-folder
  • rename
    .cim-rename
  • delete
    .cim-delete

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="cimfont cim-xxx"></span>

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

  • 文件
    #cim-wenjian1
  • 数据中台
    #cim-shujuzhongtai
  • 时空中台
    #cim-shikongzhongtai
  • 资源目录线
    #cim-ziyuanmuluxian
  • 退出登录线
    #cim-tuichudengluxian
  • 地形
    #cim-dixing
  • 初始视角
    #cim-chushishijiao
  • 个人中心
    #cim-gerenzhongxin1
  • 方案模拟
    #cim-fanganmoni
  • 查询设置
    #cim-chaxunshezhi
  • 天际线分析
    #cim-tianjixianfenxi
  • 分屏比对设置
    #cim-fenpingbiduishezhi
  • 剖面分析
    #cim-poumianfenxi
  • 建筑密度
    #cim-jianzhumidu
  • 空间查询统计
    #cim-kongjianchaxuntongji
  • 条件查询
    #cim-tiaojianchaxun
  • 数据监测
    #cim-shujujiance
  • 工具设置
    #cim-gongjushezhi
  • 视图环视
    #cim-shituhuanshi
  • 顶视图未选中
    #cim-dingshituweixuanzhong
  • 顶视图选中
    #cim-dingshituxuanzhong
  • 项目列表
    #cim-xiangmuliebiao
  • 视频加载失败
    #cim-shipinjiazaishibai
  • 源数据管理
    #cim-yuanshujuguanli
  • 部件库管理
    #cim-bujiankuguanli
  • 配置项管理
    #cim-peizhixiangguanli
  • 要素集管理
    #cim-yaosujiguanli
  • 我的工具
    #cim-wodegongju
  • 播放
    #cim-bofang
  • 方针模拟2
    #cim-fangzhenmoni2
  • 空间面积
    #cim-kongjianmianji
  • 视图漫游
    #cim-shitumanyou
  • 视图快照
    #cim-shitukuaizhao
  • 属性查询
    #cim-shuxingchaxun
  • 全局设置
    #cim-quanjushezhi
  • 填挖方分析
    #cim-tianwafangfenxi
  • 投影面积
    #cim-touyingmianji
  • 模型压平
    #cim-moxingyaping
  • 透明度
    #cim-toumingdu
  • 基础分析
    #cim-jichufenxi
  • 分屏-上下
    #cim-fenping-shangxia
  • 贴地面积
    #cim-tiedimianji1
  • 模型剖切
    #cim-moxingpouqie
  • 分屏-左右
    #cim-fenping-zuoyou
  • 收藏
    #cim-shoucang
  • 视频投放
    #cim-shipintoufang
  • 统计
    #cim-tongji
  • 用地平衡分析
    #cim-yongdipinghengfenxi
  • 绿地率分析
    #cim-lvdishuaifenxi
  • 控高分析
    #cim-konggaofenxi
  • 视廊分析
    #cim-shilangfenxi
  • 规划分析
    #cim-guihuafenxi
  • 缓冲区分析
    #cim-huanchongqufenxi
  • 开挖分析
    #cim-kaiwafenxi
  • 视线分析
    #cim-shixianfenxi
  • 坡度坡向
    #cim-podupoxiang
  • 属性
    #cim-shuxing
  • 全生命周期
    #cim-quanshengmingzhouqi
  • 标注
    #cim-biaozhu
  • 预警
    #cim-yujing
  • 摄像头
    #cim-shexiangtou
  • 模拟分析-1
    #cim-monifenxi-1
  • 测量工具
    #cim-celianggongju
  • 日照模拟2
    #cim-rizhaomoni2
  • BIM工具
    #cim-BIMgongju
  • 日照模拟
    #cim-rizhaomoni
  • 坐标拾取
    #cim-zuobiaoshiqu
  • 视觉设置
    #cim-shijueshezhi
  • 场景漫游
    #cim-changjingmanyou
  • 视点管理
    #cim-shidianguanli
  • 分屏比对
    #cim-fenpingbidui
  • 图层-线
    #cim-tuceng-xian
  • 设置设置
    #cim-shezhishezhi
  • 场景特效
    #cim-changjingtexiao
  • 模拟分析
    #cim-monifenxi
  • 自由漫游
    #cim-ziyoumanyou
  • 暂停
    #cim-zanting
  • 场景浏览
    #cim-changjingliulan
  • icon-kfckfc
    #cim-fuzhugongju
  • 场景设置
    #cim-changjingshezhi1
  • 指北针
    #cim-zhibeizhen
  • 前一视图
    #cim-qianyishitu
  • 3D
    #cim-a-3D
  • 减少
    #cim-jianshao
  • 后一视图
    #cim-houyishitu
  • 顶视图
    #cim-dingshitu
  • 2D
    #cim-a-2D
  • 视图操作
    #cim-shitucaozuo
  • 部件库
    #cim-bujianku
  • 目录树
    #cim-mulushu
  • 文件
    #cim-wenjian
  • 筛选
    #cim-shaixuan
  • 个人中心
    #cim-gerenzhongxin
  • 保存
    #cim-baocun
  • 建筑
    #cim-jianzhu
  • 密码
    #cim-mima
  • 消息
    #cim-xiaoxi
  • 下载
    #cim-xiazai
  • 视域分析
    #cim-shiyufenxi
  • chevron-left
    #cim-chevron-left
  • 项目全生命周期2
    #cim-xiangmuquanshengmingzhouqi2
  • 后页
    #cim-houye
  • 前页
    #cim-qianye
  • chevron-right
    #cim-chevron-right
  • 展开
    #cim-zhankai
  • 更多2
    #cim-gengduo2
  • 收起
    #cim-shouqi
  • 模型操作
    #cim-moxingcaozuo
  • 更多1
    #cim-gengduo1
  • 箭头-r-1
    #cim-jiantou-r-1
  • 箭头-l-1
    #cim-jiantou-l-1
  • 箭头1-d
    #cim-jiantou1-d
  • 箭头1-u
    #cim-jiantou1-u
  • 上传
    #cim-shangchuan
  • 箭头-r
    #cim-jiantou-r
  • 放大
    #cim-fangda
  • 箭头-l
    #cim-jiantou-l
  • 日期
    #cim-riqi
  • 缩小
    #cim-suoxiao
  • 快照
    #cim-kuaizhao
  • 可视
    #cim-keshi
  • 暗色
    #cim-anse
  • 不可视
    #cim-bukeshi
  • 亮度
    #cim-liangdu
  • 添加
    #cim-tianjia
  • 排序
    #cim-paixu
  • 终端
    #cim-zhongduan
  • 退出
    #cim-tuichu
  • 时间
    #cim-shijian
  • 退出全屏
    #cim-tuichuquanping
  • 预览
    #cim-yulan
  • 设置
    #cim-shezhi
  • 收藏-1
    #cim-shoucang-1
  • 项目全生命周期
    #cim-xiangmuquanshengmingzhouqi
  • 贴地面积
    #cim-tiedimianji
  • 详情
    #cim-xiangqing
  • 分层分户
    #cim-fencengfenhu
  • Basics_close
    #cim-close
  • 场景设置
    #cim-changjingshezhi
  • 场景信息
    #cim-changjingxinxi
  • 工具配置
    #cim-gongjupeizhi
  • 坡向
    #cim-poxiang
  • 坡度
    #cim-podu
  • 天气
    #cim-tianqi1
  • 下翻页
    #cim-xiafanye
  • 相机环视
    #cim-xiangjihuanshi
  • 上翻页
    #cim-shangfanye
  • #cim-dian
  • 线
    #cim-xian
  • #cim-mian
  • #cim-xue
  • #cim-yu
  • #cim-wu
  • #cim-yun
  • 卷帘
    #cim-juanlian
  • add
    #cim-add
  • folder-close-sm
    #cim-folder-close-sm
  • folder-open-sm
    #cim-folder-open-sm
  • illuminati
    #cim-illuminati
  • atmospheric
    #cim-atmospheric
  • 3d
    #cim-a-3d
  • 2.5d
    #cim-a-25d
  • measure
    #cim-measure
  • clampLength
    #cim-clampLength
  • skyline
    #cim-skyline
  • viewShed
    #cim-viewShed
  • sightLine
    #cim-sightLine
  • heightLimit
    #cim-heightLimit
  • fullscreen
    #cim-fullscreen
  • switchView
    #cim-switchView
  • spaceLength
    #cim-spaceLength
  • triangle
    #cim-triangle
  • sitting
    #cim-sitting
  • azimuth
    #cim-azimuth
  • angle
    #cim-angulation
  • iocn
    #cim-iocn
  • gltf
    #cim-GLTF
  • trackline
    #cim-trackline
  • glowline
    #cim-glowline
  • arrowline
    #cim-arrowline
  • radascan
    #cim-radascan
  • ripplecircle
    #cim-ripplecircle
  • dynamicsurface
    #cim-dynamicsurface
  • vertebral
    #cim-vertebral
  • electronWall
    #cim-electronwall
  • clean
    #cim-clean
  • ality
    #cim-ality
  • defaults
    #cim-defaults
  • layers
    #cim-layers
  • document
    #cim-document
  • scene
    #cim-scene
  • search
    #cim-search
  • clear
    #cim-clear
  • attachment
    #cim-attachment
  • warning-md
    #cim-warning-md
  • information-md
    #cim-information-md
  • success-md
    #cim-success-md
  • confirm-md
    #cim-confirm-md
  • information-fill-sm
    #cim-information-fill-sm
  • warning-fill-sm
    #cim-warning-fill-sm
  • warning-sm
    #cim-warning-sm
  • information-sm
    #cim-information-sm
  • success-sm
    #cim-success-sm
  • success-fill-sm
    #cim-success-fill-sm
  • cancel
    #cim-cancel
  • confirm
    #cim-confirm
  • new-folder
    #cim-new-folder
  • rename
    #cim-rename
  • delete
    #cim-delete

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>