一.背景
我们会经常用到一些图标。但是我们在使用这些图标时,往往会遇 到失真的情况,而且图片数量很多的话,页面加载就越慢。所以, 我们可以使用字体图标的方式来显示图标,既解决了失真的问题, 也解决了图片占用资源的问题
常用字体图标库:阿里字体图标库
二.优点
1 轻量性:加载速度快,减少http请求
2 灵活性:可以利用CSS设置大小颜色等
3 兼容性:网页字体支持所有现代浏览器,包括IE低版本
三.字体图标的使用
1 注册账号并登录
2 选取图标或搜索图标
3 添加购物车
4 下载代码
5 选择 font-class 引用
-
点开解压后的文件,找到demo_index.html文件,点击
-
找到你选择图例的上面的font class选项,点击
-
根据下面文档提示,使用字体图标!
四.实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./font/iconfont.css"> <style> .bijiben { font-size: 140px; color: aquamarine; } .diannao { font-size: 140px; color: blueviolet; } .shubiao { font-size: 140px; color: red; } </style> </head> <body> <span class="iconfont icon-bijiben bijiben"></span> <span class="iconfont icon-diannao diannao"></span> <span class="iconfont icon-shubiao shubiao"></span> </body> </html>