icomoon字体图标的使用与引用

字体图标的优点：
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。

灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
网址 https://icomoon.io
进入icomoom首页后，找到IcoMoon App

然后选择你要下载的图片，选择Generate Font

然后右下角就成为Font Download，点击Download

这时下载好了，我们解压

icomoon的引入
解压后会有style.css的样式，我们复制@font-face

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

解压后里面有个demo.html

复制到html以后如下图所示，这时候还不能用，我们要指定字体

指定字体如下图所示

最后，打开浏览器，我的字体图标出来了，颜色也变了，大功告成。