在 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