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"),

然而，与将其插入背景相比，图像可能会突出于按钮的边缘。

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

2 个答案: