css学习之如何使用字体图标

字体图标展示的是图标，但本质是字体。它的存在是为了补充精灵图的不足之处，实际开发中简单的样式图标可以使用字体图标，复杂的还是首选精灵图。

字体图标使用步骤：

一、下载字体图标；二、字体图标的引用；三、追加新的图标。

两个比较好的网站 https://icomoon.io/ 和 https://www.iconfont.cn/。

1、下载后的压缩文件如下。

解压后将fonts放在项目的根目录下。

2、将上面压缩文件的图中的style.css打开后如下图，复制如下代码到项目中的样式中.

3、定义一个span标签，用于显示字体图标。

将上面压缩文件的图中的demo.html打开后如下图，复制想要使用的图标到span中。

完整的style中代码：

<style type="text/css">
    @font-face {
        font-family: 'icomoon';//名字与下面统一
        src:  url('fonts/icomoon.eot?7uaamp');
        src:  url('fonts/icomoon.eot?7uaamp#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7uaamp') format('truetype'),
        url('fonts/icomoon.woff?7uaamp') format('woff'),
        url('fonts/icomoon.svg?7uaamp#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    span{
        font-family:'icomoon';//名字与上面统一
        font-size: 24px;
        color: red;
    }
</style>

此处不知道为什么显示不出来，实际上已经复制过来。后面知道原因后在做补充说明。

效果图如下。

4、追加新的图标。

打开网址。

只需重复一下1操作即可。