问题描述

  • 在做项目的时候遇到一个很奇怪的问题，引入的图标和示例图标的引入方式一样，类名一样，审查元素发现连content也一样
  • 唯独最后出现的效果非预期
  • 表现为预期A,显示B

排查过程

  • 检查现运行项目是否引入了多个图标库
  • 检查现运行项目是否引入方式错误，iconfont.css,或者iconfont.js
  • 检查现运行项目所有的html文件对字体图标的引用
  • 检查其依赖包

定位问题

  • 运行项目采用create-react-app 搭建，进入public文件夹下查看字体图标的示例html,发现能正常显示
  • 缩小排查范围，存在自定义的依赖包，引用了字体图标而产生冲突

误区

  • 造成图标显示错乱的未必只有当前项目，还有可能是其依赖的包 （node_modules下）
  • 引入css的地方未必只有html，less,scss,js都可以
  • 亲测，本次踩坑的字体图标的iconfont.css在一个全局的less文件中被引用，我…？？？

规避方案

  • 一般很少遇到此类问题，但如果有自己开发的依赖包，且引用了字体图标就要小心了
  • 尽可能保证运行项目和子项目图标库高度统一