字体图标
字体图标的下载（常用）
1.使用前提：简单的、颜色单一的图片（复杂的或颜色多样的建议使用精灵图）
2.本质：展示的是图片，本质是字体
3.优势：可修改尺寸、大小、兼容性
iconfont（阿里图标库）
步骤：登录—>图标库—>找图标（选择不同的渠道找到自己所需的图标）—>加入购物车（点击图标上的购物车）—>点击“购物车”—>选择“添加至项目”（若没有项目新建一个项目）—>点击“下载至本地”（下载的为.zip，使用时需进行解压）
icomoon（外网，只作于了解）
字体图标的使用
引入
1.将下载的.zip文件进行解压，并将以下所选中文件复制到项目中的fonts（用户自己建的）文件夹中
2.调用（通过link调用iconfont.css文件，注意路径）
<link rel="stylesheet" href="./fonts/iconfont.css">
使用（3种方法）
解压的.zip中有自动生成的“demo_index.html”文件，双击打开，可以看到自动生成的“Unicode"字符编码和”Font class"类名，在使用时，直接拿来用即可。
1.方法一：使用类名调用（必须调用两个类名）
iconfont：基本样式，包含字体的使用
icon-xxx：图标对应的类名（在demo_index.html中的Font class中）
*注：设置字体图标样式，不能直接给标签设置，考虑到优先级问题，应该最好添加给icon-xxx，必须调用两个类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
/* 设置字体图标样式 */
.icon-icon-test1 {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<!-- 利用类名调用字体图标，在demo_index.html中的Font class中，复制所要使用的图标类名 -->
<div class="iconfont icon-icon-test1"></div>
</body>
</html>
2.方法二：使用编码调用
*注：必须调用类名iconfont，在标签中粘贴从Unicode复制过来的图标对应编码，封号不要忘记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
/* 设置字体图标样式 */
.iconfont {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<!-- 利用编码调用字体图标 -->
<div class="iconfont"></div>
</body>
</html>
3.方法三：使用伪元素调用
*注：利用伪元素使用字体图标时，将图标的编码复制到content中，前面要加"",且一定要写字体系列（font-family: 'iconfont'来声明字体)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
/* 设置字体图标样式 */
div::after {
content: '\e63b';
font-family: 'iconfont';
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<!-- 设置伪元素调用字体图标 -->
<div></div>
</body>
</html>
