• cast
    
  • fast_rewind
    
  • pause_circle_filled
    
  • play_arrow
    
  • play_circle_outline
    
  • skip_next
    
  • pause_circle_outline
    
  • repeat
    
  • skip_previous
    
  • shuffle
    
  • fast_forward
    
  • airplay
    
  • play_circle_filled
    
  • comment
    
  • comment_plus
    
  • add_to_queue
    
  • comment_minus
    
  • comment_check
    
  • list_check
    
  • hide
    
  • copy
    
  • list_minus
    
  • minus
    
  • list_ul
    
  • edit
    
  • minus_circle
    
  • move
    
  • list_ol
    
  • move_vertical
    
  • list_plus
    
  • minus_circle_outline
    
  • plus
    
  • minus_square
    
  • move_horizontal
    
  • plus_square
    
  • search
    
  • search_small_minus
    
  • select_multiple
    
  • search_small
    
  • plus_circle_outline
    
  • show
    
  • plus_circle
    
  • text_align_justify
    
  • search_small_plus
    
  • text_align_center
    
  • text_align_right
    
  • text_align_left
    
  • laptop
    
  • monitor
    
  • tablet
    
  • mobile
    
  • mobile_alt
    
  • devices
    
  • bar_right
    
  • bar_top
    
  • bar_bottom
    
  • transfer
    
  • terminal
    
  • code
    
  • bar_left
    
  • cylinder
    
  • window_close
    
  • window_check
    
  • window_terminal
    
  • window_code_block
    
  • window
    
  • window_sidebar
    
  • data
    
  • user_check
    
  • id_card
    
  • user
    
  • user_circle
    
  • user_minus
    
  • user_x
    
  • user_plus
    
  • user_voice
    
  • user_pin
    
  • calendar_edit
    
  • calendar
    
  • calendar_x
    
  • calendar_calendar
    
  • calendar_check
    
  • calendar_week
    
  • calendar_minus
    
  • calendar_plus
    
  • calendar_event
    
  • trending_down
    
  • Bar_chart_horizontal
    
  • bar_chart_square
    
  • pie_chart_75
    
  • pie_chart_outline_25
    
  • pie_chart_50
    
  • pie_chart_outline
    
  • line_chart_up
    
  • trending_up
    
  • bar_chart
    
  • line_chart_down
    
  • pie_chart_25
    
  • bar_chart_alt
    
  • doughnut_chart
    
  • menu_duo
    
  • menu_alt_05
    
  • more_horizontal
    
  • menu_alt_02
    
  • more_vertical
    
  • dashboard_02
    
  • dashboard
    
  • grid
    
  • grid_small
    
  • grid_big
    
  • grid_small_round
    
  • close_big
    
  • grid_horizontal
    
  • grid_horizontal_round
    
  • grid_round
    
  • grid_big_round
    
  • close_small
    
  • grid_vertical_round
    
  • hamburger
    
  • grid_vertical
    
  • menu_alt_04
    
  • menu_alt_03
    
  • menu_alt_01
    
  • error
    
  • info_circle
    
  • info_circle_outline
    
  • info_square
    
  • warning
    
  • error_outline
    
  • warning_outline
    
  • info_square_outline
    
  • notification_active
    
  • notification_outline_plus
    
  • notification_outline_minus
    
  • notification_deactivated
    
  • notification_dot
    
  • notification
    
  • notification_outline
    
  • notification_outline_dot
    
  • notification_plus
    
  • notification_minus
    
  • dot_xs
    
  • dot_l
    
  • dot_xl
    
  • dot_m
    
  • dot_s
    
  • css3
    
  • app_store
    
  • coolicons
    
  • discord
    
  • apple
    
  • behance
    
  • facebook
    
  • html5
    
  • google
    
  • LinkedIn
    
  • dropbox
    
  • linkpath
    
  • Dribbble
    
  • github
    
  • Figma
    
  • javascript
    
  • paypal
    
  • instagram
    
  • play_store
    
  • slack
    
  • messenger
    
  • trello
    
  • snapchat
    
  • stack_overflow
    
  • Adobe_XD
    
  • spectrum
    
  • unsplash
    
  • invision
    
  • spotify
    
  • Twitter
    
  • youtube
    
  • Sketch
    
  • reddit
    
  • cloud_check
    
  • file_blank
    
  • folder_open
    
  • cloud_off
    
  • note
    
  • file_minus
    
  • cloud_up
    
  • folder_plus
    
  • cloud
    
  • cloud_outline
    
  • cloud_down
    
  • file_new
    
  • file_find
    
  • folder
    
  • folder_minus
    
  • cloud_close
    
  • link
    
  • slider_two
    
  • unlink
    
  • trash_empty
    
  • mail
    
  • settings_filled
    
  • refresh
    
  • sad
    
  • radio
    
  • slider_three
    
  • done
    
  • trash_full
    
  • alarm
    
  • alarm_add
    
  • bulb
    
  • checkbox_square
    
  • clock
    
  • circle_checked
    
  • Cokie
    
  • circle_check_outline
    
  • confused
    
  • done_all
    
  • external_link
    
  • Color
    
  • circle_check
    
  • download_done
    
  • help_circle
    
  • happy
    
  • help_circle_outline
    
  • Flag_outline
    
  • checkbox_checked
    
  • mail_open
    
  • credit_card
    
  • location
    
  • credit_card_alt
    
  • download
    
  • Flag_fill
    
  • layers_alt
    
  • heart_fill
    
  • command
    
  • log_out
    
  • checkbox
    
  • phone
    
  • heart_outline
    
  • radio_filled
    
  • label
    
  • image_alt
    
  • help_questionmark
    
  • share_outline
    
  • settings
    
  • exit
    
  • layers
    
  • loading
    
  • link_circular
    
  • share
    
  • stopwatch
    
  • off_outline_close
    
  • moon
    
  • settings_future
    
  • location_outline
    
  • off_close
    
  • map
    
  • path
    
  • slider_one
    
  • sun
    
  • refresh_two
    
  • chevron_down
    
  • caret_down
    
  • chevron_big_up
    
  • caret_up
    
  • chevron_right
    
  • chevron_duo_up
    
  • circle_chevron_down
    
  • chevron_left
    
  • chevron_big_right
    
  • circle_left
    
  • chevron_up
    
  • circle_chevron_up
    
  • chevron_big_left
    
  • circle_chevron_left
    
  • chevron_big_down
    
  • circle_right
    
  • first_page
    
  • circle_chevron_right
    
  • long_right
    
  • long_up_left
    
  • long_bottom_down
    
  • long_down
    
  • chevron_duo_left
    
  • long_left
    
  • chevron_duo_down
    
  • small_long_left
    
  • shrink
    
  • last_page
    
  • chevron_duo_right
    
  • short_down
    
  • short_right
    
  • sub_right
    
  • short_up
    
  • small_long_right
    
  • circle_up
    
  • small_long_up
    
  • short_left
    
  • sub_left
    
  • thin_big_left
    
  • thin_big_up
    
  • expand
    
  • circle_down
    
  • long_bottom_up
    
  • thin_small_up
    
  • thin_big_down
    
  • thin_small_left
    
  • caret_right
    
  • thin_small_down
    
  • long_up
    
  • thin_long_up
    
  • thin_big_right
    
  • unfold_less
    
  • small_long_down
    
  • unfold_more
    
  • thin_small_right
    
  • thin_long_right
    
  • caret_left
    
  • long_up_right
    
  • thin_long_down
    
  • thin_long_left
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • cast
    .zebra-icon-cast
  • fast_rewind
    .zebra-icon-fast_rewind
  • pause_circle_filled
    .zebra-icon-pause_circle_filled
  • play_arrow
    .zebra-icon-play_arrow
  • play_circle_outline
    .zebra-icon-play_circle_outline
  • skip_next
    .zebra-icon-skip_next
  • pause_circle_outline
    .zebra-icon-pause_circle_outline
  • repeat
    .zebra-icon-repeat
  • skip_previous
    .zebra-icon-skip_previous
  • shuffle
    .zebra-icon-shuffle
  • fast_forward
    .zebra-icon-fast_forward
  • airplay
    .zebra-icon-airplay
  • play_circle_filled
    .zebra-icon-play_circle_filled
  • comment
    .zebra-icon-comment
  • comment_plus
    .zebra-icon-comment_plus
  • add_to_queue
    .zebra-icon-add_to_queue
  • comment_minus
    .zebra-icon-comment_minus
  • comment_check
    .zebra-icon-comment_check
  • list_check
    .zebra-icon-list_check
  • hide
    .zebra-icon-hide
  • copy
    .zebra-icon-copy
  • list_minus
    .zebra-icon-list_minus
  • minus
    .zebra-icon-minus
  • list_ul
    .zebra-icon-list_ul
  • edit
    .zebra-icon-edit
  • minus_circle
    .zebra-icon-minus_circle
  • move
    .zebra-icon-move
  • list_ol
    .zebra-icon-list_ol
  • move_vertical
    .zebra-icon-move_vertical
  • list_plus
    .zebra-icon-list_plus
  • minus_circle_outline
    .zebra-icon-minus_circle_outline
  • plus
    .zebra-icon-plus
  • minus_square
    .zebra-icon-minus_square
  • move_horizontal
    .zebra-icon-move_horizontal
  • plus_square
    .zebra-icon-plus_square
  • search
    .zebra-icon-search
  • search_small_minus
    .zebra-icon-search_small_minus
  • select_multiple
    .zebra-icon-select_multiple
  • search_small
    .zebra-icon-search_small
  • plus_circle_outline
    .zebra-icon-plus_circle_outline
  • show
    .zebra-icon-show
  • plus_circle
    .zebra-icon-plus_circle
  • text_align_justify
    .zebra-icon-text_align_justify
  • search_small_plus
    .zebra-icon-search_small_plus
  • text_align_center
    .zebra-icon-text_align_center
  • text_align_right
    .zebra-icon-text_align_right
  • text_align_left
    .zebra-icon-text_align_left
  • laptop
    .zebra-icon-laptop
  • monitor
    .zebra-icon-monitor
  • tablet
    .zebra-icon-tablet
  • mobile
    .zebra-icon-mobile
  • mobile_alt
    .zebra-icon-mobile_alt
  • devices
    .zebra-icon-devices
  • bar_right
    .zebra-icon-bar_right
  • bar_top
    .zebra-icon-bar_top
  • bar_bottom
    .zebra-icon-bar_bottom
  • transfer
    .zebra-icon-transfer
  • terminal
    .zebra-icon-terminal
  • code
    .zebra-icon-code
  • bar_left
    .zebra-icon-bar_left
  • cylinder
    .zebra-icon-cylinder
  • window_close
    .zebra-icon-window_close
  • window_check
    .zebra-icon-window_check
  • window_terminal
    .zebra-icon-window_terminal
  • window_code_block
    .zebra-icon-window_code_block
  • window
    .zebra-icon-window
  • window_sidebar
    .zebra-icon-window_sidebar
  • data
    .zebra-icon-data
  • user_check
    .zebra-icon-user_check
  • id_card
    .zebra-icon-id_card
  • user
    .zebra-icon-user
  • user_circle
    .zebra-icon-user_circle
  • user_minus
    .zebra-icon-user_minus
  • user_x
    .zebra-icon-user_x
  • user_plus
    .zebra-icon-user_plus
  • user_voice
    .zebra-icon-user_voice
  • user_pin
    .zebra-icon-user_pin
  • calendar_edit
    .zebra-icon-calendar_edit
  • calendar
    .zebra-icon-calendar
  • calendar_x
    .zebra-icon-calendar_x
  • calendar_calendar
    .zebra-icon-calendar_calendar
  • calendar_check
    .zebra-icon-calendar_check
  • calendar_week
    .zebra-icon-calendar_week
  • calendar_minus
    .zebra-icon-calendar_minus
  • calendar_plus
    .zebra-icon-calendar_plus
  • calendar_event
    .zebra-icon-calendar_event
  • trending_down
    .zebra-icon-trending_down
  • Bar_chart_horizontal
    .zebra-icon-Bar_chart_horizontal
  • bar_chart_square
    .zebra-icon-bar_chart_square
  • pie_chart_75
    .zebra-icon-pie_chart_75
  • pie_chart_outline_25
    .zebra-icon-pie_chart_outline_25
  • pie_chart_50
    .zebra-icon-pie_chart_50
  • pie_chart_outline
    .zebra-icon-pie_chart_outline
  • line_chart_up
    .zebra-icon-line_chart_up
  • trending_up
    .zebra-icon-trending_up
  • bar_chart
    .zebra-icon-bar_chart
  • line_chart_down
    .zebra-icon-line_chart_down
  • pie_chart_25
    .zebra-icon-pie_chart_25
  • bar_chart_alt
    .zebra-icon-bar_chart_alt
  • doughnut_chart
    .zebra-icon-doughnut_chart
  • menu_duo
    .zebra-icon-menu_duo
  • menu_alt_05
    .zebra-icon-menu_alt_05
  • more_horizontal
    .zebra-icon-more_horizontal
  • menu_alt_02
    .zebra-icon-menu_alt_02
  • more_vertical
    .zebra-icon-more_vertical
  • dashboard_02
    .zebra-icon-dashboard_02
  • dashboard
    .zebra-icon-dashboard
  • grid
    .zebra-icon-grid
  • grid_small
    .zebra-icon-grid_small
  • grid_big
    .zebra-icon-grid_big
  • grid_small_round
    .zebra-icon-grid_small_round
  • close_big
    .zebra-icon-close_big
  • grid_horizontal
    .zebra-icon-grid_horizontal
  • grid_horizontal_round
    .zebra-icon-grid_horizontal_round
  • grid_round
    .zebra-icon-grid_round
  • grid_big_round
    .zebra-icon-grid_big_round
  • close_small
    .zebra-icon-close_small
  • grid_vertical_round
    .zebra-icon-grid_vertical_round
  • hamburger
    .zebra-icon-hamburger
  • grid_vertical
    .zebra-icon-grid_vertical
  • menu_alt_04
    .zebra-icon-menu_alt_04
  • menu_alt_03
    .zebra-icon-menu_alt_03
  • menu_alt_01
    .zebra-icon-menu_alt_01
  • error
    .zebra-icon-error
  • info_circle
    .zebra-icon-info_circle
  • info_circle_outline
    .zebra-icon-info_circle_outline
  • info_square
    .zebra-icon-info_square
  • warning
    .zebra-icon-warning
  • error_outline
    .zebra-icon-error_outline
  • warning_outline
    .zebra-icon-warning_outline
  • info_square_outline
    .zebra-icon-info_square_outline
  • notification_active
    .zebra-icon-notification_active
  • notification_outline_plus
    .zebra-icon-notification_outline_plus
  • notification_outline_minus
    .zebra-icon-notification_outline_minus
  • notification_deactivated
    .zebra-icon-notification_deactivated
  • notification_dot
    .zebra-icon-notification_dot
  • notification
    .zebra-icon-notification
  • notification_outline
    .zebra-icon-notification_outline
  • notification_outline_dot
    .zebra-icon-notification_outline_dot
  • notification_plus
    .zebra-icon-notification_plus
  • notification_minus
    .zebra-icon-notification_minus
  • dot_xs
    .zebra-icon-dot_xs
  • dot_l
    .zebra-icon-dot_l
  • dot_xl
    .zebra-icon-dot_xl
  • dot_m
    .zebra-icon-dot_m
  • dot_s
    .zebra-icon-dot_s
  • css3
    .zebra-icon-css3
  • app_store
    .zebra-icon-app_store
  • coolicons
    .zebra-icon-coolicons
  • discord
    .zebra-icon-discord
  • apple
    .zebra-icon-apple
  • behance
    .zebra-icon-behance
  • facebook
    .zebra-icon-facebook
  • html5
    .zebra-icon-html5
  • google
    .zebra-icon-google
  • LinkedIn
    .zebra-icon-LinkedIn
  • dropbox
    .zebra-icon-dropbox
  • linkpath
    .zebra-icon-linkpath
  • Dribbble
    .zebra-icon-Dribbble
  • github
    .zebra-icon-github
  • Figma
    .zebra-icon-Figma
  • javascript
    .zebra-icon-javascript
  • paypal
    .zebra-icon-paypal
  • instagram
    .zebra-icon-instagram
  • play_store
    .zebra-icon-play_store
  • slack
    .zebra-icon-slack
  • messenger
    .zebra-icon-messenger
  • trello
    .zebra-icon-trello
  • snapchat
    .zebra-icon-snapchat
  • stack_overflow
    .zebra-icon-stack_overflow
  • Adobe_XD
    .zebra-icon-Adobe_XD
  • spectrum
    .zebra-icon-spectrum
  • unsplash
    .zebra-icon-unsplash
  • invision
    .zebra-icon-invision
  • spotify
    .zebra-icon-spotify
  • Twitter
    .zebra-icon-Twitter
  • youtube
    .zebra-icon-youtube
  • Sketch
    .zebra-icon-Sketch
  • reddit
    .zebra-icon-reddit
  • cloud_check
    .zebra-icon-cloud_check
  • file_blank
    .zebra-icon-file_blank
  • folder_open
    .zebra-icon-folder_open
  • cloud_off
    .zebra-icon-cloud_off
  • note
    .zebra-icon-note
  • file_minus
    .zebra-icon-file_minus
  • cloud_up
    .zebra-icon-cloud_up
  • folder_plus
    .zebra-icon-folder_plus
  • cloud
    .zebra-icon-cloud
  • cloud_outline
    .zebra-icon-cloud_outline
  • cloud_down
    .zebra-icon-cloud_down
  • file_new
    .zebra-icon-file_new
  • file_find
    .zebra-icon-file_find
  • folder
    .zebra-icon-folder
  • folder_minus
    .zebra-icon-folder_minus
  • cloud_close
    .zebra-icon-cloud_close
  • link
    .zebra-icon-link
  • slider_two
    .zebra-icon-slider_02
  • unlink
    .zebra-icon-unlink
  • trash_empty
    .zebra-icon-trash_empty
  • mail
    .zebra-icon-mail
  • settings_filled
    .zebra-icon-settings_filled
  • refresh
    .zebra-icon-refresh
  • sad
    .zebra-icon-sad
  • radio
    .zebra-icon-radio
  • slider_three
    .zebra-icon-slider_03
  • done
    .zebra-icon-done
  • trash_full
    .zebra-icon-trash_full
  • alarm
    .zebra-icon-alarm
  • alarm_add
    .zebra-icon-alarm_add
  • bulb
    .zebra-icon-bulb
  • checkbox_square
    .zebra-icon-checkbox_square
  • clock
    .zebra-icon-clock
  • circle_checked
    .zebra-icon-circle_checked
  • Cokie
    .zebra-icon-Cokie
  • circle_check_outline
    .zebra-icon-circle_check_outline
  • confused
    .zebra-icon-confused
  • done_all
    .zebra-icon-done_all
  • external_link
    .zebra-icon-external_link
  • Color
    .zebra-icon-Color
  • circle_check
    .zebra-icon-circle_check
  • download_done
    .zebra-icon-download_done
  • help_circle
    .zebra-icon-help_circle
  • happy
    .zebra-icon-happy
  • help_circle_outline
    .zebra-icon-help_circle_outline
  • Flag_outline
    .zebra-icon-Flag_outline
  • checkbox_checked
    .zebra-icon-checkbox_checked
  • mail_open
    .zebra-icon-mail_open
  • credit_card
    .zebra-icon-credit_card
  • location
    .zebra-icon-location
  • credit_card_alt
    .zebra-icon-credit_card_alt
  • download
    .zebra-icon-download
  • Flag_fill
    .zebra-icon-Flag_fill
  • layers_alt
    .zebra-icon-layers_alt
  • heart_fill
    .zebra-icon-heart_fill
  • command
    .zebra-icon-command
  • log_out
    .zebra-icon-log_out
  • checkbox
    .zebra-icon-checkbox
  • phone
    .zebra-icon-phone
  • heart_outline
    .zebra-icon-heart_outline
  • radio_filled
    .zebra-icon-radio_filled
  • label
    .zebra-icon-label
  • image_alt
    .zebra-icon-image_alt
  • help_questionmark
    .zebra-icon-help_questionmark
  • share_outline
    .zebra-icon-share_outline
  • settings
    .zebra-icon-settings
  • exit
    .zebra-icon-exit
  • layers
    .zebra-icon-layers
  • loading
    .zebra-icon-loading
  • link_circular
    .zebra-icon-a-link1
  • share
    .zebra-icon-share
  • stopwatch
    .zebra-icon-stopwatch
  • off_outline_close
    .zebra-icon-off_outline_close
  • moon
    .zebra-icon-moon
  • settings_future
    .zebra-icon-settings_future
  • location_outline
    .zebra-icon-location_outline
  • off_close
    .zebra-icon-off_close
  • map
    .zebra-icon-map
  • path
    .zebra-icon-path
  • slider_one
    .zebra-icon-slider_01
  • sun
    .zebra-icon-sun
  • refresh_two
    .zebra-icon-refresh_02
  • chevron_down
    .zebra-icon-chevron_down
  • caret_down
    .zebra-icon-caret_down
  • chevron_big_up
    .zebra-icon-chevron_big_up
  • caret_up
    .zebra-icon-caret_up
  • chevron_right
    .zebra-icon-chevron_right
  • chevron_duo_up
    .zebra-icon-chevron_duo_up
  • circle_chevron_down
    .zebra-icon-circle_chevron_down
  • chevron_left
    .zebra-icon-chevron_left
  • chevron_big_right
    .zebra-icon-chevron_big_right
  • circle_left
    .zebra-icon-circle_left
  • chevron_up
    .zebra-icon-chevron_up
  • circle_chevron_up
    .zebra-icon-circle_chevron_up
  • chevron_big_left
    .zebra-icon-chevron_big_left
  • circle_chevron_left
    .zebra-icon-circle_chevron_left
  • chevron_big_down
    .zebra-icon-chevron_big_down
  • circle_right
    .zebra-icon-circle_right
  • first_page
    .zebra-icon-first_page
  • circle_chevron_right
    .zebra-icon-circle_chevron_right
  • long_right
    .zebra-icon-long_right
  • long_up_left
    .zebra-icon-long_up_left_
  • long_bottom_down
    .zebra-icon-long_bottom_down
  • long_down
    .zebra-icon-long_down
  • chevron_duo_left
    .zebra-icon-chevron_duo_left
  • long_left
    .zebra-icon-long_left
  • chevron_duo_down
    .zebra-icon-chevron_duo_down
  • small_long_left
    .zebra-icon-small_long_left
  • shrink
    .zebra-icon-shrink
  • last_page
    .zebra-icon-last_page
  • chevron_duo_right
    .zebra-icon-chevron_duo_right
  • short_down
    .zebra-icon-short_down
  • short_right
    .zebra-icon-short_right
  • sub_right
    .zebra-icon-sub_right
  • short_up
    .zebra-icon-short_up
  • small_long_right
    .zebra-icon-small_long_right
  • circle_up
    .zebra-icon-circle_up
  • small_long_up
    .zebra-icon-small_long_up
  • short_left
    .zebra-icon-short_left
  • sub_left
    .zebra-icon-sub_left
  • thin_big_left
    .zebra-icon-thin_big_left
  • thin_big_up
    .zebra-icon-thin_big_up
  • expand
    .zebra-icon-expand
  • circle_down
    .zebra-icon-circle_down
  • long_bottom_up
    .zebra-icon-long_bottom_up
  • thin_small_up
    .zebra-icon-thin_long_02_up
  • thin_big_down
    .zebra-icon-thin_big_down
  • thin_small_left
    .zebra-icon-thin_long_02_left
  • caret_right
    .zebra-icon-caret_right
  • thin_small_down
    .zebra-icon-thin_long_02_down
  • long_up
    .zebra-icon-long_up
  • thin_long_up
    .zebra-icon-thin_long_up
  • thin_big_right
    .zebra-icon-thin_big_right
  • unfold_less
    .zebra-icon-unfold_less
  • small_long_down
    .zebra-icon-small_long_down
  • unfold_more
    .zebra-icon-unfold_more
  • thin_small_right
    .zebra-icon-thin_long_02_right
  • thin_long_right
    .zebra-icon-thin_long_right
  • caret_left
    .zebra-icon-caret_left
  • long_up_right
    .zebra-icon-long_up_right
  • thin_long_down
    .zebra-icon-thin_long_down
  • thin_long_left
    .zebra-icon-thin_long_left

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • cast
    #zebra-icon-cast
  • fast_rewind
    #zebra-icon-fast_rewind
  • pause_circle_filled
    #zebra-icon-pause_circle_filled
  • play_arrow
    #zebra-icon-play_arrow
  • play_circle_outline
    #zebra-icon-play_circle_outline
  • skip_next
    #zebra-icon-skip_next
  • pause_circle_outline
    #zebra-icon-pause_circle_outline
  • repeat
    #zebra-icon-repeat
  • skip_previous
    #zebra-icon-skip_previous
  • shuffle
    #zebra-icon-shuffle
  • fast_forward
    #zebra-icon-fast_forward
  • airplay
    #zebra-icon-airplay
  • play_circle_filled
    #zebra-icon-play_circle_filled
  • comment
    #zebra-icon-comment
  • comment_plus
    #zebra-icon-comment_plus
  • add_to_queue
    #zebra-icon-add_to_queue
  • comment_minus
    #zebra-icon-comment_minus
  • comment_check
    #zebra-icon-comment_check
  • list_check
    #zebra-icon-list_check
  • hide
    #zebra-icon-hide
  • copy
    #zebra-icon-copy
  • list_minus
    #zebra-icon-list_minus
  • minus
    #zebra-icon-minus
  • list_ul
    #zebra-icon-list_ul
  • edit
    #zebra-icon-edit
  • minus_circle
    #zebra-icon-minus_circle
  • move
    #zebra-icon-move
  • list_ol
    #zebra-icon-list_ol
  • move_vertical
    #zebra-icon-move_vertical
  • list_plus
    #zebra-icon-list_plus
  • minus_circle_outline
    #zebra-icon-minus_circle_outline
  • plus
    #zebra-icon-plus
  • minus_square
    #zebra-icon-minus_square
  • move_horizontal
    #zebra-icon-move_horizontal
  • plus_square
    #zebra-icon-plus_square
  • search
    #zebra-icon-search
  • search_small_minus
    #zebra-icon-search_small_minus
  • select_multiple
    #zebra-icon-select_multiple
  • search_small
    #zebra-icon-search_small
  • plus_circle_outline
    #zebra-icon-plus_circle_outline
  • show
    #zebra-icon-show
  • plus_circle
    #zebra-icon-plus_circle
  • text_align_justify
    #zebra-icon-text_align_justify
  • search_small_plus
    #zebra-icon-search_small_plus
  • text_align_center
    #zebra-icon-text_align_center
  • text_align_right
    #zebra-icon-text_align_right
  • text_align_left
    #zebra-icon-text_align_left
  • laptop
    #zebra-icon-laptop
  • monitor
    #zebra-icon-monitor
  • tablet
    #zebra-icon-tablet
  • mobile
    #zebra-icon-mobile
  • mobile_alt
    #zebra-icon-mobile_alt
  • devices
    #zebra-icon-devices
  • bar_right
    #zebra-icon-bar_right
  • bar_top
    #zebra-icon-bar_top
  • bar_bottom
    #zebra-icon-bar_bottom
  • transfer
    #zebra-icon-transfer
  • terminal
    #zebra-icon-terminal
  • code
    #zebra-icon-code
  • bar_left
    #zebra-icon-bar_left
  • cylinder
    #zebra-icon-cylinder
  • window_close
    #zebra-icon-window_close
  • window_check
    #zebra-icon-window_check
  • window_terminal
    #zebra-icon-window_terminal
  • window_code_block
    #zebra-icon-window_code_block
  • window
    #zebra-icon-window
  • window_sidebar
    #zebra-icon-window_sidebar
  • data
    #zebra-icon-data
  • user_check
    #zebra-icon-user_check
  • id_card
    #zebra-icon-id_card
  • user
    #zebra-icon-user
  • user_circle
    #zebra-icon-user_circle
  • user_minus
    #zebra-icon-user_minus
  • user_x
    #zebra-icon-user_x
  • user_plus
    #zebra-icon-user_plus
  • user_voice
    #zebra-icon-user_voice
  • user_pin
    #zebra-icon-user_pin
  • calendar_edit
    #zebra-icon-calendar_edit
  • calendar
    #zebra-icon-calendar
  • calendar_x
    #zebra-icon-calendar_x
  • calendar_calendar
    #zebra-icon-calendar_calendar
  • calendar_check
    #zebra-icon-calendar_check
  • calendar_week
    #zebra-icon-calendar_week
  • calendar_minus
    #zebra-icon-calendar_minus
  • calendar_plus
    #zebra-icon-calendar_plus
  • calendar_event
    #zebra-icon-calendar_event
  • trending_down
    #zebra-icon-trending_down
  • Bar_chart_horizontal
    #zebra-icon-Bar_chart_horizontal
  • bar_chart_square
    #zebra-icon-bar_chart_square
  • pie_chart_75
    #zebra-icon-pie_chart_75
  • pie_chart_outline_25
    #zebra-icon-pie_chart_outline_25
  • pie_chart_50
    #zebra-icon-pie_chart_50
  • pie_chart_outline
    #zebra-icon-pie_chart_outline
  • line_chart_up
    #zebra-icon-line_chart_up
  • trending_up
    #zebra-icon-trending_up
  • bar_chart
    #zebra-icon-bar_chart
  • line_chart_down
    #zebra-icon-line_chart_down
  • pie_chart_25
    #zebra-icon-pie_chart_25
  • bar_chart_alt
    #zebra-icon-bar_chart_alt
  • doughnut_chart
    #zebra-icon-doughnut_chart
  • menu_duo
    #zebra-icon-menu_duo
  • menu_alt_05
    #zebra-icon-menu_alt_05
  • more_horizontal
    #zebra-icon-more_horizontal
  • menu_alt_02
    #zebra-icon-menu_alt_02
  • more_vertical
    #zebra-icon-more_vertical
  • dashboard_02
    #zebra-icon-dashboard_02
  • dashboard
    #zebra-icon-dashboard
  • grid
    #zebra-icon-grid
  • grid_small
    #zebra-icon-grid_small
  • grid_big
    #zebra-icon-grid_big
  • grid_small_round
    #zebra-icon-grid_small_round
  • close_big
    #zebra-icon-close_big
  • grid_horizontal
    #zebra-icon-grid_horizontal
  • grid_horizontal_round
    #zebra-icon-grid_horizontal_round
  • grid_round
    #zebra-icon-grid_round
  • grid_big_round
    #zebra-icon-grid_big_round
  • close_small
    #zebra-icon-close_small
  • grid_vertical_round
    #zebra-icon-grid_vertical_round
  • hamburger
    #zebra-icon-hamburger
  • grid_vertical
    #zebra-icon-grid_vertical
  • menu_alt_04
    #zebra-icon-menu_alt_04
  • menu_alt_03
    #zebra-icon-menu_alt_03
  • menu_alt_01
    #zebra-icon-menu_alt_01
  • error
    #zebra-icon-error
  • info_circle
    #zebra-icon-info_circle
  • info_circle_outline
    #zebra-icon-info_circle_outline
  • info_square
    #zebra-icon-info_square
  • warning
    #zebra-icon-warning
  • error_outline
    #zebra-icon-error_outline
  • warning_outline
    #zebra-icon-warning_outline
  • info_square_outline
    #zebra-icon-info_square_outline
  • notification_active
    #zebra-icon-notification_active
  • notification_outline_plus
    #zebra-icon-notification_outline_plus
  • notification_outline_minus
    #zebra-icon-notification_outline_minus
  • notification_deactivated
    #zebra-icon-notification_deactivated
  • notification_dot
    #zebra-icon-notification_dot
  • notification
    #zebra-icon-notification
  • notification_outline
    #zebra-icon-notification_outline
  • notification_outline_dot
    #zebra-icon-notification_outline_dot
  • notification_plus
    #zebra-icon-notification_plus
  • notification_minus
    #zebra-icon-notification_minus
  • dot_xs
    #zebra-icon-dot_xs
  • dot_l
    #zebra-icon-dot_l
  • dot_xl
    #zebra-icon-dot_xl
  • dot_m
    #zebra-icon-dot_m
  • dot_s
    #zebra-icon-dot_s
  • css3
    #zebra-icon-css3
  • app_store
    #zebra-icon-app_store
  • coolicons
    #zebra-icon-coolicons
  • discord
    #zebra-icon-discord
  • apple
    #zebra-icon-apple
  • behance
    #zebra-icon-behance
  • facebook
    #zebra-icon-facebook
  • html5
    #zebra-icon-html5
  • google
    #zebra-icon-google
  • LinkedIn
    #zebra-icon-LinkedIn
  • dropbox
    #zebra-icon-dropbox
  • linkpath
    #zebra-icon-linkpath
  • Dribbble
    #zebra-icon-Dribbble
  • github
    #zebra-icon-github
  • Figma
    #zebra-icon-Figma
  • javascript
    #zebra-icon-javascript
  • paypal
    #zebra-icon-paypal
  • instagram
    #zebra-icon-instagram
  • play_store
    #zebra-icon-play_store
  • slack
    #zebra-icon-slack
  • messenger
    #zebra-icon-messenger
  • trello
    #zebra-icon-trello
  • snapchat
    #zebra-icon-snapchat
  • stack_overflow
    #zebra-icon-stack_overflow
  • Adobe_XD
    #zebra-icon-Adobe_XD
  • spectrum
    #zebra-icon-spectrum
  • unsplash
    #zebra-icon-unsplash
  • invision
    #zebra-icon-invision
  • spotify
    #zebra-icon-spotify
  • Twitter
    #zebra-icon-Twitter
  • youtube
    #zebra-icon-youtube
  • Sketch
    #zebra-icon-Sketch
  • reddit
    #zebra-icon-reddit
  • cloud_check
    #zebra-icon-cloud_check
  • file_blank
    #zebra-icon-file_blank
  • folder_open
    #zebra-icon-folder_open
  • cloud_off
    #zebra-icon-cloud_off
  • note
    #zebra-icon-note
  • file_minus
    #zebra-icon-file_minus
  • cloud_up
    #zebra-icon-cloud_up
  • folder_plus
    #zebra-icon-folder_plus
  • cloud
    #zebra-icon-cloud
  • cloud_outline
    #zebra-icon-cloud_outline
  • cloud_down
    #zebra-icon-cloud_down
  • file_new
    #zebra-icon-file_new
  • file_find
    #zebra-icon-file_find
  • folder
    #zebra-icon-folder
  • folder_minus
    #zebra-icon-folder_minus
  • cloud_close
    #zebra-icon-cloud_close
  • link
    #zebra-icon-link
  • slider_two
    #zebra-icon-slider_02
  • unlink
    #zebra-icon-unlink
  • trash_empty
    #zebra-icon-trash_empty
  • mail
    #zebra-icon-mail
  • settings_filled
    #zebra-icon-settings_filled
  • refresh
    #zebra-icon-refresh
  • sad
    #zebra-icon-sad
  • radio
    #zebra-icon-radio
  • slider_three
    #zebra-icon-slider_03
  • done
    #zebra-icon-done
  • trash_full
    #zebra-icon-trash_full
  • alarm
    #zebra-icon-alarm
  • alarm_add
    #zebra-icon-alarm_add
  • bulb
    #zebra-icon-bulb
  • checkbox_square
    #zebra-icon-checkbox_square
  • clock
    #zebra-icon-clock
  • circle_checked
    #zebra-icon-circle_checked
  • Cokie
    #zebra-icon-Cokie
  • circle_check_outline
    #zebra-icon-circle_check_outline
  • confused
    #zebra-icon-confused
  • done_all
    #zebra-icon-done_all
  • external_link
    #zebra-icon-external_link
  • Color
    #zebra-icon-Color
  • circle_check
    #zebra-icon-circle_check
  • download_done
    #zebra-icon-download_done
  • help_circle
    #zebra-icon-help_circle
  • happy
    #zebra-icon-happy
  • help_circle_outline
    #zebra-icon-help_circle_outline
  • Flag_outline
    #zebra-icon-Flag_outline
  • checkbox_checked
    #zebra-icon-checkbox_checked
  • mail_open
    #zebra-icon-mail_open
  • credit_card
    #zebra-icon-credit_card
  • location
    #zebra-icon-location
  • credit_card_alt
    #zebra-icon-credit_card_alt
  • download
    #zebra-icon-download
  • Flag_fill
    #zebra-icon-Flag_fill
  • layers_alt
    #zebra-icon-layers_alt
  • heart_fill
    #zebra-icon-heart_fill
  • command
    #zebra-icon-command
  • log_out
    #zebra-icon-log_out
  • checkbox
    #zebra-icon-checkbox
  • phone
    #zebra-icon-phone
  • heart_outline
    #zebra-icon-heart_outline
  • radio_filled
    #zebra-icon-radio_filled
  • label
    #zebra-icon-label
  • image_alt
    #zebra-icon-image_alt
  • help_questionmark
    #zebra-icon-help_questionmark
  • share_outline
    #zebra-icon-share_outline
  • settings
    #zebra-icon-settings
  • exit
    #zebra-icon-exit
  • layers
    #zebra-icon-layers
  • loading
    #zebra-icon-loading
  • link_circular
    #zebra-icon-a-link1
  • share
    #zebra-icon-share
  • stopwatch
    #zebra-icon-stopwatch
  • off_outline_close
    #zebra-icon-off_outline_close
  • moon
    #zebra-icon-moon
  • settings_future
    #zebra-icon-settings_future
  • location_outline
    #zebra-icon-location_outline
  • off_close
    #zebra-icon-off_close
  • map
    #zebra-icon-map
  • path
    #zebra-icon-path
  • slider_one
    #zebra-icon-slider_01
  • sun
    #zebra-icon-sun
  • refresh_two
    #zebra-icon-refresh_02
  • chevron_down
    #zebra-icon-chevron_down
  • caret_down
    #zebra-icon-caret_down
  • chevron_big_up
    #zebra-icon-chevron_big_up
  • caret_up
    #zebra-icon-caret_up
  • chevron_right
    #zebra-icon-chevron_right
  • chevron_duo_up
    #zebra-icon-chevron_duo_up
  • circle_chevron_down
    #zebra-icon-circle_chevron_down
  • chevron_left
    #zebra-icon-chevron_left
  • chevron_big_right
    #zebra-icon-chevron_big_right
  • circle_left
    #zebra-icon-circle_left
  • chevron_up
    #zebra-icon-chevron_up
  • circle_chevron_up
    #zebra-icon-circle_chevron_up
  • chevron_big_left
    #zebra-icon-chevron_big_left
  • circle_chevron_left
    #zebra-icon-circle_chevron_left
  • chevron_big_down
    #zebra-icon-chevron_big_down
  • circle_right
    #zebra-icon-circle_right
  • first_page
    #zebra-icon-first_page
  • circle_chevron_right
    #zebra-icon-circle_chevron_right
  • long_right
    #zebra-icon-long_right
  • long_up_left
    #zebra-icon-long_up_left_
  • long_bottom_down
    #zebra-icon-long_bottom_down
  • long_down
    #zebra-icon-long_down
  • chevron_duo_left
    #zebra-icon-chevron_duo_left
  • long_left
    #zebra-icon-long_left
  • chevron_duo_down
    #zebra-icon-chevron_duo_down
  • small_long_left
    #zebra-icon-small_long_left
  • shrink
    #zebra-icon-shrink
  • last_page
    #zebra-icon-last_page
  • chevron_duo_right
    #zebra-icon-chevron_duo_right
  • short_down
    #zebra-icon-short_down
  • short_right
    #zebra-icon-short_right
  • sub_right
    #zebra-icon-sub_right
  • short_up
    #zebra-icon-short_up
  • small_long_right
    #zebra-icon-small_long_right
  • circle_up
    #zebra-icon-circle_up
  • small_long_up
    #zebra-icon-small_long_up
  • short_left
    #zebra-icon-short_left
  • sub_left
    #zebra-icon-sub_left
  • thin_big_left
    #zebra-icon-thin_big_left
  • thin_big_up
    #zebra-icon-thin_big_up
  • expand
    #zebra-icon-expand
  • circle_down
    #zebra-icon-circle_down
  • long_bottom_up
    #zebra-icon-long_bottom_up
  • thin_small_up
    #zebra-icon-thin_long_02_up
  • thin_big_down
    #zebra-icon-thin_big_down
  • thin_small_left
    #zebra-icon-thin_long_02_left
  • caret_right
    #zebra-icon-caret_right
  • thin_small_down
    #zebra-icon-thin_long_02_down
  • long_up
    #zebra-icon-long_up
  • thin_long_up
    #zebra-icon-thin_long_up
  • thin_big_right
    #zebra-icon-thin_big_right
  • unfold_less
    #zebra-icon-unfold_less
  • small_long_down
    #zebra-icon-small_long_down
  • unfold_more
    #zebra-icon-unfold_more
  • thin_small_right
    #zebra-icon-thin_long_02_right
  • thin_long_right
    #zebra-icon-thin_long_right
  • caret_left
    #zebra-icon-caret_left
  • long_up_right
    #zebra-icon-long_up_right
  • thin_long_down
    #zebra-icon-thin_long_down
  • thin_long_left
    #zebra-icon-thin_long_left

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>