为什么图标不显示在 Shiny 应用程序的 DT::datatable 中？答案

【问题标题】：Why are the icons not displaying in a DT::datatable in Shiny app?为什么图标不显示在 Shiny 应用程序的 DT::datatable 中？
【发布时间】：2021-05-06 22:18:10
【问题描述】：

我在 Shiny 应用程序的 DT::datatable 列中显示带有迷你图的图标时遇到了一些问题，即使我已经转义了 HTML。

编辑：删除第二个问题。

library(shiny)
library(dplyr)

ui <- fluidPage(

  htmlwidgets::getDependency('sparkline'),

  DT::dataTableOutput("table")

)

server <- function(input, output) {

    raw_data <- data.frame(date = 2000:2021,
                     value = sample(100:500, 22),
                     icon = as.character(icon("arrow-up")))

  data <- raw_data %>%
    group_by(icon) %>%
    # Create the sparkline
    summarise("value" = sparkline::spk_chr(c(value),
                                xvalues = date,
                                tooltipFormat = '{{x}}: {{y}}'))

  output$table <- DT::renderDataTable({

    cb <- htmlwidgets::JS('function(){debugger;HTMLWidgets.staticRender();}')

    DT::datatable(data = data,
              escape = FALSE,
              options = list(drawCallback = cb))
  })

}

shinyApp(ui, server)

【问题讨论】：

欢迎来到 SO。请不要在同一个帖子中问两个问题。规则是每个帖子一个问题。

标签： r shiny datatables dt sparklines

【解决方案1】：

默认情况下，shiny::icon 函数：

生成图标对应的HTML代码；
生成一个包含 font-awesome 图标库的脚本标签。

当您执行as.character(icon(...... 时，您只会获得 HTML 代码。 font-awesome 库未加载，这就是图标不显示的原因。

获取图标最简单的方法是使用 glyphicon 图标库，该库包含在 bootstrap 中，因此无需加载任何内容（因为 bootstrap 在 Shiny 应用中加载）：

as.character(icon("arrow-up", lib = "glyphicon"))

如果你真的想要一个font-awesome图标，有两种可能：

包含带有link标签的font-awesome库；
或在您的应用程序的其他地方使用icon 函数，而不使用as.character（如果您不想看到此图标，可以使用display:none CSS 属性将其隐藏），如下所示。

# add inside ui
tags$span(icon("tag"), style = "display: none;")

【讨论】：