No.25 CSS--字体图标

一、字体图标

• 我们会经常用到一些图标，但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题。

1.常用的字体图标库

• 阿里字体图标库：https://www.iconfont.cn/

2.优点

• 轻量性:加载速度快，减少http请求
• 灵活性:可以利用CSS设置大小颜色等
• 兼容性:网页字体支持所有现代浏览器，包括IE低版本

3.使用字体图标

• 登录注册：https://www.iconfont.cn/
• 搜索图标
• 添加到购物车
• 下载代码
• 解压，打卡demo...
• 
• 通过font-class引用

• 

•  

   

  

•