前言:
用第三方图标库,我觉得比较方便的就是可以很方便的替换颜色,图标也是矢量的,不会拉伸失真
不用设计人员再单独做雪碧图或其他操作了
1,先搞点事情,在阿里巴巴矢量图标库网站首页,搜索自己想要的图标
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
2,搜索之后,每个图标会有添加入库的按钮,最后想要的图标会入库到右上角的小推车
3,刚才点击的添加入库的两个用户小图标已经全部展示出来
一般操作两种方式
3.1, 添加至项目(在原来已有的项目中添加这两个小图标,根据提示新建项目。。。)
确定之后
下载至本地的操作和3.2是一样的
3.2, 下载代码(直接下载压缩文件,解压后的iconfont.css文件就是我们最终想得到的文件)
4,最后的最后,引用之
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="iconfont.css" />
<style>
.box i{
font-size: 50px;
}
.box i.font2{
font-size: 120px;
color: red;
}
</style>
</head>
<body>
<div class="box">
右边这个是矢量图标呢
<i class="iconfont"></i><br />
右边这个是换了颜色换了字号的矢量图标呢
<i class="font2 iconfont"></i>
</div>
</body>
</html>
3.1的第二张图片,我的项目列表中找到想展示的图片代码放进<i class="iconfont"></i>
<i class="iconfont"></i>
效果: