将图像添加到闪亮动作按钮

Question

我有一个闪亮的动作按钮,但我希​​望显示图像而不是字体.我已经使用标签$按钮作为动作按钮.这会显示一个小灰框.相反,我想显示一个"电源"按钮.

 fluidRow(
      column(4,offset=11,
        tags$button(
        id = "reset_button",
        class="btn action-button"

        ))),

谢谢!

Answer 1

使用icon函数的参数非常简单actionButton():

actionButton("goButton", "", icon = icon("play-circle"))

或者,您可以使用该功能icon()在按钮代码中添加图标:

tags$button(
          id = "reset_button",
          class="btn action-button",
          icon("close")

        )

或者您使用该img()功能使用您自己的:

    tags$button(
      id = "web_button",
      class = "btn action_button",
      img(src = "http://www.craftech.com/wp-uploads/2015/05/web.png",
               height = "50px")
    )

要获得更全面的可能图标列表,请查看软件包的?icon帮助页面shiny和该See Also部分中的链接.

一个示例应用:

shinyApp(
  ui = shinyUI(
    fluidPage(
      fluidRow(
        actionButton("goButton", "", icon = icon("play-circle")),
        tags$button(
          id = "reset_button",
          class="btn action-button",
          icon("close")

        ),
        tags$button(
          id = "web_button",
          class = "btn action-button",
          tags$img(src = "http://images.all-free-download.com/images/graphicthumb/button_play_89677.jpg",
                   height = "50px")
        )
      ),
      fluidRow(
        textOutput("text")
      )
    )
  ),
  server = function(input, output, session){
    out <- reactiveVal("Nothing")
    observeEvent(input$goButton,{
      out("Go Pushed")
    })
    observeEvent(input$reset_button,{
      out("Resetted")
    })
    observeEvent(input$web_button,{
      out("From the web")
    })
    output$text <- renderText({out()})
  }
)

Answer 2

这是另一个对我有用的简单解决方案：

actionButton(inputId = "A.button", label = NULL, style = "width: 50px; height: 50px;
background: url('MyImage.png');  background-size: cover; background-position: center;")

图像应位于应用程序文件夹内的 www 文件夹中，在这种情况下，背景大小使图像适合按钮大小，或者您可以使用background-repeat: no-repeat; 确保图像不会重复填充大小，居中应使图像垂直和水平居中。

原则上也可以将图像作为标签，例如：

label = img (src="MyImage.png", width="30", height="30"),

但是，与将其插入为背景相比，图像可能会超出按钮的边缘。