Css字体图标

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

用来处理简单的、颜色单一的小图标。

字体图标的优点：

①.可以灵活的修改样式，字体大小等。

②.体积小，可以降低服务器请求的次数。

③.几乎兼容所有主流浏览器，使用简便。

总结

1.遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式比较复杂的小图片，就用精灵图

字体图标的使用

①.Icommoon

②.阿里巴巴字体库 （常用）

下载字体包

阿里巴巴字体库：https://www.iconfont.cn/

登录新浪微博>选择图标库>选择图标，加入购物车> 购物车>添加至项目>下载至本地

字体图标的使用

一.使用字体图标 – 类名：

1.把下载的fonts文件夹解压到页面（.html）的根目录下

2.  在vscode中引入iconfont.css文件

3.调用图标对应的类名（必须是两个类名）
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名



 ​​​​​​​i::after {
            content: '';
            font-size: 50px;
            color: pink;
        }