[css]网页中字体图标的使用

一.字体图标

1.字体图标本质是字体，可以改变字体和大小。颜色单一。

• 优点：灵活 轻量 兼容 使用方便
• 来源：阿里巴巴矢量图标库

2.使用步骤：

ps：引入字体图标css文件放在最上面。

第一种使用方式

1. 复制相关文件在本地（fonts）目录下，并引入字体图标css文件
   

2. 标签使用字体图标，必须调用两个类名
   

第二种使用方式（Unicode引用）

1. 复制相关文件在本地（fonts）目录下，并引入字体图标css文件
   

   或者在css文件中
   

2. 在标签中填写unicode编码

第三种使用方式（伪元素）

1. 复制相关文件在本地（fonts）目录下，并引入字体图标css文件

2. 在伪元素插入内容中填写’+e开头的编码‘
   

3. 必须声明字体图标
   

字体图标在静态网页中的应用大概就是这样。他适用于颜色单一且简单的图标，而且因为它的本质是字体，所以加载也很快，是一种很方便的工具。