R Shiny：如何使用带有图标功能的fontawesome pro版？答案

【问题标题】：R Shiny: how to use fontawesome pro version with the icon function?R Shiny：如何使用带有图标功能的fontawesome pro版？
【发布时间】：2019-08-05 10:02:55
【问题描述】：

我通过 icon 函数在我的 Shiny 应用程序中使用 fontawesome 图标。

我已经下载了 fontawesome 的专业版，并使用此处的说明：shinydashboard some Font Awesome Icons Not Working 将 Shiny 默认使用的免费版本（在shiny\www\shared\font-awesome 内）替换为我的付费版本。这在本地运行良好，所有专业图标都显示在我的应用程序中。

但是，当我部署到 shinyapps.io 时，Shiny 似乎又回到了使用默认版本。我确实尝试将我的 pro 目录包含在我的应用程序的 /www/ 文件夹中，但没有成功。似乎没有办法告诉icon() 函数查看本地版本的fontawesome，例如icon(...,lib=local) 或icon(...,lib=path_to_fa)...

非常欢迎任何帮助。

【问题讨论】：

标签： r shiny font-awesome shinyapps

【解决方案1】：

诀窍是，在htmlDependency 调用中（在icon() 函数中），删除package = "shiny" 并将"www/shared/fontawesome" 替换为我的FA 文件夹的绝对路径（我还更新了版本号）。

编辑：更准确地说，下面是（非常轻微）修改的图标功能：

my_icon = function (name, class = NULL, lib = "font-awesome") {

prefixes <- list(`font-awesome` = "fa", glyphicon = "glyphicon")
  prefix <- prefixes[[lib]]
  if (is.null(prefix)) {
    stop("Unknown font library '", lib, "' specified. Must be one of ", 
         paste0("\"", names(prefixes), "\"", collapse = ", "))
  }
  iconClass <- ""
  if (!is.null(name)) {
    prefix_class <- prefix
    #if (prefix_class == "fa" && name %in% font_awesome_brands) {
    #  prefix_class <- "fab"
    #}
    iconClass <- paste0(prefix_class, " ", prefix, "-", name)
  }
  if (!is.null(class)) 
    iconClass <- paste(iconClass, class)
  iconTag <- tags$i(class = iconClass)
  if (lib == "font-awesome") {
    htmlDependencies(iconTag) <- htmlDependency("font-awesome", 
                                                "5.7.2", "./www/shared/fontawesome/", 
                                                stylesheet = c("css/all.min.css"))
  }
  htmltools::browsable(iconTag)
}

除了注释掉一些行之外，我唯一更改的部分是htmlDependency 调用。在原始函数中，它是：

htmlDependency("font-awesome", "5.3.1", "www/shared/fontawesome", package = "shiny",
               stylesheet = c("css/all.min.css", "css/v4-shims.min.css")

【讨论】：

您是否对 Shiny CSS 进行了任何更改以表明您使用的是 Font Awesome Pro？我按照您在原始问题中发布的链接中的步骤以及您描述的 htmlDependency 步骤进行操作，但我的应用程序中只显示免费图标。我查看了我的 Font Awesome 下载中的 all.min.css 文件，它包含专业图标。有什么想法吗？
不。您确定您获取并使用修改后的icon() 函数吗？你把pro目录复制到your_app\www\shared\fontawesome了吗？

【解决方案2】：

最简单、最可靠的方法是：

将字体真棒文件放在应用程序的子目录www/fontawesome/

在 UI 代码的某处添加以下内容：

 htmlDependency(
   name = "font-awesome", version = "99.0",
   src = "./www/fontawesome",
   stylesheet = "css/all.min.css"
 )

这是一个示例应用程序，说明：

shinyApp(
  ui = fluidPage(
    "This is a Font-Awesome Pro-only icon: ", icon("acorn"),
    htmlDependency(
      name = "font-awesome", version = "99.0",
      src = "./www/fontawesome", stylesheet = "css/all.min.css"
    )
  ),
  function(input, output, session) { }
)

另一种方法的一个潜在问题是，如果ui 组件包含对icon() 的调用，那么就会有一些动态呈现的UI（通过renderUI() 和uiOutput()）包含对my_icon() 使用仅在 Font-Awesome Pro 中的图标，则该 Pro 图标将不会显示。我这里展示的方法不会有这个问题。

这就是为什么另一种方法会出现这个问题的原因：当应用程序的静态 ui 呈现为 HTML 时，它会在 ui 中查找 htmlDependency 对象，并在 htmlDependency 的最新版本中查找给定名称（在本例中为“font-awesome”）“获胜”。因此，如果代码中只调用了icon()（而没有调用my_icon()，或者在我的示例中没有调用htmlDependency()），那么获胜的Font-Awesome 的htmlDependency 就是Shiny 附带的，截至撰写本文时为 5.13.0。浏览器将请求该版本的 Font-Awesome。

稍后，如果 renderUI() 插入带有 Pro 图标的 my_icon()，则 HTML 将与 Font-Awesome Pro 的 htmlDependency 对象一起发送到浏览器。然而，此时浏览器已经加载了 Font-Awesome，它不会知道要加载它的新版本——Shiny 目前无法用新版本替换已经加载的 Font-Awesome 版本。

将自定义htmlDependency 添加到静态ui 对象使其可以在初始页面呈现时解析，并且浏览器知道从一开始就加载较新的版本。我使用的版本 99.0 确保此自定义版本将“胜过”任何其他版本的 Font-Awesome htmlDependency。

【讨论】：