IconFont 图标
-
appreciate#icon-appreciate
-
check#icon-check
-
close#icon-close
-
edit#icon-edit
-
emoji#icon-emoji
-
favor_fill#icon-favorfill
-
favor#icon-favor
-
loading#icon-loading
-
location_fill#icon-locationfill
-
location#icon-location
-
phone#icon-phone
-
round_check_fill#icon-roundcheckfill
-
round_check#icon-roundcheck
-
round_close_fill#icon-roundclosefill
-
round_close#icon-roundclose
-
round_right_fill#icon-roundrightfill
-
round_right#icon-roundright
-
search#icon-search
-
taxi#icon-taxi
-
time_fill#icon-timefill
-
time#icon-time
-
unfold#icon-unfold
-
warn_fill#icon-warnfill
-
warn#icon-warn
-
camera_fill#icon-camerafill
-
camera#icon-camera
-
comment_fill#icon-commentfill
-
comment#icon-comment
-
like_fill#icon-likefill
-
like#icon-like
-
notification_fill#icon-notificationfill
-
notification#icon-notification
-
order#icon-order
-
same_fill#icon-samefill
-
same#icon-same
-
deliver#icon-deliver
-
evaluate#icon-evaluate
-
pay#icon-pay
-
send#icon-send
-
shop#icon-shop
-
ticket#icon-ticket
-
wang#icon-wang
-
back#icon-back
-
cascades#icon-cascades
-
discover#icon-discover
-
list#icon-list
-
more#icon-more
-
my_fill#icon-myfill
-
my#icon-my
-
scan#icon-scan
-
settings#icon-settings
-
question_fill#icon-questionfill
-
question#icon-question
-
shop_fill#icon-shopfill
-
form#icon-form
-
wang_fill#icon-wangfill
-
pic#icon-pic
-
filter#icon-filter
-
footprint#icon-footprint
-
top#icon-top
-
pull_down#icon-pulldown
-
pull_up#icon-pullup
-
right#icon-right
-
refresh#icon-refresh
-
more_android#icon-moreandroid
-
delete_fill#icon-deletefill
-
refund#icon-refund
-
cart#icon-cart
-
qr_code#icon-qrcode
-
remind#icon-remind
-
delete#icon-delete
-
profile#icon-profile
-
home#icon-home
-
cart_fill#icon-cartfill
-
discover_fill#icon-discoverfill
-
home_fill#icon-homefill
-
message#icon-message
-
address_book#icon-addressbook
-
link#icon-link
-
lock#icon-lock
-
unlock#icon-unlock
-
vip#icon-vip
-
weibo#icon-weibo
-
activity#icon-activity
-
big#icon-big
-
friend_add_fill#icon-friendaddfill
-
friend_add#icon-friendadd
-
friend#icon-friend
-
goods#icon-goods
-
selection#icon-selection
-
tmall#icon-tmall
-
explore#icon-explore
-
present#icon-present
-
square_check_fill#icon-squarecheckfill
-
square#icon-square
-
square_check#icon-squarecheck
-
round#icon-round
-
round_add#icon-roundadd
-
add#icon-add
-
notification_forbid_fill#icon-notificationforbidfill
-
explore_fill#icon-explorefill
-
fold#icon-fold
-
game#icon-game
-
redpacket#icon-redpacket
-
selection_fill#icon-selectionfill
-
similar#icon-similar
-
appreciate_fill#icon-appreciatefill
-
info_fill#icon-infofill
-
info#icon-info
-
tao#icon-tao
-
mobile_tao#icon-mobiletao
-
forward_fill#icon-forwardfill
-
forward#icon-forward
-
recharge_fill#icon-rechargefill
-
recharge#icon-recharge
-
vipcard#icon-vipcard
-
voice#icon-voice
-
voice_fill#icon-voicefill
-
friend_favor#icon-friendfavor
-
wifi#icon-wifi
-
share#icon-share
-
we_fill#icon-wefill
-
we#icon-we
-
light_auto#icon-lightauto
-
light_forbid#icon-lightforbid
-
light_fill#icon-lightfill
-
camera_rotate#icon-camerarotate
-
light#icon-light
-
bar_code#icon-barcode
-
flashlight_close#icon-flashlightclose
-
flashlight_open#icon-flashlightopen
-
search_list#icon-searchlist
-
service#icon-service
-
sort#icon-sort
-
1212#icon-1212
-
down#icon-down
-
mobile#icon-mobile
-
mobile_fill#icon-mobilefill
-
copy#icon-copy
-
countdown_fill#icon-countdownfill
-
countdown#icon-countdown
-
notice_fill#icon-noticefill
-
notice#icon-notice
-
qiang#icon-qiang
-
upstage_fill#icon-upstagefill
-
upstage#icon-upstage
-
baby_fill#icon-babyfill
-
baby#icon-baby
-
brand_fill#icon-brandfill
-
brand#icon-brand
-
choiceness_fill#icon-choicenessfill
-
choiceness#icon-choiceness
-
clothes_fill#icon-clothesfill
-
clothes#icon-clothes
-
creative_fill#icon-creativefill
-
creative#icon-creative
-
female#icon-female
-
keyboard#icon-keyboard
-
male#icon-male
-
new_fill#icon-newfill
-
new#icon-new
-
pull_left#icon-pullleft
-
pull_right#icon-pullright
-
rank_fill#icon-rankfill
-
rank#icon-rank
-
bad#icon-bad
-
camera_add#icon-cameraadd
-
focus#icon-focus
-
friend_fill#icon-friendfill
-
camera_add_fill#icon-cameraaddfill
-
apps#icon-apps
-
paint_fill#icon-paintfill
-
paint#icon-paint
-
pic_fill#icon-picfill
-
refresh_arrow#icon-refresharrow
-
mark_fill#icon-markfill
-
mark#icon-mark
-
present_fill#icon-presentfill
-
repeal#icon-repeal
-
album#icon-album
-
people_fill#icon-peoplefill
-
people#icon-people
-
service_fill#icon-servicefill
-
repair#icon-repair
-
file#icon-file
-
repair_fill#icon-repairfill
-
taoxiaopu#icon-taoxiaopu
-
attention_fill#icon-attentionfill
-
attention#icon-attention
-
command_fill#icon-commandfill
-
command#icon-command
-
community_fill#icon-communityfill
-
community#icon-community
-
read#icon-read
-
calendar#icon-calendar
-
cut#icon-cut
-
magic#icon-magic
-
backward_fill#icon-backwardfill
-
forward_fill#icon-forwardfill1
-
play_fill#icon-playfill
-
stop#icon-stop
-
tag_fill#icon-tagfill
-
tag#icon-tag
-
group#icon-group
-
all#icon-all
-
back_delete#icon-backdelete
-
hot_fill#icon-hotfill
-
hot#icon-hot
-
post#icon-post
-
radio_box#icon-radiobox
-
round_down#icon-rounddown
-
upload#icon-upload
-
write_fill#icon-writefill
-
write#icon-write
-
radio_box_fill#icon-radioboxfill
-
punch#icon-punch
-
shake#icon-shake
-
add#icon-add1
-
move#icon-move
-
safe#icon-safe
-
activity_fill#icon-activityfill
-
crown_fill#icon-crownfill
-
crown#icon-crown
-
goods_fill#icon-goodsfill
-
message_fill#icon-messagefill
-
profile_fill#icon-profilefill
-
sound#icon-sound
-
sponsor_fill#icon-sponsorfill
-
sponsor#icon-sponsor
-
up_block#icon-upblock
-
we_block#icon-weblock
-
we_unblock#icon-weunblock
-
my#icon-my1
-
my_fill#icon-myfill1
-
emoji_fill#icon-emojifill
-
emoji_flash_fill#icon-emojiflashfill
-
flashbuy_fill#icon-flashbuyfill-copy
-
text#icon-text
-
video_fill#icon-videofill
-
video#icon-video
-
goods_favor#icon-goodsfavor
-
music_fill#icon-musicfill
-
music_forbid_fill#icon-musicforbidfill
-
xiami_forbid#icon-xiamiforbid
-
xiami#icon-xiami
-
round_left_fill#icon-roundleftfill
-
triangle_down_fill#icon-triangledownfill
-
triangle_up_fill#icon-triangleupfill
-
round_left_fill#icon-roundleftfill-copy
-
pull_down#icon-pulldown1
-
appreciate_light#icon-appreciatelight
-
emoji_light#icon-emojilight
-
goods_light#icon-goodslight
-
keyboard_light#icon-keyboardlight
-
record_fill#icon-recordfill
-
record_light#icon-recordlight
-
record#icon-record
-
round_add_light#icon-roundaddlight
-
sound_light#icon-soundlight
-
cardboard_fill#icon-cardboardfill
-
cardboard#icon-cardboard
-
form_fill#icon-formfill
-
coin#icon-coin
-
sort_light#icon-sortlight
-
cardboard_forbid#icon-cardboardforbid
-
circle_fill#icon-circlefill
-
circle#icon-circle
-
attention_forbid#icon-attentionforbid
-
attention_forbid_fill#icon-attentionforbidfill
-
attention_favor_fill#icon-attentionfavorfill
-
attention_favor#icon-attentionfavor
-
profile_light#icon-profilelight
-
pic_light#icon-piclight
-
shop_light#icon-shoplight
-
voice_light#icon-voicelight
-
attention_favor_fill#icon-attentionfavorfill-copy
-
camera_light#icon-cameralight
-
full#icon-full
-
mail#icon-mail
-
people_list#icon-peoplelist
-
cmswing#icon-cmswing
-
cmswing-o#icon-cmswing-o
-
cmswing-o-w#icon-cmswing-o-copy
-
cmswing-o-b#icon-cmswing-o-copy-copy
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>