IconFont 图标
-
share#icon-share
-
camera#icon-camera
-
star#icon-star
-
user#icon-user
-
back_arrow#icon-backarrow
-
house_record#icon-houserecord
-
check_box#icon-checkbox
-
help_ic#icon-iconfontbangzhu
-
switch_ic#icon-switchic
-
plus#icon-plus
-
help_payquestion#icon-helppayquestion
-
arrow_up#icon-arrowup
-
star_fill#icon-starfill
-
more#icon-more
-
info#icon-info
-
wechat#icon-wechat
-
cirle#icon-cirle
-
empty_status_icon#icon-emptystatusicon
-
more_if#icon-moreif
-
download#icon-download
-
weixin#icon-weixin
-
eyes_closed#icon-eyesclosed
-
eyes_opening#icon-eyesopening
-
delete#icon-delete
-
photo#icon-photo1
-
pen#icon-pen
-
error#icon-error4
-
publish#icon-publish
-
send#icon-send
-
voice#icon-voice_right
-
circle#icon-circle
-
company#icon-company
-
zoom_in#icon-zoom_in
-
arrow_down#icon-right
-
switch_up#icon-switch_up
-
smile#icon-smile
-
call#icon-call
-
find#icon-find
-
shenfenyirenzheng#icon-shenfenyirenzheng
-
wifi#icon-wifi
-
ban#icon-ban
-
alipay#icon-alipay
-
arrow_right#icon-arrow_right
-
mine_fill#icon-mine_fill
-
mine#icon-mine
-
chat_fill#icon-chat_fill
-
contact#icon-contact
-
contact_fill#icon-contact_fill
-
house#icon-house
-
house_fill#icon-house_fill
-
arrow_back#icon-arrow_back
-
checkbox_partial#icon-checkbox_partial
-
check#icon-check
-
switch_on#icon-switch_on
-
switch_off#icon-switch_off
-
empty_house#icon-empty_house
-
error#icon-error
-
chat#icon-chat
-
call_record#icon-call_record
-
sorry#icon-sorry
-
only_check_symbol#icon-only_check_symbol
-
sorry_fill#icon-sorry_fill
-
licaltion#icon-licaltion
-
update#icon-update
-
signout#icon-signout
-
black_name#icon-black_name
-
no_disturb#icon-no_disturb
-
my_second_number#icon-my_second_number
-
battery#icon-battery
-
Lock_Password#icon-Lock_Password
-
Lock_Door#icon-Lock_Door
-
Lock_Revise#icon-Lock_Revise
-
wifi_off#icon-wifi_off
-
back_to_root#icon-back_to_root
-
arrow_right_angle#icon-arrow_right_angle
-
Lock_Qcode#icon-Lock_Qcode
-
Lock_Fix#icon-Lock_Fix
-
Flashlight#icon-Flashlight
-
Flashlight_On#icon-Flashlight_On
-
weirenzheng#icon-weirenzheng
-
contract_soild#icon-contract_soild
-
home_soild#icon-home_soild
-
bill_soild#icon-bill_soild
-
format_list_numbers#icon-format_list_numbers
-
the_balance#icon-the_balance
-
status#icon-status
-
annual_pay#icon-annual_pay
-
transactions#icon-transactions
-
sub_account#icon-sub_account
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>