现象
前台页面引入字体图标后，前台展示正常，但在后台编辑实时预览状态时不可见。
排查过程
通过开发员工具未发现任何相关引入错误。联想到之前直接把字体图标引入路径以绝对方式写在主题额外样式中时，可以正常预览。因此怀疑是后台编辑器没有引入字体文件的问题。后台编辑器与前端加载样式和脚本的时机不同。直接写在”额外样式”里可能全局输出，而 wp_enqueue_style 若钩子使用不当，可能导致样式在编辑器完成渲染后才加载。
| 场景 | 钩子 |
|---|---|
| 网站前台 | wp_enqueue_scripts |
| 网站后台 | admin_enqueue_scripts |
| 登录页面 | login_enqueue_scripts |
解决方案
修改主题function文件中字体图标引入代码。在使用wp_enqueue_scripts钩子的基础上，增加了 admin_enqueue_scripts 钩子，并确保在 wp_enqueue_scripts 之前加载。
// 将你的字体图标样式同时加入前台和后台
function add_my_font_icon_styles() {
wp_enqueue_style(
'your-font-icon-handle', // 你的字体图标样式句柄
'path-to-your-font-icon.css', // 字体图标样式表路径
array(), // 依赖，如果有请填写
'1.0.0' // 版本号
);
}
add_action( 'wp_enqueue_scripts', 'add_my_font_icon_styles');
// 增加使用 admin_enqueue_scripts 钩子，并设置较高的优先级，如 999
add_action( 'admin_enqueue_scripts', 'add_my_font_icon_styles', 999 );拓展方案
专门添加编辑器支持：为了让字体图标在块编辑器中也生效，最可靠的方法是使用 add_editor_style() 函数。这个函数是WordPress为了确保自定义样式在编辑器中正确加载而提供的标准方式。
// 将自定义字体图标样式加入到块编辑器
function add_editor_font_icon_styles() {
add_editor_style( 'path-to-your-editor-font-icon.css' );
}
add_action( 'after_setup_theme', 'add_editor_font_icon_styles' );
文章目录