icon-font

      icon-font，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法，不仅体积小，而且以维护，昨天做网页时第一次用，大小和颜色可通过修改文字大小和颜色实现，拉伸不变形，不要太好用

我是直接使用网站上的Icon Font实现的，推荐一个不错的网站 https://icomoon.io/ ，里面有好多免费的Icon Font

点击右上角IcoMoon App就可以看到很多免费Icon Font，还可以通过工具栏

上传、选择、移动、简单编辑图标，选择好需要下载的图标后

可以生成svg等格式的图标或图标文字

1. 点击 Generate Font 可生成icon font，并下载到本地。

2. 解压文件，打开icomoon文件夹中的demo.html文件，可以看到不同ico font的名称及编码

3. 将icomoon文件夹中的foots文件夹放到网页项目文件夹中，fonts文件夹中有四种不同类型的文件，为了满足不同的浏览器的兼容性。

4. 接下来就可以在我们的网页中使用ico font了，在css文件中使用@font-face自定义字体

@font-face{
    font-family: "icomoon-icon";
    src: url("../fonts/icomoon.eot") format("embedded-opentype")
         ,url("../fonts/icomoon.woff") format("woff")
         ,url("../fonts/icomoon.ttf") format("truetype")
         ,url("../fonts/icomoon.svg") format("svg");
    font-weight: normal;
    font-style: normal;

}

5. 在HTML文件需要图标的标签中写入对应图标的编号(步骤2)，如相机的编号为e90f，则写入 ，并为标签添类

<i class="icomoon-icon">&#xe90f;</i>

6. 通过css设置字体样式设置图标大小及颜色

.icomoon-icon{
    font-family: "icomoon-icon";
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: red;
}

效果图：
7. 也可以自己制作icon font ，后续再总结