侧边栏图标需通过data-type属性区分表与视图:为li.table[data-type="view"]和li.table[data-type="table"]分别设置SVG图标CSS,且必须加!important覆盖内联样式,升级后需重新注入CSS。

侧边栏图标不随对象类型自动变化,得靠 CSS 类选择器区分
phpMyAdmin 的左侧数据库导航树(#serverinfo 下的 .navigation 区域)对表(TABLE)和视图(VIEW)使用了同一套 HTML 结构:<li class="database"> 包裹 <ul>,内部每个项是 <li class="table">,但不会额外加 view 或 table 类。这意味着纯 CSS 无法直接靠类名区分——必须依赖属性或内容特征。
用 data-type 属性 + 自定义 CSS 实现图标差异化
phpMyAdmin 在生成导航项时,会为每个 <li class="table"> 注入 data-type 属性,值为 "table" 或 "view"。这是唯一稳定、无需改 PHP 源码就能识别类型的依据。
- 确认你的 phpMyAdmin 版本 ≥ 5.0(v4.9 及更早不带
data-type) - 在自定义 CSS(通过
$cfg['NavigationLogoLink']引入,或直接写进themes/pmahomme/css/theme.css)中添加:
li.table[data-type="view"] .icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231976d2' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L16.5 7H13z'/%3E%3C/svg%3E") !important;
}
li.table[data-type="table"] .icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23388e3c' d='M3 13h8V3H3v10zm0-12h12v4H3V1zm10 14H3v2h10v-2z'/%3E%3C/svg%3E") !important;
}
-
!important是必要的——phpMyAdmin 内联设置了.icon的background-image,不加会被覆盖 - SVG URL 已做 URI 编码,可直接粘贴;如需换图,建议用在线工具编码后再填入
- 图标尺寸默认适配原生 16×16 像素区域,无需额外调整
background-size
别碰 config.inc.php 里的图标配置
有人尝试用 $cfg['NavigationTreeEnableGrouping'] 或 $cfg['NavigationTreeTableSeparator'] 来“分类”,但这只影响分组逻辑,完全不控制图标。还有人想改 $cfg['NavigationTreeDisplayItemFilterMinimum'],它只是隐藏小表,跟图标无关。
-
$cfg['NavigationTreeDisplayItemFilterMinimum']控制的是是否显示空表,不是图标开关 - 所有以
$cfg['NavigationTree...']开头的配置项,都不涉及图标渲染逻辑 - 试图用 JS 动态重写
.icon的style.backgroundImage风险高:phpMyAdmin 的导航树是异步加载并多次重绘的,监听时机难把握,容易漏掉新展开的节点
升级后图标样式会丢失,必须重新注入 CSS
你加的这段 CSS 不在 phpMyAdmin 官方资源里,每次升级新版(尤其是 major version 升级,如 5.2 → 5.3)后,themes/pmahomme/css/theme.css 会被覆盖。最稳妥的做法是:把这段 CSS 单独存为 custom-nav-icons.css,再通过 Nginx 或 Apache 的响应头注入,或在 config.inc.php 中用 $cfg['Servers'][$i]['extension'] 无关字段“借道”引入(不推荐),真正可靠的是用反向代理统一注入 <link rel="stylesheet"> 标签——否则每次升级都得手动补一次。
立即学习“PHP免费学习笔记(深入)”;



















