如何在ShinyWidgets中正常使用Fluent UI图标

架构老林

2026-9-28

Fluent UI图标加载异常解决方案

核心问题原因

Fluent UI样式表引入时type属性拼写错误：你代码中写的是text/cstt，正确值为text/css，直接导致样式文件无法被浏览器识别加载。
checkboxGroupButtons默认会转义HTML内容，未关闭转义的情况下，你写的<i>标签会被当做纯文本渲染，无法生成图标。

修正后的完整代码

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

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"),
  # 修正type属性拼写错误
  tags$link(rel = "stylesheet", type = "text/css", 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 :", 
    # 拆分choiceNames和choiceValues，搭配escape=FALSE关闭HTML转义
    choiceNames = list(
      HTML("<i class='fa fa-bar-chart'></i>"),
      HTML("<i class='fa fa-signal'></i>"),
      HTML("<i class='fa fa-terminal'></i>"),
      HTML("<i class='glyphicon glyphicon-tree-deciduous'></i>"),
      HTML('<i class="ms-Icon ms-Icon--Color" aria-hidden="true"></i>')
    ),
    choiceValues = c("bar", "signal", "terminal", "tree", "Color"),
    justified = FALSE,
    choicesOpt = list(escape = 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)