WordPress中i-feather图标搭配CDN JavaScript无法显示问题排查

1. 未执行图标初始化脚本 #

Feather Icons脚本加载后，必须调用初始化函数才能渲染图标。你需要添加初始化代码：

feather.replace()

推荐通过functions.php追加到已加载的脚本后，确保执行顺序正确：

wp_enqueue_script('mi-ifeather', 'https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.1/feather.min.js', array(), '1.0', true);
// 追加初始化代码到目标脚本后
wp_add_inline_script('mi-ifeather', 'feather.replace();', 'after');

2. HTML图标标签格式错误 #

检查测试用的HTML代码是否符合规范，正确格式应为：

<i data-feather="图标名称"></i>

例如测试home图标：

<i data-feather="home"></i>

注意不能拼写错误图标名称，也不能遗漏data-feather属性。

3. 脚本与DOM加载顺序冲突 #

你设置脚本在</body>前加载（wp_enqueue_script最后一个参数为true），如果图标DOM在脚本加载前就已存在，直接调用feather.replace()没问题；但如果是动态生成的图标，需要用DOM加载完成事件包裹初始化代码：

document.addEventListener('DOMContentLoaded', function() {
  feather.replace();
});

4. PHP代码引号格式错误 #

你functions.php中的代码使用了中文全角引号（‘’“”），这会导致PHP解析异常，必须替换为英文半角引号：

wp_enqueue_script('mi-ifeather', 'https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.1/feather.min.js', array(), '1.0', true);

虽然页面已生成script标签，但隐藏的解析问题可能导致脚本未正确执行。

5. 查看浏览器控制台报错 #

按F12打开开发者工具，切换到Console面板，查看是否有feather is not defined（脚本未加载）或DOM相关错误，根据报错信息精准定位问题。

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