在前端开发与设计过程中我们会需要用到一些大家都耳熟能详的小图标,如果插入图片的话色彩.大小.背景等一切的设计都会有较大的影响,所以我们往往会引入矢量图.
1. 我们在阿里巴巴矢量库中选择自己想要的图标放入"购物车"中,点击"下载代码"解压之后,将font文件放入.html文件同列中,在.html文件中引入font文件中的.css文件 (准备工作完毕)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
/* 1.引入css文件 */
<link rel="stylesheet" href="fonts/iconfont.css">
</head>
<body>
<!--设置标签和class名,iconfont一定不能少 -->
<span class="iconfont icon-xiaogoushou"></span>
</body>
</html>2.打开font文件中的.html 文件,选择 Font class
3.将类名改为上边显示的格式,如 iconfont icon-xiaogoushou (xxx预设定图标的矢量库中的命名)如:xiaogoushou
4. 引入图标成功后可以对小图标设置大小,背景色等css样式
<style>
.icon-xiaogoushou {
color: rgb(204, 0, 255);
font-size: 60px;
}
</style>
5. 运行结果
