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
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的fontclass代码:
<link rel="stylesheet" type="text/css" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。