You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何增大R Shiny Dashboard侧边栏menuItem中图标与tabName的间距

R Shiny Dashboard侧边栏菜单图标与文字间距调整方案

你只需在现有自定义CSS中新增针对侧边栏菜单Font Awesome图标的右外边距规则即可实现需求,具体修改后的代码如下:

Dashboard_Sidebar <- dashboardSidebar(tags$head(tags$style(HTML('
                            /* Sidebar */
                            .skin-blue .main-sidebar {
                            background-color: #d3bf96;
                            font-size: 16px;
                            font-family: "Roboto";
                            }
                            
                            /* 新增:调整菜单图标与文字的间距 */
                            .skin-blue .main-sidebar .sidebar-menu li a .fa {
                              margin-right: 15px; /* 可自由调整数值,数值越大间距越大 */
                            }
                            
                            /* Sidebar other items */
                            .skin-blue .main-sidebar .sidebar a{
                            color: #000000;
                            padding-left: 20px;
                            }
                            
                            /* Sidebar when active/hover */
                            .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover , 
                            .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                            background-color: #000000;
                            color: #ffffff;
                            padding-top: 10px;
                            padding-left: 20px;
                            display: block;
                            border-color: transparent;
                            }
                            '))),

                        width = 250,
                        sidebarMenu(
                                menuItem("Introduction",tabName = "introduction", icon = icon("file-alt", "fa-lg fa-fw"))
))

补充说明

  • 数值15px可根据你的视觉需求随意调整,不需要改动其他代码
  • 如果你需要单独调整某一个menuItem的间距,可以给对应menuItem添加自定义类,再写对应CSS规则即可

内容的提问来源于stack exchange,提问作者Nehau

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 06:36:03