字体图标的下载步骤
进入www.iconfont.cn/网址，选择新浪微博或GitHub登录。
选择图标库
选择图标，加入购物车
点击购物车，添加至项目
下载至本地
字体图标的使用
引入相关文件
1.在网站根目录下新建fonts文件夹，复制相关文件到fonts文件夹里面。
2.引入css
<link rel="stylesheet" href="./fonts/iconfont.css">
使用类名引入字体图标（重点）
<span class="iconfont icon-daohangdizhi"></span>
- 第一个类名
iconfont目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。 - 第二个类名
icon-daohangdizhi是告诉盒子使用的哪个小图标。
<!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>
<!-- 引入字体图标css文件 -->
<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
.icon-map {
color: red;
font-size: 30px;
}
.icon-fabulous {
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<span class="iconfont icon-map"></span>
<span class="iconfont icon-fabulous"></span>
</body>
</html>
开发中最常用的是使用类名来调用
使用Unicode编码
也可以直接在标签内部放入一个编码
html标签
<strong class="iconfont">  </strong>
css 要指定当前标签的文字是字体图标，必须要声明。
strong {
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>
.iconfont {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
使用伪元素字体图标（记住）
<div class="car1">购物车</div>
这样结构比较清晰，省了很多的小盒子
把Unicode编码前面的&#x用``替代
.car {
width: 200px;
height: 45px;
border: 1px solid pink;
text-align: center;
line-height: 45px;
font-family: 'iconfont';
}
.car::before {
content: "\e63b";
}
.car::after {
content: "\e686";
}
注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"
