シャイニーアクションボタンに画像を追加

Question

私は光沢のあるアクションボタンを持っていますが、フォントの代わりに画像を表示したいと思います。私はアクションボタンの$ buttonタグを使用しています。小さな灰色のボックスが表示されます。代わりに私は "電源"ボタンを表示したいと思います。

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

     ))), 

ありがとうございます！機能actionButton()の引数iconと非常に簡単です

Answer 1

：また

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

可能なアイコンのより包括的なリストを入手するには、shinyパッケージの?iconヘルプページと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 center;") 

画像は、この場合、アプリのフォルダ内のwwwフォルダ、バックグラウンドの大きさにする必要がありますイメージをボタンサイズに合わせるには、background-repeat: no-repeat;を使用してイメージがサイズを塗りつぶすのに繰り返されないようにすることができます。 中心の中心はイメージを縦と横の中心に合わせる必要があります。

一つは、原則的にも同様に、ラベルとして画像を入れることができます：

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

しかし、その後、画像が背景として挿入に比べて、ボタンの端に突き出しことができます。