• 1
    
  • 0
    
  • 4
    
  • 2
    
  • 6
    
  • 3
    
  • 5
    
  • bao
    
  • xin
    
  • 黑夜模式
    
  • 白天模式
    
  • mail-send-line
    
  • customer-service-2-line
    
  • phone-line
    
  • artboard-2-fill
    
  • artboard-2-line
    
  • blur-off-fill
    
  • artboard-fill
    
  • ball-pen-fill
    
  • blur-off-line
    
  • ball-pen-line
    
  • brush-4-fill
    
  • brush-3-fill
    
  • brush-2-line
    
  • brush-3-line
    
  • brush-2-fill
    
  • brush-4-line
    
  • compasses-2-fill
    
  • compasses-2-line
    
  • compasses-fill
    
  • brush-line
    
  • contrast-2-fill
    
  • contrast-2-line
    
  • compasses-line
    
  • brush-fill
    
  • contrast-drop-fill
    
  • contrast-drop-2-line
    
  • contrast-drop-2-fill
    
  • contrast-drop-line
    
  • contrast-fill
    
  • contrast-line
    
  • artboard-line
    
  • crop-2-fill
    
  • crop-fill
    
  • crop-2-line
    
  • crop-line
    
  • drag-move-2-line
    
  • drag-move-2-fill
    
  • drag-move-fill
    
  • drop-fill
    
  • grid-fill
    
  • album-fill
    
  • 4k-fill
    
  • album-line
    
  • 4k-line
    
  • broadcast-line
    
  • camera-2-fill
    
  • broadcast-fill
    
  • camera-3-line
    
  • camera-2-line
    
  • camera-line
    
  • camera-3-fill
    
  • camera-switch-fill
    
  • clapperboard-line
    
  • equalizer-fill
    
  • eject-fill
    
  • camera-off-fill
    
  • dvd-line
    
  • dvd-fill
    
  • eject-line
    
  • disc-line
    
  • disc-fill
    
  • film-fill
    
  • film-line
    
  • fullscreen-line
    
  • equalizer-line
    
  • fullscreen-exit-fill
    
  • gallery-line
    
  • headphone-fill
    
  • gallery-fill
    
  • fullscreen-exit-line
    
  • headphone-line
    
  • hq-fill
    
  • hd-line
    
  • image-2-fill
    
  • image-fill
    
  • landscape-line
    
  • landscape-fill
    
  • image-2-line
    
  • image-line
    
  • mic-fill
    
  • mic-2-line
    
  • mic-line
    
  • mic-2-fill
    
  • hd-fill
    
  • mic-off-fill
    
  • mic-off-line
    
  • movie-fill
    
  • movie-2-fill
    
  • hq-line
    
  • movie-2-line
    
  • movie-line
    
  • clapperboard-fill
    
  • music-2-line
    
  • music-2-fill
    
  • mv-fill
    
  • music-line
    
  • music-fill
    
  • notification-2-line
    
  • mv-line
    
  • play-list-fill
    
  • play-list-line
    
  • gift
    
  • integral
    
  • nav-list
    
  • play
    
  • rising
    
  • QRcode
    
  • integral-fill
    
  • Money management
    
  • packaging
    
  • online-tracking
    
  • signboard
    
  • shuffling-banner
    
  • category products
    
  • set
    
  • discounts
    
  • night mode
    
  • vip
    
  • become a gold supplier
    
  • browse_fill
    
  • like_fill
    
  • message_fill
    
  • time_fill
    
  • history
    
  • 填写
    
  • 问答2
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

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

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

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

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

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

  • 1
    .ji-a-1
  • 0
    .ji-a-0
  • 4
    .ji-a-4
  • 2
    .ji-a-2
  • 6
    .ji-a-6
  • 3
    .ji-a-3
  • 5
    .ji-a-5
  • bao
    .ji-bao
  • xin
    .ji-xin
  • 黑夜模式
    .ji-heiyemoshi
  • 白天模式
    .ji-baitianmoshi
  • mail-send-line
    .ji-mail-send-line
  • customer-service-2-line
    .ji-customer-service-2-line
  • phone-line
    .ji-phone-line
  • artboard-2-fill
    .ji-artboard--fill
  • artboard-2-line
    .ji-artboard--line
  • blur-off-fill
    .ji-blur-off-fill
  • artboard-fill
    .ji-artboard-fill
  • ball-pen-fill
    .ji-ball-pen-fill
  • blur-off-line
    .ji-blur-off-line
  • ball-pen-line
    .ji-ball-pen-line
  • brush-4-fill
    .ji-brush--fill
  • brush-3-fill
    .ji-brush--fill1
  • brush-2-line
    .ji-brush--line
  • brush-3-line
    .ji-brush--line1
  • brush-2-fill
    .ji-brush--fill2
  • brush-4-line
    .ji-brush--line2
  • compasses-2-fill
    .ji-compasses--fill
  • compasses-2-line
    .ji-compasses--line
  • compasses-fill
    .ji-compasses-fill
  • brush-line
    .ji-brush-line
  • contrast-2-fill
    .ji-contrast--fill
  • contrast-2-line
    .ji-contrast--line
  • compasses-line
    .ji-compasses-line
  • brush-fill
    .ji-brush-fill
  • contrast-drop-fill
    .ji-contrast-drop-fill
  • contrast-drop-2-line
    .ji-contrast-drop--line
  • contrast-drop-2-fill
    .ji-contrast-drop--fill
  • contrast-drop-line
    .ji-contrast-drop-line
  • contrast-fill
    .ji-contrast-fill
  • contrast-line
    .ji-contrast-line
  • artboard-line
    .ji-artboard-line
  • crop-2-fill
    .ji-crop--fill
  • crop-fill
    .ji-crop-fill
  • crop-2-line
    .ji-crop--line
  • crop-line
    .ji-crop-line
  • drag-move-2-line
    .ji-drag-move--line
  • drag-move-2-fill
    .ji-drag-move--fill
  • drag-move-fill
    .ji-drag-move-fill
  • drop-fill
    .ji-drop-fill
  • grid-fill
    .ji-grid-fill
  • album-fill
    .ji-album-fill
  • 4k-fill
    .ji-k-fill
  • album-line
    .ji-album-line
  • 4k-line
    .ji-k-line
  • broadcast-line
    .ji-broadcast-line
  • camera-2-fill
    .ji-camera--fill
  • broadcast-fill
    .ji-broadcast-fill
  • camera-3-line
    .ji-camera--line
  • camera-2-line
    .ji-camera--line1
  • camera-line
    .ji-camera-line
  • camera-3-fill
    .ji-camera--fill1
  • camera-switch-fill
    .ji-camera-switch-fill
  • clapperboard-line
    .ji-clapperboard-line
  • equalizer-fill
    .ji-equalizer-fill
  • eject-fill
    .ji-eject-fill
  • camera-off-fill
    .ji-camera-off-fill
  • dvd-line
    .ji-dvd-line
  • dvd-fill
    .ji-dvd-fill
  • eject-line
    .ji-eject-line
  • disc-line
    .ji-disc-line
  • disc-fill
    .ji-disc-fill
  • film-fill
    .ji-film-fill
  • film-line
    .ji-film-line
  • fullscreen-line
    .ji-fullscreen-line
  • equalizer-line
    .ji-equalizer-line
  • fullscreen-exit-fill
    .ji-fullscreen-exit-fill
  • gallery-line
    .ji-gallery-line
  • headphone-fill
    .ji-headphone-fill
  • gallery-fill
    .ji-gallery-fill
  • fullscreen-exit-line
    .ji-fullscreen-exit-line
  • headphone-line
    .ji-headphone-line
  • hq-fill
    .ji-hq-fill
  • hd-line
    .ji-hd-line
  • image-2-fill
    .ji-image--fill
  • image-fill
    .ji-image-fill
  • landscape-line
    .ji-landscape-line
  • landscape-fill
    .ji-landscape-fill
  • image-2-line
    .ji-image--line
  • image-line
    .ji-image-line
  • mic-fill
    .ji-mic-fill
  • mic-2-line
    .ji-mic--line
  • mic-line
    .ji-mic-line
  • mic-2-fill
    .ji-mic--fill
  • hd-fill
    .ji-hd-fill
  • mic-off-fill
    .ji-mic-off-fill
  • mic-off-line
    .ji-mic-off-line
  • movie-fill
    .ji-movie-fill
  • movie-2-fill
    .ji-movie--fill
  • hq-line
    .ji-hq-line
  • movie-2-line
    .ji-movie--line
  • movie-line
    .ji-movie-line
  • clapperboard-fill
    .ji-clapperboard-fill
  • music-2-line
    .ji-music--line
  • music-2-fill
    .ji-music--fill
  • mv-fill
    .ji-mv-fill
  • music-line
    .ji-music-line
  • music-fill
    .ji-music-fill
  • notification-2-line
    .ji-notification--line
  • mv-line
    .ji-mv-line
  • play-list-fill
    .ji-play-list-fill
  • play-list-line
    .ji-play-list-line
  • gift
    .ji-gift
  • integral
    .ji-integral
  • nav-list
    .ji-nav-list
  • play
    .ji-play
  • rising
    .ji-rising
  • QRcode
    .ji-QRcode
  • integral-fill
    .ji-integral-fill
  • Money management
    .ji-Moneymanagement
  • packaging
    .ji-packaging
  • online-tracking
    .ji-online-tracking
  • signboard
    .ji-signboard
  • shuffling-banner
    .ji-shuffling-banner
  • category products
    .ji-Similarproducts
  • set
    .ji-set
  • discounts
    .ji-discounts
  • night mode
    .ji-nightmode
  • vip
    .ji-vip
  • become a gold supplier
    .ji-becomeagoldsupplier
  • browse_fill
    .ji-browse_fill
  • like_fill
    .ji-like_fill
  • message_fill
    .ji-message_fill
  • time_fill
    .ji-time_fill
  • history
    .ji-history
  • 填写
    .ji-tianxie
  • 问答2
    .ji-wenda2

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="jitheme ji-xxx"></span>

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

  • 1
    #ji-a-1
  • 0
    #ji-a-0
  • 4
    #ji-a-4
  • 2
    #ji-a-2
  • 6
    #ji-a-6
  • 3
    #ji-a-3
  • 5
    #ji-a-5
  • bao
    #ji-bao
  • xin
    #ji-xin
  • 黑夜模式
    #ji-heiyemoshi
  • 白天模式
    #ji-baitianmoshi
  • mail-send-line
    #ji-mail-send-line
  • customer-service-2-line
    #ji-customer-service-2-line
  • phone-line
    #ji-phone-line
  • artboard-2-fill
    #ji-artboard--fill
  • artboard-2-line
    #ji-artboard--line
  • blur-off-fill
    #ji-blur-off-fill
  • artboard-fill
    #ji-artboard-fill
  • ball-pen-fill
    #ji-ball-pen-fill
  • blur-off-line
    #ji-blur-off-line
  • ball-pen-line
    #ji-ball-pen-line
  • brush-4-fill
    #ji-brush--fill
  • brush-3-fill
    #ji-brush--fill1
  • brush-2-line
    #ji-brush--line
  • brush-3-line
    #ji-brush--line1
  • brush-2-fill
    #ji-brush--fill2
  • brush-4-line
    #ji-brush--line2
  • compasses-2-fill
    #ji-compasses--fill
  • compasses-2-line
    #ji-compasses--line
  • compasses-fill
    #ji-compasses-fill
  • brush-line
    #ji-brush-line
  • contrast-2-fill
    #ji-contrast--fill
  • contrast-2-line
    #ji-contrast--line
  • compasses-line
    #ji-compasses-line
  • brush-fill
    #ji-brush-fill
  • contrast-drop-fill
    #ji-contrast-drop-fill
  • contrast-drop-2-line
    #ji-contrast-drop--line
  • contrast-drop-2-fill
    #ji-contrast-drop--fill
  • contrast-drop-line
    #ji-contrast-drop-line
  • contrast-fill
    #ji-contrast-fill
  • contrast-line
    #ji-contrast-line
  • artboard-line
    #ji-artboard-line
  • crop-2-fill
    #ji-crop--fill
  • crop-fill
    #ji-crop-fill
  • crop-2-line
    #ji-crop--line
  • crop-line
    #ji-crop-line
  • drag-move-2-line
    #ji-drag-move--line
  • drag-move-2-fill
    #ji-drag-move--fill
  • drag-move-fill
    #ji-drag-move-fill
  • drop-fill
    #ji-drop-fill
  • grid-fill
    #ji-grid-fill
  • album-fill
    #ji-album-fill
  • 4k-fill
    #ji-k-fill
  • album-line
    #ji-album-line
  • 4k-line
    #ji-k-line
  • broadcast-line
    #ji-broadcast-line
  • camera-2-fill
    #ji-camera--fill
  • broadcast-fill
    #ji-broadcast-fill
  • camera-3-line
    #ji-camera--line
  • camera-2-line
    #ji-camera--line1
  • camera-line
    #ji-camera-line
  • camera-3-fill
    #ji-camera--fill1
  • camera-switch-fill
    #ji-camera-switch-fill
  • clapperboard-line
    #ji-clapperboard-line
  • equalizer-fill
    #ji-equalizer-fill
  • eject-fill
    #ji-eject-fill
  • camera-off-fill
    #ji-camera-off-fill
  • dvd-line
    #ji-dvd-line
  • dvd-fill
    #ji-dvd-fill
  • eject-line
    #ji-eject-line
  • disc-line
    #ji-disc-line
  • disc-fill
    #ji-disc-fill
  • film-fill
    #ji-film-fill
  • film-line
    #ji-film-line
  • fullscreen-line
    #ji-fullscreen-line
  • equalizer-line
    #ji-equalizer-line
  • fullscreen-exit-fill
    #ji-fullscreen-exit-fill
  • gallery-line
    #ji-gallery-line
  • headphone-fill
    #ji-headphone-fill
  • gallery-fill
    #ji-gallery-fill
  • fullscreen-exit-line
    #ji-fullscreen-exit-line
  • headphone-line
    #ji-headphone-line
  • hq-fill
    #ji-hq-fill
  • hd-line
    #ji-hd-line
  • image-2-fill
    #ji-image--fill
  • image-fill
    #ji-image-fill
  • landscape-line
    #ji-landscape-line
  • landscape-fill
    #ji-landscape-fill
  • image-2-line
    #ji-image--line
  • image-line
    #ji-image-line
  • mic-fill
    #ji-mic-fill
  • mic-2-line
    #ji-mic--line
  • mic-line
    #ji-mic-line
  • mic-2-fill
    #ji-mic--fill
  • hd-fill
    #ji-hd-fill
  • mic-off-fill
    #ji-mic-off-fill
  • mic-off-line
    #ji-mic-off-line
  • movie-fill
    #ji-movie-fill
  • movie-2-fill
    #ji-movie--fill
  • hq-line
    #ji-hq-line
  • movie-2-line
    #ji-movie--line
  • movie-line
    #ji-movie-line
  • clapperboard-fill
    #ji-clapperboard-fill
  • music-2-line
    #ji-music--line
  • music-2-fill
    #ji-music--fill
  • mv-fill
    #ji-mv-fill
  • music-line
    #ji-music-line
  • music-fill
    #ji-music-fill
  • notification-2-line
    #ji-notification--line
  • mv-line
    #ji-mv-line
  • play-list-fill
    #ji-play-list-fill
  • play-list-line
    #ji-play-list-line
  • gift
    #ji-gift
  • integral
    #ji-integral
  • nav-list
    #ji-nav-list
  • play
    #ji-play
  • rising
    #ji-rising
  • QRcode
    #ji-QRcode
  • integral-fill
    #ji-integral-fill
  • Money management
    #ji-Moneymanagement
  • packaging
    #ji-packaging
  • online-tracking
    #ji-online-tracking
  • signboard
    #ji-signboard
  • shuffling-banner
    #ji-shuffling-banner
  • category products
    #ji-Similarproducts
  • set
    #ji-set
  • discounts
    #ji-discounts
  • night mode
    #ji-nightmode
  • vip
    #ji-vip
  • become a gold supplier
    #ji-becomeagoldsupplier
  • browse_fill
    #ji-browse_fill
  • like_fill
    #ji-like_fill
  • message_fill
    #ji-message_fill
  • time_fill
    #ji-time_fill
  • history
    #ji-history
  • 填写
    #ji-tianxie
  • 问答2
    #ji-wenda2

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>