1. 基本概念

可以像使用字体一样使用图标

2. 优点

①轻量级 一个图标字体比一系列图像(特别是在Retina屏中使用双倍图像)要小.一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像.可以减少HTTP请求,还可以配合HTTP5离线存储做性能优化.
②灵活性 图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、hover状态、透明度、阴影和翻转效果,可以在任何背景下显示出来.使用位图的话,必须为每个不同大小和不同效果的图像输出不同文件.
③ 兼容性 网页字体支持所有现代浏览器,包括IE低版本.

3. 缺点

①图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用.
②使用版权上有限制,好多字体是收费的.
③创作自己字体图标很费时间,重构人员后期维护成本偏高.

4. 使用

@font-faceCSS：字体图标_图标字体

5. 方法

阿里巴巴矢量图标库下载SVG或者AI类型图片.IcoMoon右上角IcoMoon App然后import icons然后选择后Generate Font然后Download
下载完成后,将文件夹中的fonts和style.css引入到项目中.
然后直接在HTML中,按照style.css中的格式命名class即可.并且可以对其随便设置样式.

6. 例如

style.css(这是下载文件中的style.css)

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

[class^="itlike-"], [class*=" itlike-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'itlike' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.itlike-uniE900:before {
  content: "\e900";
}
.itlike-1:before {
  content: "\e901";
}
.itlike-2:before {
  content: "\e902";
}
.itlike-3:before {
  content: "\e903";
}
.itlike-4:before {
  content: "\e904";
  color: #f4ea2a;
}
.itlike-5:before {
  content: "\e905";
  color: #cdcdcd;
}
.itlike-6 .path1:before {
  content: "\e906";
  color: rgb(251, 251, 179);
}
.itlike-6 .path2:before {
  content: "\e907";
  margin-left: -1em;
  color: rgb(255, 245, 156);
}
.itlike-6 .path3:before {
  content: "\e908";
  margin-left: -1em;
  color: rgb(255, 203, 121);
}
.itlike-6 .path4:before {
  content: "\e909";
  margin-left: -1em;
  color: rgb(250, 151, 5);
}
.itlike-6 .path5:before {
  content: "\e90a";
  margin-left: -1em;
  color: rgb(249, 207, 149);
}
.itlike-6 .path6:before {
  content: "\e90b";
  margin-left: -1em;
  color: rgb(248, 162, 43);
}
.itlike-6 .path7:before {
  content: "\e90c";
  margin-left: -1em;
  color: rgb(251, 219, 178);
}
.itlike-6 .path8:before {
  content: "\e90d";
  margin-left: -1em;
  color: rgb(255, 208, 124);
}
.itlike-6 .path9:before {
  content: "\e90e";
  margin-left: -1em;
  color: rgb(89, 73, 63);
}
.itlike-6 .path10:before {
  content: "\e90f";
  margin-left: -1em;
  color: rgb(248, 126, 89);
}
.itlike-6 .path11:before {
  content: "\e910";
  margin-left: -1em;
  color: rgb(245, 81, 30);
}
.itlike-6 .path12:before {
  content: "\e911";
  margin-left: -1em;
  color: rgb(251, 251, 179);
}
.itlike-6 .path13:before {
  content: "\e912";
  margin-left: -1em;
  color: rgb(255, 245, 156);
}
.itlike-6 .path14:before {
  content: "\e913";
  margin-left: -1em;
  color: rgb(255, 203, 121);
}
.itlike-6 .path15:before {
  content: "\e914";
  margin-left: -1em;
  color: rgb(250, 151, 5);
}
.itlike-6 .path16:before {
  content: "\e915";
  margin-left: -1em;
  color: rgb(249, 207, 149);
}
.itlike-6 .path17:before {
  content: "\e916";
  margin-left: -1em;
  color: rgb(248, 162, 43);
}
.itlike-6 .path18:before {
  content: "\e917";
  margin-left: -1em;
  color: rgb(251, 219, 178);
}
.itlike-6 .path19:before {
  content: "\e918";
  margin-left: -1em;
  color: rgb(255, 208, 124);
}
.itlike-6 .path20:before {
  content: "\e919";
  margin-left: -1em;
  color: rgb(89, 73, 63);
}
.itlike-6 .path21:before {
  content: "\e91a";
  margin-left: -1em;
  color: rgb(144, 209, 205);
}
.itlike-6 .path22:before {
  content: "\e91b";
  margin-left: -1em;
  color: rgb(120, 199, 193);
}
.itlike-6 .path23:before {
  content: "\e91c";
  margin-left: -1em;
  color: rgb(251, 251, 179);
}
.itlike-6 .path24:before {
  content: "\e91d";
  margin-left: -1em;
  color: rgb(255, 245, 156);
}
.itlike-6 .path25:before {
  content: "\e91e";
  margin-left: -1em;
  color: rgb(255, 203, 121);
}
.itlike-6 .path26:before {
  content: "\e91f";
  margin-left: -1em;
  color: rgb(250, 151, 5);
}
.itlike-6 .path27:before {
  content: "\e920";
  margin-left: -1em;
  color: rgb(249, 207, 149);
}
.itlike-6 .path28:before {
  content: "\e921";
  margin-left: -1em;
  color: rgb(248, 162, 43);
}
.itlike-6 .path29:before {
  content: "\e922";
  margin-left: -1em;
  color: rgb(251, 219, 178);
}
.itlike-6 .path30:before {
  content: "\e923";
  margin-left: -1em;
  color: rgb(255, 208, 124);
}
.itlike-6 .path31:before {
  content: "\e924";
  margin-left: -1em;
  color: rgb(89, 73, 63);
}
.itlike-6 .path32:before {
  content: "\e925";
  margin-left: -1em;
  color: rgb(255, 183, 75);
}
.itlike-6 .path33:before {
  content: "\e926";
  margin-left: -1em;
  color: rgb(255, 168, 39);
}
.itlike-7:before {
  content: "\e927";
}
.itlike-spinner:before {
  content: "\e97a";
}
.itlike-spinner3:before {
  content: "\e97c";
}
.itlike-spinner6:before {
  content: "\e97f";
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        span{
            color: skyblue;
            text-shadow: 0 0 10px green;
        }
    </style>
</head>
<body>
    <span class="itlike-uniE900" style="font-size: 30rem"></span>
    <span class="itlike-1" style="font-size:10rem"></span>
</body>
</html>

运行结果为:
CSS：字体图标_html_02