踩坑记录_vant图标字体不生效,显示成小方框□

在使用van组件库的时候,采用的官方推荐的自动按需引入方式。踩坑记录_vant图标字体不生效,显示成小方框□

结果发现官方的图标字体一直都不生效,显示成小方框□。查询资料的时候大多说的是再才导入样式即可,可是发现还是不行。踩坑记录_vant图标字体不生效,显示成小方框□
最终在看样式的时候发现图标字体变成了这个,和正常显示的font并不一样。踩坑记录_vant图标字体不生效,显示成小方框□
踩坑记录_vant图标字体不生效,显示成小方框□
最终发现是在引入Reset CSS格式化浏览器默认样式代码的问题。
踩坑记录_vant图标字体不生效,显示成小方框□
这将会导致vant的默认图标字体全部进行更改,从而没有效果。

当然,所以你可以选择将格式化字体样式的代码删除,或者这里也推荐使用normalize.css进行浏览器默认样式的清除。

采用自动按需引入方式引入组件,其实不用再次引入css样式代码了。