1、字体图标

我们经常用到一些图标，但是我们在使用时往往会遇到图标失真的情况，而且如果图片数量很多的话，页面加载会变慢。所以我们可以使用字体图标的方式来显示图标，既解决了图片失真问题，同时也解决了图片占用资源的问题。
优点：
轻量性：加载速度快，减少http请求。
灵活性：可以利用css设置大小颜色等。
兼容性：网页字体支持所有现代浏览器，包括IE低版本。

2、字体图标使用

a、阿里字体图标库：https://www.iconfont.cn/
b、注册账号并登录
c、搜索自己要的图标并添加到购物车
d、在购物车中点击下载代码，解压下载的zip，打开demo_index.html查看使用方法
e、在打开的页面中选择font-class引用

  1. 第一步：把iconfont.css和iconfont.ttf文件复制到项目下，并进行样式引用
  2. <link rel="stylesheet" href="./iconfont.css">
  3. 第二步：挑选相应图标并获取类名，应用于页面：
  4. <span class="iconfont icon-xxx"></span>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6.     <title>CSS3新特性-字体图标</title>
  8.     <link rel="stylesheet" href="./iconfont.css">
  10.     <style>
  11.         .icon1{
  12.             font-size: 20px;
  13.             color:blueviolet;
  14.         }
  15.         .icon1:hover{
  16.             color: goldenrod;
  17.         }
  18.         .icon2{
  19.             font-size: 30px;
  20.             color:goldenrod;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  26.     <span class="iconfont icon-home icon1"></span>
  27.     <span class="iconfont icon-home icon2"></span>
  29. </body>
  30. </html>

效果：
image.png