IconFont 图标
-
icon_photo#icon-icon-
-
icon_mail#icon-icon-1
-
icon_menu#icon-icon-2
-
icon_news#icon-icon-3
-
icon_buy#icon-icon-4
-
icon_home#icon-icon-5
-
icon_edit#icon-icon-6
-
icon_camera#icon-icon-7
-
icon_computer#icon-icon-8
-
icon_list#icon-icon-9
-
icon_cellphone#icon-icon-10
-
icon_notice#icon-icon-11
-
icon_me#icon-icon-12
-
icon_setting#icon-icon-13
-
icon_rest#icon-icon-14
-
icon_delete#icon-icon-15
-
icon_express#icon-icon-16
-
icon_wallet#icon-icon-17
-
icon_cart#icon-icon-18
-
icon_label#icon-icon-19
-
icon_transport#icon-icon-20
-
icon_after sales#icon-icon-21
-
icon_aviation#icon-icon-22
-
icon_female#icon-icon-23
-
icon_password#icon-icon-24
-
icon_male#icon-icon-25
-
icon_verification code#icon-icon-26
-
icon_music#icon-icon-27
-
icon_date#icon-icon-28
-
icon_customer service#icon-icon-29
-
icon_address#icon-icon-30
-
icon_personal information#icon-icon-31
-
icon_view#icon-icon-32
-
icon_search#icon-icon-33
-
icon_printer#icon-icon-34
-
icon_save#icon-icon-35
-
icon_time#icon-icon-36
-
icon_coupons#icon-icon-37
-
icon_prepaid card#icon-icon-38
-
icon_red packet#icon-icon-39
-
icon_like#icon-icon-40
-
icon_like_sel#icon-icon-41
-
icon_collect#icon-icon-42
-
icon_more#icon-icon-43
-
icon_collect_sel#icon-icon-44
-
icon_more_sel#icon-icon-45
-
icon_phone#icon-icon-46
-
icon_phone_sel#icon-icon-47
-
icon_help#icon-icon-48
-
icon_warning#icon-icon-49
-
icon_right_circle#icon-icon-50
-
icon_information#icon-icon-51
-
icon_wrong_circle#icon-icon-52
-
icon_minus#icon-icon-53
-
icon_plus#icon-icon-54
-
icon_minus_circle#icon-icon-55
-
icon_plus_circle#icon-icon-56
-
icon_wrong#icon-icon-57
-
icon_right#icon-icon-58
-
icon_caret_right#icon-icon-59
-
icon_caret_left#icon-icon-60
-
icon_arrow_left#icon-icon-61
-
icon_arrow_right#icon-icon-62
-
icon_zoom_in#icon-icon-63
-
icon_zoom_out#icon-icon-64
-
icon_back#icon-icon-65
-
icon_next#icon-icon-66
-
icon_download#icon-icon-67
-
icon_upload#icon-icon-68
-
icon_share#icon-icon-69
-
icon_move#icon-icon-70
-
icon_comment#icon-icon-71
-
icon_refresh#icon-icon-72
-
icon_input#icon-icon-73
-
icon_link#icon-icon-74
-
icon_list#icon-icon-75
-
icon_caret#icon-icon-76
-
icon_copy#icon-icon-77
-
icon_data#icon-icon-78
-
icon_forward#icon-icon-79
-
icon_share#icon-icon-80
-
icon_visible#icon-icon-81
-
icon_company#icon-icon-82
-
icon_employ#icon-icon-83
-
icon_invisible#icon-icon-84
-
icon_dress up#icon-icon-85
-
icon_file#icon-icon-86
-
icon_play#icon-icon-87
-
icon_weather#icon-icon-88
-
icon_voice#icon-icon-89
-
icon_browser#icon-icon-90
-
icon_scan#icon-icon-91
-
icon_order#icon-icon-92
-
icon_qr code#icon-icon-93
-
icon_wifi#icon-icon-94
-
icon_location#icon-icon-95
-
icon_gift#icon-icon-96
-
icon_mouse#icon-icon-97
-
icon_calculator#icon-icon-98
-
icon_hot#icon-icon-99
-
icon_travel#icon-icon-100
-
icon_upload#icon-icon-101
-
icon_microphone#icon-icon-102
-
icon_train#icon-icon-103
-
icon_word#icon-icon-104
-
icon_idea#icon-icon-105
-
icon_trophy#icon-icon-106
-
icon_integral#icon-icon-107
-
icon_target#icon-icon-108
-
icon_video camera#icon-icon-109
-
icon_footprint#icon-icon-110
-
icon_route#icon-icon-111
-
icon_switch#icon-icon-112
-
icon_alarm#icon-icon-113
-
icon_signal#icon-icon-114
-
icon_server#icon-icon-115
-
icon_screen#icon-icon-116
-
icon_choice#icon-icon-117
-
icon_three-dimensional#icon-icon-118
-
icon_security#icon-icon-119
-
icon_add files#icon-icon-120
-
icon_word#icon-icon-121
-
icon_add#icon-icon-122
-
icon_ppt#icon-icon-123
-
icon_invitation#icon-icon-124
-
icon_medal#icon-icon-125
-
icon_excel#icon-icon-126
-
icon_information#icon-icon-127
-
icon_global#icon-icon-128
-
icon_set top#icon-icon-129
-
icon_move up#icon-icon-130
-
icon_personal center#icon-icon-131
-
icon_sign out#icon-icon-132
-
icon_menu#icon-icon-133
-
icon_pie chart#icon-icon-134
-
icon_map#icon-icon-135
-
icon_text#icon-icon-136
-
icon_clean#icon-icon-137
-
icon-42#icon-icon-138
-
icon_word size_narrow#icon-icon-139
-
icon_layout#icon-icon-140
-
icon_grid#icon-icon-141
-
icon_enclosure#icon-icon-142
-
icon_word size_enlarge#icon-icon-143
-
icon_small screen#icon-icon-144
-
icon_full screen#icon-icon-145
-
icon_cloud-based#icon-icon-146
-
icon_pause#icon-icon-147
-
icon_next#icon-icon-148
-
icon_previous#icon-icon-149
-
icon_lightning#icon-icon-150
-
icon_contact list#icon-icon-151
-
icon_friends#icon-icon-152
-
icon_bluetooth#icon-icon-153
-
icon_gesture#icon-icon-154
-
icon_resources#icon-icon-155
-
icon_find#icon-icon-156
-
icon_adjust#icon-icon-157
-
icon-setting#icon-icon-158
-
icon_praise#icon-icon-159
-
icon_diamond#icon-icon-160
-
icon_crown#icon-icon-161
-
icon_education#icon-icon-162
-
icon_read#icon-icon-163
-
icon_sign#icon-icon-164
-
icon_invoice#icon-icon-165
-
icon_alert#icon-icon-166
-
icon_asset#icon-icon-167
-
icon_attention#icon-icon-168
-
icon_remove friend#icon-icon-169
-
icon_add friend#icon-icon-170
-
icon_resume#icon-icon-171
-
icon_sign in#icon-icon-172
-
icon_cooperation#icon-icon-173
-
icon_examine#icon-icon-174
-
icon_click#icon-icon-175
-
icon_all day#icon-icon-176
-
icon_revise#icon-icon-177
-
icon_like#icon-icon-178
-
icon_like_sel#icon-icon-179
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:引入项目下面生成的symbol代码:
<script src="./iconfont.js"></script>
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.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>