在使用van组件库的时候,采用的官方推荐的自动按需引入方式。![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106175150840.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70#pic_center)
结果发现官方的图标字体一直都不生效,显示成小方框□。查询资料的时候大多说的是再才导入样式即可,可是发现还是不行。![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106175046310.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70#pic_center)
最终在看样式的时候发现图标字体变成了这个,和正常显示的font并不一样。![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106175334986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106175600798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70#pic_center)
最终发现是在引入Reset CSS
格式化浏览器默认样式代码的问题。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106175730472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI1MzMzNg==,size_16,color_FFFFFF,t_70#pic_center)
这将会导致vant的默认图标字体全部进行更改,从而没有效果。
当然,所以你可以选择将格式化字体样式的代码删除,或者这里也推荐使用normalize.css
进行浏览器默认样式的清除。
采用自动按需引入方式引入组件,其实不用再次引入css样式代码了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)