iconfont 字体图标错乱

iconfont 字体图标错乱

      • 问题描述
      • 排查过程
      • 定位问题
      • 误区
      • 规避方案

问题描述

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

排查过程

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

定位问题

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

误区

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

规避方案

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

你可能感兴趣的:(其他)