字体图标
1.灵活随时修改颜色尺寸（ color font-size）
2.轻量级 体积小
3.兼容性好
使用方法
1.font-class使用方法
<!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>
<!-- 1引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
.icon1 {
font-size: 100px;
color: red;
}
div .iconfont{
font-size: 200px;
color: pink;
}
</style>
</head>
<body>
<!--
2.通过i标签承接字体图标
类名：
第一个类名是固定的：iconfont;
第二个类名：通过html文件，直接去复制文字下方的类名即可
-->
<i class="iconfont icon-hanbao icon1"></i>
<div> <span class="iconfont icon-hanbao"></span></div>
</body>
</html>
2.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="./iconfont/iconfont.css">
<style>
div,span {
/* 文字的字体 字体图标unicode使用必须设置 */
font-family: 'iconfont' ;
/* 文字的尺寸 */
font-size: 100px;
/* 文字的颜色 */
color: pink;
}
</style>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
3.在线引入字体库
<!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>
<!-- 在线引入字体图标，注意前面要加http: -->
<link
rel="stylesheet"
href="http:////at.alicdn.com/t/font_3244407_1jjx0r0qioe.css"
/>
<style>
.iconfont {
font-size: 300px;
}
</style>
</head>
<body>
<i class="iconfont icon-yingchengka"></i>
<i class="iconfont icon-huiyuan1"></i>
<i class="iconfont icon-shouji"></i>
</body>
</html>
字体库-iconfont: www.iconfont.cn/
1.如何使用svg上传生成对应的文字图片
1.打开iconfont网站.把SVG上传上去
2.选择svg文件进行上传（注意：上传时如果svg图标带颜色 选择清除颜色上传）
3.下载上传好的图标 会自动生成字体图片
2.使用在线的字体文字
1.选择需要的文字图片加入购物车
2.点击生成在线地址
3.页面中如何
<link
rel="stylesheet"
href="http:////at.alicdn.com/t/font_3244407_1jjx0r0qioe.css"
/>
<!-- 在线引入字体图标，注意前面要加http: -->
<!-- href 路径 属性值：生成的在线地址 -->
<i class="iconfont icon-yingchengka"></i>
<i class="iconfont icon-huiyuan1"></i>
<i class="iconfont icon-shouji"></i>
<!-- 给对应的标签添加一个伪元素 这个伪元素设置 iconfont属性 属性值等于 字体图标unicode编码 -->
