css导入icomoon图标变成方块问题

出现的问题是，导入的图标全部变成了小方块。这种情况表示你的icon导入失败了。

以下是解决

---

我们在使用字体的时候是按照以下步骤的

1 打开网站寻找需要的图标

https://icomoon.io/app/#/select

或者https://github.com/feathericons/feather#feather

2 下载图标文件，并且解压

3 把fonts和style.css移到你的工程文件夹下。

fonts是一个单独的文件夹，而style.css就和其他css文件放在一起。

问题就出在了文件夹这里，默认的style.css是这样写的

 

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

注意地址栏，这种写法表示style.css和fonts在同一个文件夹下，而事实上不是

所以需要把地址前面加两个点表示上一级

这样就可以顺利导入图标了

遇到同类的，方框问题的时候，很有可能是某些错误导致图标根本就没有正确引入，

比如地址书写错误之类的，问题不一定相同，可以从这个思路出发去解决。