IconFont 图标
-
icon_xiangshangjiantou-01#icon-ysxiangshangjiantou
-
icon_xiangxiajiantou#icon-ysxiangxiajiantou
-
buying spree#icon-buyingspree
-
mail#icon-mail
-
rotation#icon-rotation
-
close#icon-close
-
delete#icon-delete
-
down#icon-down
-
heart pressed#icon-heartpressed
-
link#icon-link
-
order#icon-order
-
close_white#icon-closewhite
-
subtract#icon-subtract
-
remind#icon-remind
-
time#icon-time
-
up arrow#icon-uparrow
-
up#icon-up
-
check-bold#icon-checkbold
-
next#icon-next
-
close-black#icon-closeblack
-
add-white#icon-addwhite
-
heart#icon-heart
-
edit#icon-edit
-
details#icon-details
-
check against#icon-checkagainst
-
share#icon-share
-
number of comments#icon-numberofcomments
-
unique#icon-unique
-
shop#icon-shop
-
repeat#icon-repeat
-
time-1#icon-time1
-
lock#icon-lock
-
unlock#icon-unlock
-
re-election#icon-reelection
-
left#icon-left
-
star outlined#icon-staroutlined
-
star#icon-star
-
goods#icon-goods
-
picture#icon-picture
-
comment#icon-comment
-
calendar#icon-calender01
-
like#icon-like01
-
location#icon-location01
-
read#icon-read01
-
like_pressed#icon-likepressed01
-
Home#icon-Home
-
Corporate#icon-Corporate
-
search hint#icon-searchhint
-
editor#icon-editor
-
phone#icon-phone
-
group discussion#icon-groupdiscussion
-
share normal#icon-Artboard
-
scanning#icon-scanning
-
check#icon-check
-
search#icon-search1
-
back#icon-back
-
uikit_default_avatar#icon-uikit_default_avatar
-
uikit_default_avatar#icon-uikit_default_avatar1
-
user_zone_girl_icon@#icon-user_zone_girl_icon
-
user_zone_boy_icon@2#icon-user_zone_boy_icon
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>