字体图标的理解

这些笔记都是我在学习的过程中记载的，用于下次查找方便，也用于写出我的学习历程

1. 轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
2. 灵活性：本质为文字，可以随意改变颜色，透明度
3. 兼容性：支持所有的浏览器
4. 字体图标的网站：icomoon.io/

首先需要在css中声明字体图标

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

然后在对应的选择器中对字体进行设置

font-family: 'icomoon';

就可以在对应的地方显示出对应的设置的图标