如何修改指定自定义文章类型（CPT）的内置Dashicon图标颜色

我懂你遇到的困扰了——之前试过的方法只能改页面内的Dashicon，却碰不到后台菜单里的，而且你只想高亮某一个特定的自定义文章类型（比如Movies），不是全部。别担心，咱们用精准的CSS选择器加上后台样式注入就能解决这个问题。

步骤1：找到目标CPT的菜单ID #

首先得确定你要修改的自定义文章类型对应的菜单元素ID，操作很简单：

• 打开WordPress后台，找到左侧菜单里的「Movies」选项
• 右键点击它，选择「检查」（Chrome或Firefox的开发者工具）
• 在HTML结构里，你会看到这个菜单项的<li>标签有一个类似menu-posts-movies的ID（格式是menu-posts-{你的CPT slug}，如果你的CPT slug是movies，那就是这个ID）

步骤2：编写针对性的CSS代码 #

我们需要针对菜单里的Dashicon设置颜色，还要覆盖默认样式（所以加上!important确保优先级）。下面是示例代码，你可以根据需求修改颜色值：

/* 正常状态下的图标颜色 */
#menu-posts-movies .wp-menu-image .dashicons {
    color: #ff4500 !important; /* 这里用橙色，你可以换成任意颜色 */
}

/* 鼠标悬停时的图标颜色 */
#menu-posts-movies:hover .wp-menu-image .dashicons {
    color: #ffffff !important; /* 悬停时换成白色，适配菜单背景 */
}

/* 菜单处于选中状态时的图标颜色 */
#menu-posts-movies.wp-has-current-submenu .wp-menu-image .dashicons {
    color: #ffffff !important;
}

步骤3：将CSS注入到WordPress后台 #

最稳妥的方法是通过主题的functions.php文件添加后台样式（注意：如果用子主题，优先修改子主题的functions.php，避免主题更新丢失代码）：

add_action('admin_head', 'custom_cpt_dashicon_color');
function custom_cpt_dashicon_color() {
    echo '<style>
        #menu-posts-movies .wp-menu-image .dashicons {
            color: #ff4500 !important;
        }
        #menu-posts-movies:hover .wp-menu-image .dashicons {
            color: #ffffff !important;
        }
        #menu-posts-movies.wp-has-current-submenu .wp-menu-image .dashicons {
            color: #ffffff !important;
        }
    </style>';
}

关键提示 #

• 替换代码中的movies为你实际的CPT slug（比如你的CPT是「Books」，slug是book，就把menu-posts-movies改成menu-posts-book）
• 颜色值可以用十六进制、RGB、甚至颜色名称（比如red），按需调整即可
• 用!important是为了覆盖WordPress默认的后台样式，确保你的颜色设置生效

这样操作后，只有你指定的那个自定义文章类型的后台菜单图标会变色，其他Dashicon不受影响，还能完美覆盖正常、悬停、选中三种状态~

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