字体图标的基础使用

一 定义：

1.字体图标 展示的是图标 ， 本质是字体。

2.  处理简单的、颜色单一的小图标

二 字体图标的优点：

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

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

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

使用方便

三 字体图标的使用：

1.下载字体包

推荐去阿里字体图标库下载

因为阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在线地址即可。

2.引入字体图标 样式表

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

3.调用图标对应的类名，必须调用2个类名（类名法 推荐使用此方法）

iconfont类：基本样式，包含字体的使用等

icon-xxx：图标对应的类名

<i class="iconfont icon-xxx"></i>

使用字体图标 – unicode编码（编码法）：

<i class="iconfont">&#xe716;</i>

使用字体图标 – 伪元素（伪元素法）：

.one::after {
            content: "\e882";
        }