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