WordPress启用Max Mega Menu后Dash icons无法正常显示问题咨询

该问题的具体诱因主要有三类： #

• Mega Menu插件CSS优先级冲突：该插件默认会加载自带的图标库资源，其内置的CSS规则存在通用字体属性重置逻辑，若其CSS文件加载顺序晚于WordPress原生Dashicons的CSS文件，会直接覆盖Dashicons的字体声明，导致图标无法匹配到正确的字体文件，无法正常渲染。
• 缓存插件的资源合并逻辑异常：你使用的Autoptimize、WP Rocket均带有CSS合并压缩功能，合并CSS时如果调整了Dashicons规则与Mega Menu CSS规则的先后顺序，或是合并过程中漏处理了Dashicons的@font-face声明，会导致合并后的CSS文件本身就存在规则冲突，这种情况即使清除站点缓存也无法解决问题，且由于CSS规则本身语法合法，浏览器控制台不会抛出错误信息。
• Mega Menu内置资源拦截逻辑触发：部分版本的Max Mega Menu为了减少冗余资源加载，默认开启了非自有图标资源拦截规则，会在WordPress资源入队阶段直接取消Dashicons的加载请求，该操作是服务端层面执行的，浏览器不会收到资源加载失败的报错，自然不会在控制台输出异常。

可临时关闭两个缓存插件的CSS合并功能后验证问题是否消失，就能快速定位是否为缓存插件合并逻辑导致的问题。

内容的提问来源于stack exchange，提问作者Mujahid Bhoraniya