• icon_car
    
  • icon_gpsnoline
    
  • icon_gpsline
    
  • icon_time
    
  • icon_xianjie
    
  • icon_shouji
    
  • icon_fukuan
    
  • icon_htyl
    
  • icon_dingbi
    
  • icon_dingd
    
  • icon_feiyong
    
  • icon_dingw
    
  • icon_pic
    
  • icon_chezhu
    
  • icon_daohang
    
  • icon_dyqr
    
  • icon_daben
    
  • icon_tel
    
  • icon_pdf
    
  • icon_setting
    
  • icon_camera
    
  • icon_invisible
    
  • icon_visible
    
  • aboutus
    
  • add
    
  • chose
    
  • costomer
    
  • bankcard
    
  • tel
    
  • check
    
  • search
    
  • amend
    
  • icon_my
    
  • icon_my_filled
    
  • home-filled
    
  • home_filled
    
  • singel_choice
    
  • more
    
  • paydate
    
  • piechart-circle-filled
    
  • close-circle
    
  • Problem
    
  • user
    
  • carryout-filled
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'myicon';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.ttf?t=1738819191763') format('truetype');
}

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

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

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

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

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

  • icon_car
    .myicon-icon_car
  • icon_gpsnoline
    .myicon-signal
  • icon_gpsline
    .myicon-gps
  • icon_time
    .myicon-time-fill
  • icon_xianjie
    .myicon-price-fill
  • icon_shouji
    .myicon-icon_shouji
  • icon_fukuan
    .myicon-price-circle
  • icon_htyl
    .myicon-contract
  • icon_dingbi
    .myicon-ding-coin
  • icon_dingd
    .myicon-ding-dang
  • icon_feiyong
    .myicon-amount
  • icon_dingw
    .myicon-maker
  • icon_pic
    .myicon-pic
  • icon_chezhu
    .myicon-owner
  • icon_daohang
    .myicon-seat
  • icon_dyqr
    .myicon-dyqr
  • icon_daben
    .myicon-book
  • icon_tel
    .myicon-tel
  • icon_pdf
    .myicon-pdf
  • icon_setting
    .myicon-setting
  • icon_camera
    .myicon-camera
  • icon_invisible
    .myicon-eye-closed
  • icon_visible
    .myicon-eye
  • aboutus
    .myicon-notice
  • add
    .myicon-plus
  • chose
    .myicon-check
  • costomer
    .myicon-user
  • bankcard
    .myicon-card
  • tel
    .myicon-phone
  • check
    .myicon-view
  • search
    .myicon-search
  • amend
    .myicon-edit
  • icon_my
    .myicon-my
  • icon_my_filled
    .myicon-my-active
  • home-filled
    .myicon-home
  • home_filled
    .myicon-home-active
  • singel_choice
    .myicon-check-fill
  • more
    .myicon-more
  • paydate
    .myicon-price
  • piechart-circle-filled
    .myicon-piechart-fill
  • close-circle
    .myicon-close-fill
  • Problem
    .myicon-problem
  • user
    .myicon-user-info
  • carryout-filled
    .myicon-carryout-fill

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="myicon myicon-xxx"></span>

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

  • icon_car
    #myicon-icon_car
  • icon_gpsnoline
    #myicon-signal
  • icon_gpsline
    #myicon-gps
  • icon_time
    #myicon-time-fill
  • icon_xianjie
    #myicon-price-fill
  • icon_shouji
    #myicon-icon_shouji
  • icon_fukuan
    #myicon-price-circle
  • icon_htyl
    #myicon-contract
  • icon_dingbi
    #myicon-ding-coin
  • icon_dingd
    #myicon-ding-dang
  • icon_feiyong
    #myicon-amount
  • icon_dingw
    #myicon-maker
  • icon_pic
    #myicon-pic
  • icon_chezhu
    #myicon-owner
  • icon_daohang
    #myicon-seat
  • icon_dyqr
    #myicon-dyqr
  • icon_daben
    #myicon-book
  • icon_tel
    #myicon-tel
  • icon_pdf
    #myicon-pdf
  • icon_setting
    #myicon-setting
  • icon_camera
    #myicon-camera
  • icon_invisible
    #myicon-eye-closed
  • icon_visible
    #myicon-eye
  • aboutus
    #myicon-notice
  • add
    #myicon-plus
  • chose
    #myicon-check
  • costomer
    #myicon-user
  • bankcard
    #myicon-card
  • tel
    #myicon-phone
  • check
    #myicon-view
  • search
    #myicon-search
  • amend
    #myicon-edit
  • icon_my
    #myicon-my
  • icon_my_filled
    #myicon-my-active
  • home-filled
    #myicon-home
  • home_filled
    #myicon-home-active
  • singel_choice
    #myicon-check-fill
  • more
    #myicon-more
  • paydate
    #myicon-price
  • piechart-circle-filled
    #myicon-piechart-fill
  • close-circle
    #myicon-close-fill
  • Problem
    #myicon-problem
  • user
    #myicon-user-info
  • carryout-filled
    #myicon-carryout-fill

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>