这是我参与[第四届青训营]笔记创作活动的第3天。今天我来记录一下CSS中字体图标的使用。

一、什么是字体图标

字体图标（iconfont）是在网页中经常使用的一种小图标，本身体积较小但所携带的信息不会削减，并且没有兼容性问题。

二、字体图标的下载

首先，我们要打开字体图标库的下载网址。在这里推荐两个：

1、icmoon ：icomoon.io

2、阿里iconfont字库www.iconfont.cn

在接下来我以icmoon为例。

打开官网：

icmoon官网.png

点击右上角的IconMoon App：

进入下载.png

进入页面后，我们可以看到很多字体图标，然后可以进行挑选，单击图标即为选中。在挑选完成后，点击页面下方的Generate Font；

下载.png

点击后我们可以看到页面中显示的我们已经选中的所有图标，检查无误后，单击右下角的下载按钮即可下载；

下载按钮.png

下载完成后，对icmoon文件进行解压，解压后文件夹包括以下内容：

解压后we年.png

注意，下载好的文件不要删，我们在引入的过程中会使用。

三、字体图标的使用

1、将解压文件中的fonts文件，放入要引入字体图标的文件的根目录下。

举例1.png

2、在CSS样式中全局声明字体，简单来讲就是将这些字体图标文件通过CSS的方式引入，在引入过程中要注意路径。

打开icmoon文件夹，打开里面的style.css文件，复制第一段代码，即下面这段：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?tomleg');
  src:  url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?tomleg') format('truetype'),
    url('fonts/icomoon.woff?tomleg') format('woff'),
    url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}