3种WordPress主题插件开发中后台左侧菜单图标的设置

我们在开发WordPress后端主题和插件的时候，后台左侧的菜单图标是可以自定义设置的，具体的常见的设置方式有这么几个。

使用 WordPress 内置 Dashicons（推荐方法）

在注册菜单时通过 add_menu_page() 函数的第6个参数指定 Dashicon：

add_menu_page(
    '主题设置',                  // 页面标题
    '主题选项',                  // 菜单标题
    'manage_options',           // 权限
    'my-theme-settings',        // 菜单slug
    'my_theme_settings_page',   // 回调函数
    'dashicons-admin-generic',  // 图标（Dashicons类名）
    60                          // 位置
);

常用 Dashicons 示例：

dashicons-admin-settings (设置齿轮)

dashicons-art (设计图标)

dashicons-cart (购物车)

dashicons-format-image (图片)

具体查看这里：https://developer.wordpress.org/resource/dashicons

使用自定义图标（Base64或URL）

// 使用Base64编码的SVG
add_menu_page(
    '主题设置',
    '主题选项',
    'manage_options',
    'my-theme-settings',
    'my_theme_settings_page',
    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0...', // 你的Base64编码
    60
);

// 或使用图片URL
add_menu_page(
    '主题设置',
    '主题选项',
    'manage_options',
    'my-theme-settings',
    'my_theme_settings_page',
    get_template_directory_uri().'/assets/images/icon.png',
    60
);

子菜单设置图标

add_action('admin_head', function() {
    echo '<style>
        #toplevel_page_my-theme-settings .wp-submenu li a[href*="subpage-slug"]:before {
            content: "\\f174"; /* Dashicons代码 */
            font-family: dashicons;
            margin-right: 5px;
        }
    </style>';
});

图标尺寸建议 20x20px

Dashicons 是首选方案，兼容性好

自定义图标时确保路径正确

菜单位置参数（数字越小位置越靠上）

未经允许不得转载：老蒋玩运营 » 3种WordPress主题插件开发中后台左侧菜单图标的设置