IconFont 图标
-
ic-schedule-24px#icon-ic-schedule-px
-
alarm#icon-alarm
-
camera-video#icon-camera-video
-
bubble#icon-bubble
-
arrow-down-circle#icon-arrow-down-circle
-
arrow-right#icon-arrow-right
-
arrow-left#icon-arrow-left
-
camera#icon-camera
-
cross#icon-cross
-
download#icon-download
-
cog#icon-cog
-
exit#icon-exit
-
checkmark-circle#icon-checkmark-circle
-
layers#icon-layers
-
circle-minus#icon-circle-minus
-
file-empty#icon-file-empty
-
lock#icon-lock
-
magnifier#icon-magnifier
-
map-marker#icon-map-marker
-
mic#icon-mic
-
menu#icon-menu
-
pencil#icon-pencil
-
mustache#icon-mustache
-
picture#icon-picture
-
phone-handset#icon-phone-handset
-
smile#icon-smile
-
plus-circle#icon-plus-circle
-
trash#icon-trash
-
user#icon-user
-
users#icon-users
-
hyphenate#icon-hyphenate
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>