如何使 shiny 儀表板應用程序/徽標更大？

Question

我有以下代碼可以制作一個簡單的 shiny 應用程序。 我的目標是使圖像/徽標更大並將側邊欄菜單向下推一點。

library(shinydashboard)
library(shiny)
ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='100')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Overview", icon = icon("tachometer"))
      
    )
  })
}
shinyApp(ui, server)

上面的代碼產生以下 output。

我想要的 output 像這樣，圖像更大。

雖然如果我嘗試直接在 tags$img() 上編輯寬度/高度，它會使圖像變大，但它會被截斷，如下所示。

ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
                                   height = '120', width ='200')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody()
)

Answer 1

You can add css elements to override the default css from library(shiny) https://shiny.rstudio.com/articles/html-tags.html

library(shinydashboard)
library(shiny)
ui <- dashboardPage(
  dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '120px', width ='200px')),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),

  dashboardBody(
    tags$head(
tags$style(".skin-blue .main-header .logo {
color: #fff;
border-bottom: 0 solid transparent;
height: 125px;
}"),
tags$style(".skin-blue .sidebar a {
    color: #b8c7ce;
    padding-top: 50%;
}")
    )
)
)
server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Overview", icon = icon("tachometer-alt"))
      
    )
  })
}
shinyApp(ui, server)