• 02
    
  • 01
    
  • 椭圆
    
  • 安全设备
    
  • 阴天
    
  • 雷电
    
  • 大风
    
  • 雪-中雪
    
  • 雨-中雨
    
  • 雨-大雨
    
  • 雨-小雨
    
  • 雪-小雪
    
  • 雪-暴雪
    
  • 雪-大雪
    
  • 沙尘
    
  • 路径 13351
    
  • 路径 13350
    
  • 组 15695
    
  • 路径 -1
    
  • 矩形 4742
    
  • 组 16206
    
  • 路径 14372
    
  • 路径 14427
    
  • 路径 14428
    
  • 路径 14298
    
  • 路径 14287
    
  • 路径 14430
    
  • 组 16105
    
  • 组 15469
    
  • 路径 14286
    
  • 组 16211
    
  • 组 16107
    
  • 组 16216
    
  • 组 16108
    
  • 组 16106
    
  • 组 16109
    
  • manual-entry
    
  • 组 14195
    
  • 
  • 
  • 矩形 4742
    
  • new-up
    
  • new-down
    
  • 组 15518
    
  • 组 15518
    
  • biyan
    
  • 0
    
  • 海事上报
    
  • 工程上报
    
  • 出海任务
    
  • APP打卡
    
  • 手环
    
  • AIS监控
    
  • 监管
    
  • 管理
    
  • 声音
    
  • 海事
    
  • 禁音
    
  • 风场
    
  • 3D
    
  • 2D
    
  • 台风
    
  • 气象
    
  • 风粒子
    
  • 台风
    
  • 眼睛
    
  • 路径 8576
    
  • 路径 8575
    
  • 提交审批
    
  • 出海登记
    
  • 告警2
    
  • 告警5
    
  • 告警1
    
  • 告警4
    
  • 告警3
    
  • 海上风电场安全-视频监控0716
    
  • 链接-文件
    
  • 标尺
    
  • 工具
    
  • 标注(1)
    
  • 删 除
    
  • 标注
    
  • 向左
    
  • 向右
    
  • 向左(1)
    
  • 向右-
    
  • 视频
    
  • 列表
    
  • 0-02
    
  • 0-01
    
  • 声音
    
  • 视频
    
  • 录像
    
  • 全屏
    
  • 9屏
    
  • 六屏
    
  • 四屏
    
  • 单屏
    
  • 刷新
    
  • 云台控制
    
  • 话筒
    
  • 窗口截屏
    
  • 诊断
    
  • 服务与支持
    
  • 下载app
    
  • 展开
    
  • 收缩
    
  • 三角箭头
    
  • 疑惑
    
  • 防御指南
    
  • 详情
    
  • 警告
    
  • 缩小
    
  • 放大
    
  • 上箭头
    
  • 下箭头
    
  • 2
    
  • 1
    
  • line-chart
    
  • Table
    
  • 错误
    
  • 点赞
    
  • 摄像头
    
  • 未命名 -1-02
    
  • 未上传
    
  • 更多(1)
    
  • 更多
    
  • SC3-图片
    
  • CS2-齿轮
    
  • 0000-05
    
  • 0000-06
    
  • 0000-08
    
  • 0000-09
    
  • 0000-10
    
  • 0000-13
    
  • 0000-14
    
  • 0000-11
    
  • 0000-12
    
  • 0000-16
    
  • 0000-17
    
  • 0000-19
    
  • 0000-15
    
  • 0000-20
    
  • 0000-23
    
  • 0000-22
    
  • 0000-26
    
  • 0000-29
    
  • 0000-24
    
  • 0000-32
    
  • 0000-21
    
  • 切-02
    
  • 0000-31
    
  • 0000-27
    
  • 切-01
    
  • 切-03
    
  • 0000-30
    
  • 0000-25
    
  • 切-04
    
  • 上传
    
  • 下载
    
  • 1
    
  • 选中
    
  • 左向2
    
  • 3D
    
  • 
  • 5-右3
    
  • error_full
    
  • 小图标增-02
    
  • 小图标增-08
    
  • 小图标增-07
    
  • 小图标增-09
    
  • 小图标-04
    
  • 小图标-75
    
  • 小图标-02
    
  • 小图标-07
    
  • 小图标-03
    
  • 小图标-06
    
  • 小图标-05
    
  • 小图标-09
    
  • 小图标-11
    
  • 小图标-13
    
  • 小图标-15
    
  • 小图标-17
    
  • 小图标-19
    
  • 小图标-22
    
  • 小图标-21
    
  • 小图标-23
    
  • 小图标-24
    
  • 小图标-29
    
  • 小图标-26
    
  • 小图标-33
    
  • 小图标-32
    
  • 小图标-38
    
  • 小图标-51
    
  • 小图标-54
    
  • 小图标-53
    
  • 小图标-50
    
  • 小图标-56
    
  • 小图标-57
    
  • 小图标-58
    
  • 小图标-59
    
  • 小图标-64
    
  • 小图标-62
    
  • 小图标-65
    
  • 小图标-66
    
  • 小图标-67
    
  • 小图标-68
    
  • 小图标-69
    
  • 小图标-70
    
  • 小图标-73
    
  • 小图标-72
    
  • 小图标-74
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 02
    .icon02
  • 01
    .icon01
  • 椭圆
    .icontuoyuan
  • 安全设备
    .iconanquanshebei
  • 阴天
    .iconyintian
  • 雷电
    .iconleidian
  • 大风
    .icondafeng
  • 雪-中雪
    .iconxue-zhongxue
  • 雨-中雨
    .iconyu-zhongyu
  • 雨-大雨
    .iconyu-dayu
  • 雨-小雨
    .iconyu-xiaoyu
  • 雪-小雪
    .iconxue-xiaoxue
  • 雪-暴雪
    .iconxue-baoxue
  • 雪-大雪
    .iconxue-daxue
  • 沙尘
    .iconshachen
  • 路径 13351
    .iconlujing13351
  • 路径 13350
    .iconlujing13350
  • 组 15695
    .iconzu15695
  • 路径 -1
    .iconlujing-1
  • 矩形 4742
    .iconjuxing47421
  • 组 16206
    .iconzu16206
  • 路径 14372
    .iconlujing14372
  • 路径 14427
    .iconlujing14427
  • 路径 14428
    .iconlujing14428
  • 路径 14298
    .iconlujing14298
  • 路径 14287
    .iconlujing14287
  • 路径 14430
    .iconlujing14430
  • 组 16105
    .iconzu16105
  • 组 15469
    .iconzu15469
  • 路径 14286
    .iconlujing14286
  • 组 16211
    .iconzu16211
  • 组 16107
    .iconzu16107
  • 组 16216
    .iconzu16216
  • 组 16108
    .iconzu16108
  • 组 16106
    .iconzu16106
  • 组 16109
    .iconzu16109
  • manual-entry
    .iconmanual-entry
  • 组 14195
    .iconzu14195
  • .iconxia
  • .iconshang
  • 矩形 4742
    .iconjuxing4742
  • new-up
    .iconnew-up
  • new-down
    .iconnew-down
  • 组 15518
    .iconzu15518
  • 组 15518
    .iconzu155182
  • biyan
    .iconbiyan
  • 0
    .icon0
  • 海事上报
    .icon-haishishangbao
  • 工程上报
    .icon-gongchengshangbao
  • 出海任务
    .icon-chuhairenwu
  • APP打卡
    .icon-APPdaka
  • 手环
    .icon-shouhuan
  • AIS监控
    .icon-AISjiankong
  • 监管
    .icon-jianguan
  • 管理
    .icon-guanli
  • 声音
    .icon-shengyin
  • 海事
    .icon-haishi
  • 禁音
    .icon-jinyin
  • 风场
    .icon-fengchang
  • 3D
    .icon-3D
  • 2D
    .icon-2D
  • 台风
    .icon-typhoon1
  • 气象
    .icon-weather1
  • 风粒子
    .icon-wind-particles
  • 台风
    .icon-typhoon
  • 眼睛
    .icon-eye
  • 路径 8576
    .icon-right3
  • 路径 8575
    .icon-left3
  • 提交审批
    .icon-approve
  • 出海登记
    .icon-register
  • 告警2
    .icongaojing2
  • 告警5
    .icongaojing5
  • 告警1
    .icongaojing1
  • 告警4
    .icongaojing4
  • 告警3
    .icongaojing3
  • 海上风电场安全-视频监控0716
    .iconhaishangfengdianchanganquan-shipinjiankong0716
  • 链接-文件
    .icon-link
  • 标尺
    .icon-map-ranging
  • 工具
    .icon-tool
  • 标注(1)
    .icon-point
  • 删 除
    .icon-label-delete
  • 标注
    .icon-map-annotation
  • 向左
    .icon-left2
  • 向右
    .icon-right2
  • 向左(1)
    .icon-left1
  • 向右-
    .icon-right1
  • 视频
    .icon-video-display
  • 列表
    .icon-video-list
  • 0-02
    .icon0-02
  • 0-01
    .icon0-01
  • 声音
    .icon-voice2
  • 视频
    .icon-video2
  • 录像
    .icon-videos
  • 全屏
    .icon-full-screen1
  • 9屏
    .icon-9screens
  • 六屏
    .icon-6screens
  • 四屏
    .icon-4screens
  • 单屏
    .icon-screens
  • 刷新
    .icon-refresh
  • 云台控制
    .icon-PTZ-control
  • 话筒
    .icon-microphone
  • 窗口截屏
    .icon-screenshot
  • 诊断
    .icon-diagnosis
  • 服务与支持
    .iconfuwuyuzhichi
  • 下载app
    .iconxiazaiapp
  • 展开
    .icon-unfold
  • 收缩
    .icon-shrink
  • 三角箭头
    .icon-right
  • 疑惑
    .icon-explanation
  • 防御指南
    .icon-defense
  • 详情
    .icon-detail
  • 警告
    .icon-warning
  • 缩小
    .icon-zoomOut
  • 放大
    .icon-zoomIn
  • 上箭头
    .icon-down
  • 下箭头
    .icon-up
  • 2
    .icon-list1
  • 1
    .icon-list2
  • line-chart
    .icon-line-chart
  • Table
    .icon-table
  • 错误
    .icon-close
  • 点赞
    .icon-great
  • 摄像头
    .icon-camera
  • 未命名 -1-02
    .icon-ship-person
  • 未上传
    .icon-notUpload
  • 更多(1)
    .icon-more
  • 更多
    .icon-more1
  • SC3-图片
    .icon-img
  • CS2-齿轮
    .icon-chilun
  • 0000-05
    .icon-phone
  • 0000-06
    .icon-reset1
  • 0000-08
    .icon-userConfig
  • 0000-09
    .icon-edit1
  • 0000-10
    .icon-user
  • 0000-13
    .icon-upload1
  • 0000-14
    .icon-remove
  • 0000-11
    .icon-logout
  • 0000-12
    .icon-10
  • 0000-16
    .icon-forbid
  • 0000-17
    .icon-ok2
  • 0000-19
    .icon-middle-warn
  • 0000-15
    .icon-roleConfig
  • 0000-20
    .icon-voice
  • 0000-23
    .icon-download1
  • 0000-22
    .icon-cancelCollection
  • 0000-26
    .icon-add1
  • 0000-29
    .icon-earpiece
  • 0000-24
    .icon-movie
  • 0000-32
    .icon-lock
  • 0000-21
    .icon-favorite
  • 切-02
    .icon-device-protect
  • 0000-31
    .icon-close1
  • 0000-27
    .icon-photoAlbum
  • 切-01
    .icon-wind-proctect
  • 切-03
    .icon-leave-alarm
  • 0000-30
    .icon-personHelp
  • 0000-25
    .icon-hand
  • 切-04
    .icon-drowning
  • 上传
    .icon-upload2
  • 下载
    .icon-download2
  • 1
    .iconweimingming--
  • 选中
    .icon-color-selected
  • 左向2
    .icon-menu-left
  • 3D
    .icon-3D1
  • .icon-map-reduce
  • 5-右3
    .icon-menu-right
  • error_full
    .icon-error
  • 小图标增-02
    .icon-hollow-boat
  • 小图标增-08
    .icon-video-playback
  • 小图标增-07
    .icon-live-preview
  • 小图标增-09
    .icon-name-edit
  • 小图标-04
    .icon-tip-info
  • 小图标-75
    .icon-crop
  • 小图标-02
    .icon-tip-success
  • 小图标-07
    .icon-map
  • 小图标-03
    .icon-tip-warn
  • 小图标-06
    .icon-phoneDownload
  • 小图标-05
    .icon-help
  • 小图标-09
    .icon-safety-statistics
  • 小图标-11
    .icon-video
  • 小图标-13
    .icon-warn
  • 小图标-15
    .icon-person
  • 小图标-17
    .icon-mission-management
  • 小图标-19
    .icon-wind-config
  • 小图标-22
    .icon-sailing-ship
  • 小图标-21
    .icon-marine-weather
  • 小图标-23
    .icon-sailing-crew
  • 小图标-24
    .icon-full-screen
  • 小图标-29
    .icon-ship
  • 小图标-26
    .icon-traffic-ship
  • 小图标-33
    .icon-color
  • 小图标-32
    .icon-color-setting
  • 小图标-38
    .icon-color-add
  • 小图标-51
    .icon-map-operations
  • 小图标-54
    .icon-map-amplification
  • 小图标-53
    .icon-position
  • 小图标-50
    .icon-personnel-positioning
  • 小图标-56
    .icon-ship-track
  • 小图标-57
    .icon-location
  • 小图标-58
    .icon-weather
  • 小图标-59
    .icon-file
  • 小图标-64
    .icon-back
  • 小图标-62
    .icon-weather-forecast
  • 小图标-65
    .icon-calendar
  • 小图标-66
    .icon-query
  • 小图标-67
    .icon-reset
  • 小图标-68
    .icon-add
  • 小图标-69
    .icon-edit
  • 小图标-70
    .icon-delete
  • 小图标-73
    .icon-save
  • 小图标-72
    .icon-back2
  • 小图标-74
    .icon-cancel

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

  • 02
    #icon02
  • 01
    #icon01
  • 椭圆
    #icontuoyuan
  • 安全设备
    #iconanquanshebei
  • 阴天
    #iconyintian
  • 雷电
    #iconleidian
  • 大风
    #icondafeng
  • 雪-中雪
    #iconxue-zhongxue
  • 雨-中雨
    #iconyu-zhongyu
  • 雨-大雨
    #iconyu-dayu
  • 雨-小雨
    #iconyu-xiaoyu
  • 雪-小雪
    #iconxue-xiaoxue
  • 雪-暴雪
    #iconxue-baoxue
  • 雪-大雪
    #iconxue-daxue
  • 沙尘
    #iconshachen
  • 路径 13351
    #iconlujing13351
  • 路径 13350
    #iconlujing13350
  • 组 15695
    #iconzu15695
  • 路径 -1
    #iconlujing-1
  • 矩形 4742
    #iconjuxing47421
  • 组 16206
    #iconzu16206
  • 路径 14372
    #iconlujing14372
  • 路径 14427
    #iconlujing14427
  • 路径 14428
    #iconlujing14428
  • 路径 14298
    #iconlujing14298
  • 路径 14287
    #iconlujing14287
  • 路径 14430
    #iconlujing14430
  • 组 16105
    #iconzu16105
  • 组 15469
    #iconzu15469
  • 路径 14286
    #iconlujing14286
  • 组 16211
    #iconzu16211
  • 组 16107
    #iconzu16107
  • 组 16216
    #iconzu16216
  • 组 16108
    #iconzu16108
  • 组 16106
    #iconzu16106
  • 组 16109
    #iconzu16109
  • manual-entry
    #iconmanual-entry
  • 组 14195
    #iconzu14195
  • #iconxia
  • #iconshang
  • 矩形 4742
    #iconjuxing4742
  • new-up
    #iconnew-up
  • new-down
    #iconnew-down
  • 组 15518
    #iconzu15518
  • 组 15518
    #iconzu155182
  • biyan
    #iconbiyan
  • 0
    #icon0
  • 海事上报
    #icon-haishishangbao
  • 工程上报
    #icon-gongchengshangbao
  • 出海任务
    #icon-chuhairenwu
  • APP打卡
    #icon-APPdaka
  • 手环
    #icon-shouhuan
  • AIS监控
    #icon-AISjiankong
  • 监管
    #icon-jianguan
  • 管理
    #icon-guanli
  • 声音
    #icon-shengyin
  • 海事
    #icon-haishi
  • 禁音
    #icon-jinyin
  • 风场
    #icon-fengchang
  • 3D
    #icon-3D
  • 2D
    #icon-2D
  • 台风
    #icon-typhoon1
  • 气象
    #icon-weather1
  • 风粒子
    #icon-wind-particles
  • 台风
    #icon-typhoon
  • 眼睛
    #icon-eye
  • 路径 8576
    #icon-right3
  • 路径 8575
    #icon-left3
  • 提交审批
    #icon-approve
  • 出海登记
    #icon-register
  • 告警2
    #icongaojing2
  • 告警5
    #icongaojing5
  • 告警1
    #icongaojing1
  • 告警4
    #icongaojing4
  • 告警3
    #icongaojing3
  • 海上风电场安全-视频监控0716
    #iconhaishangfengdianchanganquan-shipinjiankong0716
  • 链接-文件
    #icon-link
  • 标尺
    #icon-map-ranging
  • 工具
    #icon-tool
  • 标注(1)
    #icon-point
  • 删 除
    #icon-label-delete
  • 标注
    #icon-map-annotation
  • 向左
    #icon-left2
  • 向右
    #icon-right2
  • 向左(1)
    #icon-left1
  • 向右-
    #icon-right1
  • 视频
    #icon-video-display
  • 列表
    #icon-video-list
  • 0-02
    #icon0-02
  • 0-01
    #icon0-01
  • 声音
    #icon-voice2
  • 视频
    #icon-video2
  • 录像
    #icon-videos
  • 全屏
    #icon-full-screen1
  • 9屏
    #icon-9screens
  • 六屏
    #icon-6screens
  • 四屏
    #icon-4screens
  • 单屏
    #icon-screens
  • 刷新
    #icon-refresh
  • 云台控制
    #icon-PTZ-control
  • 话筒
    #icon-microphone
  • 窗口截屏
    #icon-screenshot
  • 诊断
    #icon-diagnosis
  • 服务与支持
    #iconfuwuyuzhichi
  • 下载app
    #iconxiazaiapp
  • 展开
    #icon-unfold
  • 收缩
    #icon-shrink
  • 三角箭头
    #icon-right
  • 疑惑
    #icon-explanation
  • 防御指南
    #icon-defense
  • 详情
    #icon-detail
  • 警告
    #icon-warning
  • 缩小
    #icon-zoomOut
  • 放大
    #icon-zoomIn
  • 上箭头
    #icon-down
  • 下箭头
    #icon-up
  • 2
    #icon-list1
  • 1
    #icon-list2
  • line-chart
    #icon-line-chart
  • Table
    #icon-table
  • 错误
    #icon-close
  • 点赞
    #icon-great
  • 摄像头
    #icon-camera
  • 未命名 -1-02
    #icon-ship-person
  • 未上传
    #icon-notUpload
  • 更多(1)
    #icon-more
  • 更多
    #icon-more1
  • SC3-图片
    #icon-img
  • CS2-齿轮
    #icon-chilun
  • 0000-05
    #icon-phone
  • 0000-06
    #icon-reset1
  • 0000-08
    #icon-userConfig
  • 0000-09
    #icon-edit1
  • 0000-10
    #icon-user
  • 0000-13
    #icon-upload1
  • 0000-14
    #icon-remove
  • 0000-11
    #icon-logout
  • 0000-12
    #icon-10
  • 0000-16
    #icon-forbid
  • 0000-17
    #icon-ok2
  • 0000-19
    #icon-middle-warn
  • 0000-15
    #icon-roleConfig
  • 0000-20
    #icon-voice
  • 0000-23
    #icon-download1
  • 0000-22
    #icon-cancelCollection
  • 0000-26
    #icon-add1
  • 0000-29
    #icon-earpiece
  • 0000-24
    #icon-movie
  • 0000-32
    #icon-lock
  • 0000-21
    #icon-favorite
  • 切-02
    #icon-device-protect
  • 0000-31
    #icon-close1
  • 0000-27
    #icon-photoAlbum
  • 切-01
    #icon-wind-proctect
  • 切-03
    #icon-leave-alarm
  • 0000-30
    #icon-personHelp
  • 0000-25
    #icon-hand
  • 切-04
    #icon-drowning
  • 上传
    #icon-upload2
  • 下载
    #icon-download2
  • 1
    #iconweimingming--
  • 选中
    #icon-color-selected
  • 左向2
    #icon-menu-left
  • 3D
    #icon-3D1
  • #icon-map-reduce
  • 5-右3
    #icon-menu-right
  • error_full
    #icon-error
  • 小图标增-02
    #icon-hollow-boat
  • 小图标增-08
    #icon-video-playback
  • 小图标增-07
    #icon-live-preview
  • 小图标增-09
    #icon-name-edit
  • 小图标-04
    #icon-tip-info
  • 小图标-75
    #icon-crop
  • 小图标-02
    #icon-tip-success
  • 小图标-07
    #icon-map
  • 小图标-03
    #icon-tip-warn
  • 小图标-06
    #icon-phoneDownload
  • 小图标-05
    #icon-help
  • 小图标-09
    #icon-safety-statistics
  • 小图标-11
    #icon-video
  • 小图标-13
    #icon-warn
  • 小图标-15
    #icon-person
  • 小图标-17
    #icon-mission-management
  • 小图标-19
    #icon-wind-config
  • 小图标-22
    #icon-sailing-ship
  • 小图标-21
    #icon-marine-weather
  • 小图标-23
    #icon-sailing-crew
  • 小图标-24
    #icon-full-screen
  • 小图标-29
    #icon-ship
  • 小图标-26
    #icon-traffic-ship
  • 小图标-33
    #icon-color
  • 小图标-32
    #icon-color-setting
  • 小图标-38
    #icon-color-add
  • 小图标-51
    #icon-map-operations
  • 小图标-54
    #icon-map-amplification
  • 小图标-53
    #icon-position
  • 小图标-50
    #icon-personnel-positioning
  • 小图标-56
    #icon-ship-track
  • 小图标-57
    #icon-location
  • 小图标-58
    #icon-weather
  • 小图标-59
    #icon-file
  • 小图标-64
    #icon-back
  • 小图标-62
    #icon-weather-forecast
  • 小图标-65
    #icon-calendar
  • 小图标-66
    #icon-query
  • 小图标-67
    #icon-reset
  • 小图标-68
    #icon-add
  • 小图标-69
    #icon-edit
  • 小图标-70
    #icon-delete
  • 小图标-73
    #icon-save
  • 小图标-72
    #icon-back2
  • 小图标-74
    #icon-cancel

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>