字体图标引入
图标库
l Iconfont：www.iconfont.cn/
下载字体包：
登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地
Unicode编码方式
引入样式表：iconfont.css 复制粘贴图标对应的Unicode编码 设置文字字体：font-family: iconfont;
<title>Document</title>
<link rel="stylesheet" href="./iconfont.css">
<style>
span{
/* 设置字体样式 编码才能生效 */
font-family: iconfont;
font-size: 25px;
color: red;
}
</style>
</head>
<body>
/* 编码输入标签 */
<span></span>
</body>
Font class 编码
iconfont类：基本样式，包含字体的使用等 icon-xxx：图标对应的类名
<title>Document</title>
<link rel="stylesheet" href="./图标/iconfont.css">
<style>
.s1{
color: skyblue;
font-size: 30px;
}
</style>
</head>
<body>
<span class="iconfont icon-eye-close"></span>
<span class="iconfont icon-eye-close s1"></span>
</body>
必须两个类名 一个引入的样式名称 一个引入的图标
<link rel="stylesheet" href="../day01/01-课堂案例/01-字体图标/iconfont/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
}
.iconfont{
font-size: 30px;
/* color: red; */
}
.nav{
list-style: none;
width: 200px;
margin: 50px auto;
font-size: 30px;
}
a{
text-decoration: none;
}
.orange{
color: #f40;
}
</style>
<ul class="nav">
<li>
<a href="#">
<span class="iconfont icon-gouwucheman orange"></span>
<span>购物车</span>
<span class="iconfont icon-jiantou9"></span>
</a>
</li>
</ul>
在线生成字体图标
生成在线地址 http:
<!-- 链接前面加 http:才能快速打开 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3244308_a8vd8o3zo0b.css">
Font class 实现原理
给对应标签添加伪元素 伪元素设置 content 属性 属性值等于 字体图标 Unicode编码
字体图标只用一个类名的方式原理（了解）
引入链接 设置一个类名 那就要加多个伪元素的设置
<style>
.box{
margin: 150px auto;
width: 300px;
height: 50px;
border: 1px solid #ccc;
}
i::before{
/* 使用伪元素添加字体图标 加u码 */
content: "\e668";
}
</style>
</head>
<body>
<div class="box">
/* 只写类名 */
<i class="iconfont"></i>
</div>
