css加精灵图
1.前言·基础知识
1-1. visual studio code软件
Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
1.Visual Studio Code 下载链接：https://code.visualstudio.com/
1.2Visual Studio Code 安装教程：
https://blog.csdn.net/weixin_37590454/article/details/89436577
1-2 Unicode
Unicode（又称统一码、万国码、单一码）是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发，1994年正式公布。
2.css加精灵图步骤
1.在浏览器中打开“阿里巴巴矢量图标库”。
2.搜索框中输入需要的图标：例如“相机”
3.将所选的图标加入购物车。
4.点击购物车
→下载代码
→将下载好的压缩包保存在对应的位置（修改并牢记位置）。
5.将压缩包解压
→将demo_index.html与infont.css文件复制到对应位置（修改并牢记位置）。
6.在程序中加入精灵图
6.1头部中用link引入iconfont.css文件。
（更改精灵图文件夹内容可调整精灵图大小font-size:100px;和颜色color:purple;）
<head>
<link rel="stylesheet" href="iconfont.css">
<style>
.iconfont{
font-size: 400px;
color: purple;
}
</style>
</head>
6.2身体中用span标签加入精灵图。span标签中的具体内容在demo_index.html文件中找。
<body>
<span class="iconfont"></span>
</body>
link标签：程序中引入 .css库
link标签格式：<link rel="stylesheet" href="地址+文件名">
地址+文件名：当前路径：./iconfont.css或iconfont.css
上一级路径：../iconfont.css