• more
    
  • open
    
  • recording
    
  • screenshot
    
  • share
    
  • ok_line
    
  • room
    
  • roof_placement
    
  • on_call
    
  • user
    
  • wifi_1
    
  • search
    
  • rectangle
    
  • add_to_line
    
  • switch_voice
    
  • close
    
  • return
    
  • calendar
    
  • no_camera
    
  • video
    
  • brush
    
  • video_call
    
  • user_mg
    
  • upload
    
  • edit
    
  • default_screen
    
  • history
    
  • Add to
    
  • wifi_2
    
  • full_screen
    
  • inspect
    
  • sign_out
    
  • wifi
    
  • connect
    
  • delete
    
  • circle
    
  • arrows
    
  • company_mg
    
  • text
    
  • information
    
  • close
    
  • close_line
    
  • camera
    
  • impassable
    
  • microphone
    
  • color
    
  • wifi_3
    
  • no_wifi
    
  • warning
    
  • end_point
    
  • drop_down
    
  • mark_start
    
  • mark_end
    
  • ok
    
  • play
    
  • prohibit
    
  • tips
    
  • expression
    
  • starting_point
    
  • mute_off
    
  • hangup
    
  • microphone
    
  • play_selected
    
  • eraser
    
  • switch
    
  • left
    
  • right
    
  • switch_video_calls
    
  • stop
    
  • zoom_in
    
  • real_time_annotation
    
  • screen_sharing
    
  • split_screen_mode
    
  • zoom_out
    
  • retrun
    
  • thumbtack
    
  • down
    
  • add to
    
  • jpg
    
  • pdf
    
  • suspend
    
  • recording
    
  • contacts
    
  • experience_base
    
  • contacts
    
  • main_window
    
  • volume
    
  • screen_sharing_off
    
  • statistics
    
  • 3d
    
  • warning
    
  • smiling_face
    
  • question
    
  • information
    
  • error
    
  • prohibit
    
  • ok
    
  • stars
    
  • right_rotation
    
  • rotation
    
  • left_rotation
    
  • host
    
  • remove_all_silence
    
  • all_silent
    
  • event_list
    
  • mobile-start
    
  • mobile-jpg
    
  • mobile-mp4
    
  • mobile-rpair
    
  • mobile-pdf
    
  • mobile-participants
    
  • mobile-edit
    
  • mobile-photo
    
  • mobile-attachment
    
  • mobile-classification.
    
  • mobile-end
    
  • mobile-dscribe
    
  • mobile-experience
    
  • mobile-head
    
  • mobile-classification.
    
  • mobile-serch
    
  • pull-down
    
  • number
    
  • radio
    
  • personnel
    
  • classification
    
  • group
    
  • multi-choice
    
  • text
    
  • date
    
  • task
    
  • template
    
  • time
    
  • time+date
    
  • notice
    
  • data
    
  • operations
    
  • task
    
  • remote
    
  • management
    
  • language
    
  • choose
    
  • paintbrush
    
  • arrowhead
    
  • laser
    
  • text
    
  • eraser
    
  • clear-all
    
  • upload
    
  • shape-tool
    
  • rectangle
    
  • positioning
    
  • go-ahead
    
  • next
    
  • last-page
    
  • next2
    
  • previous
    
  • the-first-page
    
  • preview
    

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

  • more
    .icon-more
  • open
    .icon-open
  • recording
    .icon-recording
  • screenshot
    .icon-screenshot
  • share
    .icon-share
  • ok_line
    .icon-ok_line
  • room
    .icon-room
  • roof_placement
    .icon-roof_placement
  • on_call
    .icon-on_call
  • user
    .icon-user
  • wifi_1
    .icon-wifi_1
  • search
    .icon-search
  • rectangle
    .icon-rectangle
  • add_to_line
    .icon-add_to_line
  • switch_voice
    .icon-switch_voice
  • close
    .icon-close
  • return
    .icon-return
  • calendar
    .icon-calendar
  • no_camera
    .icon-no_camera
  • video
    .icon-video
  • brush
    .icon-brush
  • video_call
    .icon-video_call
  • user_mg
    .icon-user_mg
  • upload
    .icon-upload
  • edit
    .icon-edit
  • default_screen
    .icon-default_screen
  • history
    .icon-history
  • Add to
    .icon-Addto
  • wifi_2
    .icon-wifi_2
  • full_screen
    .icon-full_screen
  • inspect
    .icon-inspect
  • sign_out
    .icon-sign_out
  • wifi
    .icon-wifi
  • connect
    .icon-connect
  • delete
    .icon-delete
  • circle
    .icon-circle
  • arrows
    .icon-arrows
  • company_mg
    .icon-company_mg
  • text
    .icon-text
  • information
    .icon-information
  • close
    .icon-close1
  • close_line
    .icon-close_line
  • camera
    .icon-camera
  • impassable
    .icon-impassable
  • microphone
    .icon-microphone
  • color
    .icon-color
  • wifi_3
    .icon-wifi_3
  • no_wifi
    .icon-no_wifi
  • warning
    .icon-warning
  • end_point
    .icon-end_point
  • drop_down
    .icon-drop_down
  • mark_start
    .icon-mark_start
  • mark_end
    .icon-mark_end
  • ok
    .icon-ok
  • play
    .icon-play
  • prohibit
    .icon-prohibit
  • tips
    .icon-tips
  • expression
    .icon-expression
  • starting_point
    .icon-starting_point
  • mute_off
    .icon-mute_off
  • hangup
    .icon-hangup
  • microphone
    .icon-microphone1
  • play_selected
    .icon-play_selected
  • eraser
    .icon-eraser
  • switch
    .icon-switch
  • left
    .icon-left
  • right
    .icon-right
  • switch_video_calls
    .icon-switch_video_calls
  • stop
    .icon-stop
  • zoom_in
    .icon-zoom_in
  • real_time_annotation
    .icon-real_time_annotation
  • screen_sharing
    .icon-screen_sharing
  • split_screen_mode
    .icon-split_screen_mode
  • zoom_out
    .icon-zoom_out
  • retrun
    .icon-retrun
  • thumbtack
    .icon-thumbtack
  • down
    .icon-down
  • add to
    .icon-Addto1
  • jpg
    .icon-jpg
  • pdf
    .icon-pdf
  • suspend
    .icon-suspend
  • recording
    .icon-recording1
  • contacts
    .icon-contacts
  • experience_base
    .icon-experience_base
  • contacts
    .icon-contacts1
  • main_window
    .icon-mainwindow
  • volume
    .icon-volume
  • screen_sharing_off
    .icon-screen_sharing_off
  • statistics
    .icon-statistics
  • 3d
    .icon-3d
  • warning
    .icon-warning1
  • smiling_face
    .icon-smiling_face
  • question
    .icon-question_fuben
  • information
    .icon-information1
  • error
    .icon-error
  • prohibit
    .icon-prohibit1
  • ok
    .icon-ok1
  • stars
    .icon-stars
  • right_rotation
    .icon-right_rotation
  • rotation
    .icon-rotation
  • left_rotation
    .icon-left_rotation
  • host
    .icon-remove_all_silence1
  • remove_all_silence
    .icon-remove_all_silence
  • all_silent
    .icon-all_silent
  • event_list
    .icon-event_list
  • mobile-start
    .icon-mobile-start
  • mobile-jpg
    .icon-mobile-jpg
  • mobile-mp4
    .icon-mobile-mp4
  • mobile-rpair
    .icon-mobile-rpair
  • mobile-pdf
    .icon-mobile-pdf
  • mobile-participants
    .icon-mobile-participants
  • mobile-edit
    .icon-mobile-edit
  • mobile-photo
    .icon-mobile-photo
  • mobile-attachment
    .icon-mobile-attachment
  • mobile-classification.
    .icon-mobile-classification
  • mobile-end
    .icon-mobile-end
  • mobile-dscribe
    .icon-mobile-dscribe
  • mobile-experience
    .icon-mobile-experience
  • mobile-head
    .icon-mobile-head
  • mobile-classification.
    .icon-mobile-classification1
  • mobile-serch
    .icon-mobile-serch
  • pull-down
    .icon-pull-down
  • number
    .icon-number
  • radio
    .icon-radio
  • personnel
    .icon-personnel
  • classification
    .icon-classification
  • group
    .icon-group
  • multi-choice
    .icon-multi-choice
  • text
    .icon-text1
  • date
    .icon-date
  • task
    .icon-task
  • template
    .icon-template
  • time
    .icon-time
  • time+date
    .icon-timedate
  • notice
    .icon-notice
  • data
    .icon-data
  • operations
    .icon-operations
  • task
    .icon-task1
  • remote
    .icon-remote
  • management
    .icon-management
  • language
    .icon-language
  • choose
    .icon-choose
  • paintbrush
    .icon-paintbrush
  • arrowhead
    .icon-arrowhead
  • laser
    .icon-laser
  • text
    .icon-text2
  • eraser
    .icon-eraser1
  • clear-all
    .icon-clear-all
  • upload
    .icon-upload1
  • shape-tool
    .icon-shape-tool
  • rectangle
    .icon-rectangle1
  • positioning
    .icon-positioning
  • go-ahead
    .icon-go-ahead
  • next
    .icon-next
  • last-page
    .icon-last-page
  • next2
    .icon-next2
  • previous
    .icon-previous
  • the-first-page
    .icon-the-first-page
  • preview
    .icon-preview

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont icon-xxx"></span>

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

  • more
    #icon-more
  • open
    #icon-open
  • recording
    #icon-recording
  • screenshot
    #icon-screenshot
  • share
    #icon-share
  • ok_line
    #icon-ok_line
  • room
    #icon-room
  • roof_placement
    #icon-roof_placement
  • on_call
    #icon-on_call
  • user
    #icon-user
  • wifi_1
    #icon-wifi_1
  • search
    #icon-search
  • rectangle
    #icon-rectangle
  • add_to_line
    #icon-add_to_line
  • switch_voice
    #icon-switch_voice
  • close
    #icon-close
  • return
    #icon-return
  • calendar
    #icon-calendar
  • no_camera
    #icon-no_camera
  • video
    #icon-video
  • brush
    #icon-brush
  • video_call
    #icon-video_call
  • user_mg
    #icon-user_mg
  • upload
    #icon-upload
  • edit
    #icon-edit
  • default_screen
    #icon-default_screen
  • history
    #icon-history
  • Add to
    #icon-Addto
  • wifi_2
    #icon-wifi_2
  • full_screen
    #icon-full_screen
  • inspect
    #icon-inspect
  • sign_out
    #icon-sign_out
  • wifi
    #icon-wifi
  • connect
    #icon-connect
  • delete
    #icon-delete
  • circle
    #icon-circle
  • arrows
    #icon-arrows
  • company_mg
    #icon-company_mg
  • text
    #icon-text
  • information
    #icon-information
  • close
    #icon-close1
  • close_line
    #icon-close_line
  • camera
    #icon-camera
  • impassable
    #icon-impassable
  • microphone
    #icon-microphone
  • color
    #icon-color
  • wifi_3
    #icon-wifi_3
  • no_wifi
    #icon-no_wifi
  • warning
    #icon-warning
  • end_point
    #icon-end_point
  • drop_down
    #icon-drop_down
  • mark_start
    #icon-mark_start
  • mark_end
    #icon-mark_end
  • ok
    #icon-ok
  • play
    #icon-play
  • prohibit
    #icon-prohibit
  • tips
    #icon-tips
  • expression
    #icon-expression
  • starting_point
    #icon-starting_point
  • mute_off
    #icon-mute_off
  • hangup
    #icon-hangup
  • microphone
    #icon-microphone1
  • play_selected
    #icon-play_selected
  • eraser
    #icon-eraser
  • switch
    #icon-switch
  • left
    #icon-left
  • right
    #icon-right
  • switch_video_calls
    #icon-switch_video_calls
  • stop
    #icon-stop
  • zoom_in
    #icon-zoom_in
  • real_time_annotation
    #icon-real_time_annotation
  • screen_sharing
    #icon-screen_sharing
  • split_screen_mode
    #icon-split_screen_mode
  • zoom_out
    #icon-zoom_out
  • retrun
    #icon-retrun
  • thumbtack
    #icon-thumbtack
  • down
    #icon-down
  • add to
    #icon-Addto1
  • jpg
    #icon-jpg
  • pdf
    #icon-pdf
  • suspend
    #icon-suspend
  • recording
    #icon-recording1
  • contacts
    #icon-contacts
  • experience_base
    #icon-experience_base
  • contacts
    #icon-contacts1
  • main_window
    #icon-mainwindow
  • volume
    #icon-volume
  • screen_sharing_off
    #icon-screen_sharing_off
  • statistics
    #icon-statistics
  • 3d
    #icon-3d
  • warning
    #icon-warning1
  • smiling_face
    #icon-smiling_face
  • question
    #icon-question_fuben
  • information
    #icon-information1
  • error
    #icon-error
  • prohibit
    #icon-prohibit1
  • ok
    #icon-ok1
  • stars
    #icon-stars
  • right_rotation
    #icon-right_rotation
  • rotation
    #icon-rotation
  • left_rotation
    #icon-left_rotation
  • host
    #icon-remove_all_silence1
  • remove_all_silence
    #icon-remove_all_silence
  • all_silent
    #icon-all_silent
  • event_list
    #icon-event_list
  • mobile-start
    #icon-mobile-start
  • mobile-jpg
    #icon-mobile-jpg
  • mobile-mp4
    #icon-mobile-mp4
  • mobile-rpair
    #icon-mobile-rpair
  • mobile-pdf
    #icon-mobile-pdf
  • mobile-participants
    #icon-mobile-participants
  • mobile-edit
    #icon-mobile-edit
  • mobile-photo
    #icon-mobile-photo
  • mobile-attachment
    #icon-mobile-attachment
  • mobile-classification.
    #icon-mobile-classification
  • mobile-end
    #icon-mobile-end
  • mobile-dscribe
    #icon-mobile-dscribe
  • mobile-experience
    #icon-mobile-experience
  • mobile-head
    #icon-mobile-head
  • mobile-classification.
    #icon-mobile-classification1
  • mobile-serch
    #icon-mobile-serch
  • pull-down
    #icon-pull-down
  • number
    #icon-number
  • radio
    #icon-radio
  • personnel
    #icon-personnel
  • classification
    #icon-classification
  • group
    #icon-group
  • multi-choice
    #icon-multi-choice
  • text
    #icon-text1
  • date
    #icon-date
  • task
    #icon-task
  • template
    #icon-template
  • time
    #icon-time
  • time+date
    #icon-timedate
  • notice
    #icon-notice
  • data
    #icon-data
  • operations
    #icon-operations
  • task
    #icon-task1
  • remote
    #icon-remote
  • management
    #icon-management
  • language
    #icon-language
  • choose
    #icon-choose
  • paintbrush
    #icon-paintbrush
  • arrowhead
    #icon-arrowhead
  • laser
    #icon-laser
  • text
    #icon-text2
  • eraser
    #icon-eraser1
  • clear-all
    #icon-clear-all
  • upload
    #icon-upload1
  • shape-tool
    #icon-shape-tool
  • rectangle
    #icon-rectangle1
  • positioning
    #icon-positioning
  • go-ahead
    #icon-go-ahead
  • next
    #icon-next
  • last-page
    #icon-last-page
  • next2
    #icon-next2
  • previous
    #icon-previous
  • the-first-page
    #icon-the-first-page
  • preview
    #icon-preview

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>