R Shiny: fontawesome pro 版如何使用图标功能?
R Shiny: how to use fontawesome pro version with the icon function?
我通过 icon
功能在我的 Shiny 应用程序中使用字体很棒的图标。
我已经下载了 fontawesome 的专业版,并使用此处的说明: 将 Shiny 默认使用的免费版本(在 shiny\www\shared\font-awesome
内)替换为我的付费版本。这在本地运行良好,所有专业图标都显示在我的应用程序中。
但是,当我部署到 shinyapps.io
时,Shiny 似乎又回到了使用默认版本。我确实尝试将我的 pro 目录包含在我的应用程序的 /www/
文件夹中,但没有成功。似乎没有办法告诉 icon()
函数查看本地版本的 fontawesome,例如 icon(...,lib=local)
或 icon(...,lib=path_to_fa)
...
非常欢迎任何帮助。
诀窍是,在 htmlDependency
调用中(在 icon()
函数中),删除 package = "shiny"
并用我的 FA 文件夹的绝对路径替换 "www/shared/fontawesome"
(我也更新了版本号)。
编辑:更准确地说,下面是(非常轻微地)修改后的图标功能:
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")
最简单、最可靠的方法是:
将 font-awesome 文件放在应用程序的子目录中,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()
的调用,然后会有一些 dynamically-rendered 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 将与 htmlDependency
对象一起发送到浏览器 Font-Awesome临。然而,此时,浏览器已经加载了 Font-Awesome,并且它不知道加载它的新版本——Shiny 目前无法替换 [=56= 的 already-loaded 版本] 与较新的。
将自定义 htmlDependency
添加到静态 ui
对象使其可以在初始页面呈现时解析,并且浏览器知道从一开始就加载较新的版本。我使用的版本 99.0
确保此自定义版本将“胜过” Font-Awesome htmlDependency
.
的任何其他版本
我通过 icon
功能在我的 Shiny 应用程序中使用字体很棒的图标。
我已经下载了 fontawesome 的专业版,并使用此处的说明:shiny\www\shared\font-awesome
内)替换为我的付费版本。这在本地运行良好,所有专业图标都显示在我的应用程序中。
但是,当我部署到 shinyapps.io
时,Shiny 似乎又回到了使用默认版本。我确实尝试将我的 pro 目录包含在我的应用程序的 /www/
文件夹中,但没有成功。似乎没有办法告诉 icon()
函数查看本地版本的 fontawesome,例如 icon(...,lib=local)
或 icon(...,lib=path_to_fa)
...
非常欢迎任何帮助。
诀窍是,在 htmlDependency
调用中(在 icon()
函数中),删除 package = "shiny"
并用我的 FA 文件夹的绝对路径替换 "www/shared/fontawesome"
(我也更新了版本号)。
编辑:更准确地说,下面是(非常轻微地)修改后的图标功能:
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")
最简单、最可靠的方法是:
将 font-awesome 文件放在应用程序的子目录中,
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()
的调用,然后会有一些 dynamically-rendered 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 将与 htmlDependency
对象一起发送到浏览器 Font-Awesome临。然而,此时,浏览器已经加载了 Font-Awesome,并且它不知道加载它的新版本——Shiny 目前无法替换 [=56= 的 already-loaded 版本] 与较新的。
将自定义 htmlDependency
添加到静态 ui
对象使其可以在初始页面呈现时解析,并且浏览器知道从一开始就加载较新的版本。我使用的版本 99.0
确保此自定义版本将“胜过” Font-Awesome htmlDependency
.