带图像的样式下载按钮

Question

我想在下载按钮中显示图像，就像这个链接- https://jsfiddle.net/flexmonster/67yx16ec/。在这个链接中有“到Excel”按钮，我想复制相同的闪亮。我用下面的代码尝试了一下，但是没有成功。

library(shiny)
library(shinydashboard)
ui <- shinyUI( dashboardPage(
  dashboardHeader(
    title="Styling Download Button"
  ),
  dashboardSidebar(
    tags$style(type="text/css", "#download1 {color: black; background-image: url(https://www.flexmonster.com/flexmonster/toolbar/img/toolbar/menu_xls_large.png);}"),
    downloadButton("download1", label="Download with style", class = "butt1")
  ),
  dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})

shinyApp(ui, server)

Answer 1

我会推荐一个SVG图标。它们的质量更好。下载SVG excel图标文件，并将其放入应用程序的www子文件夹中。例如，我下载了this one并将其命名为icon-excel.svg.

library(shiny)
library(shinydashboard)

ui <- shinyUI( dashboardPage(
  dashboardHeader(
    title = "Styling Download Button"
  ),
  dashboardSidebar(
    downloadButton(
      "download1",
      label = tagList(
        tags$img(src = "icon-excel.svg", width = "30", height = "30"),
        tags$span("Download", style = "color: #007732; font-weight: bold")
      )
    ),
    tags$script(HTML("$('#download1').css('padding-left',2).find('>i').remove();"))
  ),
  dashboardBody()
))
#server.r
server <- shinyServer(function(input, output) {})

shinyApp(ui, server)

​

​