如何将R中侧边栏菜单中默认的“角左图标”更改为“角向右图标”？

Question

我想改变默认箭头方向(如所附图片)，因此它将指向右边。

​

​

这是当前的代码：

      sidebarMenu(
        menuItem("Market data", tabName = "market data", icon = icon("users"), startExpanded = TRUE,
                 menuSubItem("Performance", tabName = "history", icon = icon("calendar-day")),
                 menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
        ),
        
        menuItem("Consumer 1", tabName = "consumer1", icon = icon("user"), startExpanded = FALSE,
                 menuSubItem("Consumption", tabName = "consumption", icon = icon("history")),
                 menuSubItem("Profile", tabName = "profile", icon = icon("poll-h")),
                 menuSubItem("Forecast engine", tabName = "forecast", icon = icon("brain"))
        )

提前感谢

Answer 1

一般信息

通常，要更改shinydashboard中的默认值，您需要为这些元素找到正确的CSS标记，然后添加您自己的自定义CSS文件来覆盖默认值。

如果您计划进行大量这些更改，那么shinydashboard框架可能不适合您。

你问题的具体解决办法

在浏览器中戳了一下之后，您将看到这些箭头的标记是.fa-angle-left:before。所显示的符号用以下CSS定义：

.fa-angle-left:before{content:"\f104"}

要将其更改为右箭头，我们需要将\f104更改为\f105

如前所述，在文件中可以将您自己的CSS-file添加为：

• 将文件www/custom.css添加到与闪亮仪表板所在的文件夹相同的文件夹中。
• 向其添加以下代码：

.fa-angle-left:before{content:"\f105"}

如果您希望箭头在单击后仍向下指向，则还需要添加

.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    transform: rotate(90deg);
}

• 完成后，需要将以下代码添加到sidebarMenu中

tags$head(
          tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        )

工作实例

app.R

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    dashboardSidebar(
      sidebarMenu(
        tags$head(
          tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        ),
        menuItem(
          "Market data",
          tabName = "market data",
          icon = icon("users"),
          menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
        )
      )
    )
  ),
  dashboardBody()
)

server <- function(input, output) {}

shinyApp(ui, server)

www/custom.css

.fa-angle-left:before{content:"\f105"}

.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    transform: rotate(90deg);
}