1. 字体图标

字体图标顾名思义就是看着像图标，实则是字体，因此可以使用字体样式来修饰字体图标。

如：修改字体颜色、字体大小

/* 可修改字体图标样式 */
.icon-map {
   color: pink;
   font-size: 50px;
 }

2. 图标库

Iconfont：www.iconfont.cn/ 阿里巴巴字体库 (常用)

3. 下载字体包

下载字体包为后面引用和使用字体图标做好铺垫

3.1 下载步骤

进入图标库--> 选择图标收藏加入购物车--> 进入购物车--> 添加至项目--> 下载至本地
下载压缩包并解压
复制解压后需要用到的字体图标文件
新建一个专门装字体图标的fonts文件夹，粘贴复制的文件到该文件夹即可。

4. 引用字体图标

4.1 引用在线网址

直接使用连接引用字体图标.jpg

<link rel="stylesheet" href="http://at.alicdn.com/t/font_3063198_x94bm7ckfka.css">
<!-- 复制网址时记得加上http: -->

4.2 引用装字体图标文件的fonts文件夹中的css文件

<link rel="stylesheet" href="./fonts/iconfont.css">

4.3 补充强调

引用fonts文件夹中的css文件时，css文件中的iconfont类里面已经声明了font-family: "iconfont"; 因此直接调用iconfont类名就好。
```
&#xe8d0;
```

在没有调用css文件中的iconfont类的前提下，引用在线网址时，在对应的css样式中必须写上 font-family: "iconfont"; 不然字体图标引用不成功。

<link rel="stylesheet"  href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css" />
<!-- 类名使用更多 -->
<!-- 字体图标都是使用单独的盒子 -->
<!-- 字体图标我们喜欢用 i标签 -->
<span class="box icon-gouwuche"></span>

.box {
        font-family: "iconfont";
      }

5. 使用字体图标

必须先引用字体图标对应的css文件才能正常使用字体图标：

 <!-- 必须要引入字体图标css文件 或者 在线网址 -->
 <link rel="stylesheet" href="./fonts/iconfont.css">
 或
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3063198_x94bm7ckfka.css"> 
<!-- 复制网址时记得加上http: -->

5.1 调用 `font class` 中字体图标对应的类名

必须调用2个类名：

fonts文件夹--> css文件-->.iconfont类

Font class --> 字体图标对应的类名.icon-xxx

iconfont类：基本样式，包含字体的使用等
icon-xxx：Font class中字体图标对应的类名
```

```

5.2 使用unicode编码的字体图标

unicode编码.jpg

<span class="iconfont">&#xe686;</span>

5.3 使用伪元素调用字体图标

伪元素调用字体图标.jpg

.box::after {
content: '\e8d3';
line-height: 40px;
float: right;
margin-right: 15px;
}

<div class="box iconfont"></div>

注意：
类名使用更多

字体图标都是使用单独的盒子
字体图标我们喜欢用 i 标签

 购物车

6. 优点

灵活性：灵活地修改样式，例如：尺寸、颜色等.

轻量级：体积小、渲染快、降低服务器请求次数.

兼容性：几乎兼容所有主流浏览器.

便捷度：使用方便.

一、字体图标的引用及使用方式