字体图标的使用方法

字体图标的使用；

1. 推荐下载网站 icoMoon字体图标下载链接
本网站是外国服务器，加载速度会比较慢一点。但是超级好用啊；

2.推荐下载网站阿里妈妈网站也好用啊，点击下载吧
阿里妈妈国内的也很好用的！

重点啦啦啦啦——————都是免费的嘿！

• icoMoon使用方法
  点击链接进去。。。
  

上面的部分相信大家伙肯定按照图片能下载到安装包吧，下面就看仔细啦！！！

- 我们的fonts文件一定要放在根目录下面，意思就是使我们的html页面在哪个目录下面，我们的fonts文件就要放在同一目录下面！

完了找到我们的stylse.css文件，复制前面一段代码，或者我下面给大家复制好的！

复制代码里面的第一段代码，也就是下面的几行代码！完事将下面这段代码放到你所写的CSS里面去-----字体声明

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

就像下面这样

我们来使用一下字体图标

我们给div添加一个字体图标！！！

点击demo.html文件，就会找到我们刚刚添加到的字体图标，然后复制后面的小框框，然后去我们的html文件里面粘贴到你想要添加到的地方啦

最后，我们将复制好的字体图标粘到需要添加的地方，然后去声明存放字体图标的盒子的字体样式。

就完了！！！！！！！！！！！！！！

就是下面这句话哈，也就是上面代码的第一句话给他复制下来就好啦

    div {
      font-family: 'icomoon';
    }

完事我们来打开浏览器看一看！

小家伙出现了！
阿里的字体图标也大同小异，自己琢磨琢磨吧！

我们的字体图标是可以设置样式的，可以尝试一下哦~