• consultation
    
  • editor-2
    
  • more
    
  • describe1
    
  • comments1
    
  • editor1
    
  • delete2
    
  • notes
    
  • message
    
  • people1
    
  • comments
    
  • describe
    
  • icon_icon
    
  • icon_uncheck
    
  • icon_room2
    
  • icon_repeat
    
  • icon_days31
    
  • icon_days30
    
  • icon_days29
    
  • icon_days28
    
  • icon_days27
    
  • icon_days26
    
  • icon_days25
    
  • icon_days24
    
  • icon_days23
    
  • icon_days22
    
  • icon_days21
    
  • icon_days20
    
  • icon_days19
    
  • icon_days18
    
  • icon_days17
    
  • icon_days16
    
  • icon_days15
    
  • icon_days14
    
  • icon_days13
    
  • icon_days12
    
  • icon_days11
    
  • icon_days10
    
  • icon_days09
    
  • icon_days08
    
  • icon_days07
    
  • icon_days06
    
  • icon_days05
    
  • icon_days04
    
  • icon_days03
    
  • icon_days02
    
  • icon_days01
    
  • icon_Calendar box2
    
  • icon_Calendar box
    
  • right
    
  • icon_ delete
    
  • icon_room
    
  • icon_facility
    
  • icon_ floor
    
  • icon_setting
    
  • icon_share
    
  • icon_data
    
  • icon_description
    
  • icon_ task
    
  • icon_phone
    
  • icon_time
    
  • icon_meet
    
  • icon_location
    
  • icon_camera
    
  • icon_app
    
  • icon_add2
    
  • icon_team
    
  • icon_more
    
  • icon_ slide
    
  • icon_ok
    
  • icon_close
    
  • icon_expand
    
  • icon_ fold
    
  • icon_Pack up
    
  • icon_open
    
  • icon_back
    
  • icon_add
    
  • icon_conflict
    
  • icon_search
    
  • icon_ dynamic2
    
  • icon_top2
    
  • icon_no Agreed2
    
  • icon_city
    
  • icon_Agreed2
    
  • icon_ building
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用 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"。

  • consultation
    .iconconsultation
  • editor-2
    .iconeditor-2
  • more
    .iconmore
  • describe1
    .icondescribe11
  • comments1
    .iconcomments1
  • editor1
    .iconeditor1
  • delete2
    .icondelete2
  • notes
    .iconnotes1
  • message
    .iconmessage
  • people1
    .iconpeople1
  • comments
    .iconcomments
  • describe
    .icondescribe
  • icon_icon
    .iconicon_icon
  • icon_uncheck
    .iconicon_uncheck
  • icon_room2
    .iconicon_room
  • icon_repeat
    .iconicon_repeat1
  • icon_days31
    .iconicon_days31
  • icon_days30
    .iconicon_days30
  • icon_days29
    .iconicon_days29
  • icon_days28
    .iconicon_days28
  • icon_days27
    .iconicon_days27
  • icon_days26
    .iconicon_days26
  • icon_days25
    .iconicon_days25
  • icon_days24
    .iconicon_days24
  • icon_days23
    .iconicon_days23
  • icon_days22
    .iconicon_days22
  • icon_days21
    .iconicon_days21
  • icon_days20
    .iconicon_days20
  • icon_days19
    .iconicon_days19
  • icon_days18
    .iconicon_days18
  • icon_days17
    .iconicon_days17
  • icon_days16
    .iconicon_days16
  • icon_days15
    .iconicon_days15
  • icon_days14
    .iconicon_days14
  • icon_days13
    .iconicon_days13
  • icon_days12
    .iconicon_days12
  • icon_days11
    .iconicon_days11
  • icon_days10
    .iconicon_days10
  • icon_days09
    .iconicon_days9
  • icon_days08
    .iconicon_days8
  • icon_days07
    .iconicon_days7
  • icon_days06
    .iconicon_days6
  • icon_days05
    .iconicon_days5
  • icon_days04
    .iconicon_days4
  • icon_days03
    .iconicon_days3
  • icon_days02
    .iconicon_days2
  • icon_days01
    .iconicon_days1
  • icon_Calendar box2
    .iconicon_Calendarbox1
  • icon_Calendar box
    .iconicon_Calendarbox
  • right
    .iconright
  • icon_ delete
    .iconicon_delete
  • icon_room
    .iconicon_room1
  • icon_facility
    .iconicon_facility1
  • icon_ floor
    .iconicon_floor1
  • icon_setting
    .iconicon_setting1
  • icon_share
    .iconicon_share1
  • icon_data
    .iconicon_data
  • icon_description
    .iconicon_description1
  • icon_ task
    .iconicon_task1
  • icon_phone
    .iconicon_phone1
  • icon_time
    .iconicon_time1
  • icon_meet
    .iconicon_meet
  • icon_location
    .iconicon_location1
  • icon_camera
    .iconicon_camera1
  • icon_app
    .iconicon_app1
  • icon_add2
    .iconicon_add1
  • icon_team
    .iconicon_team
  • icon_more
    .iconicon_more1
  • icon_ slide
    .iconicon_slide
  • icon_ok
    .iconicon_ok
  • icon_close
    .iconicon_close
  • icon_expand
    .iconicon_expand
  • icon_ fold
    .iconicon_fold
  • icon_Pack up
    .iconicon_Packup
  • icon_open
    .iconicon_open
  • icon_back
    .iconicon_back
  • icon_add
    .iconicon_add
  • icon_conflict
    .iconicon_conflict
  • icon_search
    .iconicon_search
  • icon_ dynamic2
    .iconicon_dynamic
  • icon_top2
    .iconicon_top1
  • icon_no Agreed2
    .iconicon_noAgreed1
  • icon_city
    .iconicon_city
  • icon_Agreed2
    .iconicon_Agreed1
  • icon_ building
    .iconicon_building

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

