css 导入 icomoon 图标，浏览器显示成方块的解决方法

在 css 中使用 iconmoon 图标后，浏览器并未像预期一样显示正确的图标，而是图标全部变成了小方块。这种情况说明 icon 导入失败了。

---

以下是解决方法。

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

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

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

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

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

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

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

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

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

我们需要格外注意字体文件路径是否正确，这种写法表示添加字体图标的css文件与fonts文件夹在同一个目录下，而事实上fonts文件夹在上一级目录中。

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

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

---

在使用字体图标时，要注意字体文件路径的问题。如果不能正常显示出来图标的话，很有可能是路径出现问题了。

原文作者：Katzelala
原文链接：https://blog.csdn.net/weixin_41790566/article/details/107676772