阿里巴巴矢量图标库 https://www.iconfont.cn/
class的使用方式
引入方式:
<link rel="stylesheet" href="./iconfont.css">
使用时,在需要的位置通过添加class即可使用,优点是非常灵活,可以通过更改字体大小font-size,以及颜色color等style属性修改图标的颜色和大小,xxx为相应的图标名
<span class="iconfont icon-xxx"></span>
可以通过查看demo_index.html
查看图标名
demo如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="stylesheet" href="iconfont.css">
</head>
<body>
<span class="iconfont icon-kabao" style="font-size:30px; color: red;"></span>
</body>
</html>
效果如下
Symbol的使用方式
这样使用的一大有点就是可以支持多色图标
引入方式
<script src="./iconfont.js"></script>
<!--加入通用 CSS 代码(引入一次就行)-->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
应用方式(xxx是图标名称,参考上面获取)
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
demo如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<script src="./iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huiyuan"></use>
</svg>
</body>
</html>
效果如下