<span class="iconfont iconxxx"></span>

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

  • consultation
    #iconconsultation
  • editor-2
    #iconeditor-2
  • more
    #iconmore
  • describe1
    #icondescribe11
  • comments1
    #iconcomments1
  • editor1
    #iconeditor1
  • delete2
    #icondelete2
  • notes
    #iconnotes1
  • message
    #iconmessage
  • people1
    #iconpeople1
  • comments
    #iconcomments
  • describe
    #icondescribe
  • icon_icon
    #iconicon_icon
  • icon_uncheck
    #iconicon_uncheck
  • icon_room2
    #iconicon_room
  • icon_repeat
    #iconicon_repeat1
  • icon_days31
    #iconicon_days31
  • icon_days30
    #iconicon_days30
  • icon_days29
    #iconicon_days29
  • icon_days28
    #iconicon_days28
  • icon_days27
    #iconicon_days27
  • icon_days26
    #iconicon_days26
  • icon_days25
    #iconicon_days25
  • icon_days24
    #iconicon_days24
  • icon_days23
    #iconicon_days23
  • icon_days22
    #iconicon_days22
  • icon_days21
    #iconicon_days21
  • icon_days20
    #iconicon_days20
  • icon_days19
    #iconicon_days19
  • icon_days18
    #iconicon_days18
  • icon_days17
    #iconicon_days17
  • icon_days16
    #iconicon_days16
  • icon_days15
    #iconicon_days15
  • icon_days14
    #iconicon_days14
  • icon_days13
    #iconicon_days13
  • icon_days12
    #iconicon_days12
  • icon_days11
    #iconicon_days11
  • icon_days10
    #iconicon_days10
  • icon_days09
    #iconicon_days9
  • icon_days08
    #iconicon_days8
  • icon_days07
    #iconicon_days7
  • icon_days06
    #iconicon_days6
  • icon_days05
    #iconicon_days5
  • icon_days04
    #iconicon_days4
  • icon_days03
    #iconicon_days3
  • icon_days02
    #iconicon_days2
  • icon_days01
    #iconicon_days1
  • icon_Calendar box2
    #iconicon_Calendarbox1
  • icon_Calendar box
    #iconicon_Calendarbox
  • right
    #iconright
  • icon_ delete
    #iconicon_delete
  • icon_room
    #iconicon_room1
  • icon_facility
    #iconicon_facility1
  • icon_ floor
    #iconicon_floor1
  • icon_setting
    #iconicon_setting1
  • icon_share
    #iconicon_share1
  • icon_data
    #iconicon_data
  • icon_description
    #iconicon_description1
  • icon_ task
    #iconicon_task1
  • icon_phone
    #iconicon_phone1
  • icon_time
    #iconicon_time1
  • icon_meet
    #iconicon_meet
  • icon_location
    #iconicon_location1
  • icon_camera
    #iconicon_camera1
  • icon_app
    #iconicon_app1
  • icon_add2
    #iconicon_add1
  • icon_team
    #iconicon_team
  • icon_more
    #iconicon_more1
  • icon_ slide
    #iconicon_slide
  • icon_ok
    #iconicon_ok
  • icon_close
    #iconicon_close
  • icon_expand
    #iconicon_expand
  • icon_ fold
    #iconicon_fold
  • icon_Pack up
    #iconicon_Packup
  • icon_open
    #iconicon_open
  • icon_back
    #iconicon_back
  • icon_add
    #iconicon_add
  • icon_conflict
    #iconicon_conflict
  • icon_search
    #iconicon_search
  • icon_ dynamic2
    #iconicon_dynamic
  • icon_top2
    #iconicon_top1
  • icon_no Agreed2
    #iconicon_noAgreed1
  • icon_city
    #iconicon_city
  • icon_Agreed2
    #iconicon_Agreed1
  • icon_ building
    #iconicon_building

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>