如何在 ShinyWidgets 中使用 Fluent UI 图标

Question

我在“shinyWidgets”包中使用流畅的 UI 图标时遇到问题。

与 Fontawesome 和 Glyphicon 图标相比，我无法使用 tags$i() 和 checkboxGroupButtons() 访问流畅的 UI 图标

如果您有任何解决方案，请告诉我。

library(shiny)
library(shiny.fluent)
    
ui <- fluidPage(
  tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"),
  tags$link(rel = "stylesheet", type = "text/cstt", href = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"),
  
  checkboxGroupButtons(
    inputId = "check",
    label = "Choose a graph :", 
    choices = c(`<i class='fa fa-bar-chart'></i>` = "bar",  
                `<i class='fa fa-signal'></i>` = "signal", 
                `<i class='fa fa-terminal'></i>` = "terminal",
                `<i class="glyphicon glyphicon-tree-deciduous"></i>` = "tree",
                `<i class="ms-Icon ms-Icon--Color" aria-hidden="true"></i>`= "Color"),
    justified = FALSE), 
  verbatimTextOutput("OUT"), 
  span("FontIcon expression in shiny,fluent"), FontIcon(iconName = "Color"),br(),
  span("glyphicon i tag"), tags$i(class="glyphicon glyphicon-tree-deciduous"),br(),
  span("Fluent UI i tag :"), tags$i(class="ms-Icon ms-Icon--Color"),br(),
  span("Fontawesome i tag:"), tags$i(class="fa fa-bar-chart"))

server <-function(input, output, session)
{
  output$OUT <- renderText({
    print(input$check)
  })
}

shinyApp(ui = ui, server = server)

Answer 1

删除 type = "cstt"，这有效：

library(shiny)
library(shiny.fluent)
library(shinyWidgets)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"),
    tags$link(rel = "stylesheet", href = "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css")
  ),
  checkboxGroupButtons(
    inputId = "check",
    label = "Choose a graph :", 
    choices = c(`<i class='fa fa-bar-chart'></i>` = "bar",  
                `<i class='fa fa-signal'></i>` = "signal", 
                `<i class='fa fa-terminal'></i>` = "terminal",
                `<i class="glyphicon glyphicon-tree-deciduous"></i>` = "tree",
                `<i class="ms-Icon ms-Icon--Color" aria-hidden="true"></i>`= "Color"),
    justified = FALSE), 
  verbatimTextOutput("OUT"), 
  span("FontIcon expression in shiny,fluent"), FontIcon(iconName = "Color"),br(),
  span("glyphicon i tag"), tags$i(class="glyphicon glyphicon-tree-deciduous"),br(),
  span("Fluent UI i tag :"), tags$i(class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"),br(),
  span("Fontawesome i tag:"), tags$i(class="fa fa-bar-chart"))

server <-function(input, output, session)
{
  output$OUT <- renderText({
    print(input$check)
  })
}

shinyApp(ui = ui, server = server)

如何在 ShinyWidgets 中使用 Fluent UI 图标

How to use Fluent UI icons in ShinyWidgets

r

shiny

shinywidgets

fluent-ui