R Shiny:如何将fontawesome专业版与图标功能一起使用? [英] R Shiny: how to use fontawesome pro version with the icon function?

问题描述

我通过 icon 函数.

I'm using fontawesome icons throughout my Shiny app via the icon function.

我已经下载了fontawesome的专业版，并在此处使用了说明:

I've downloaded the pro version of fontawesome, and used the instructions here: shinydashboard some Font Awesome Icons Not Working to replace the free version that Shiny is using by default (inside shiny\www\shared\font-awesome) with my paying version. This works very well locally, and all the pro icons show in my app.

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

However, when I deploy to shinyapps.io, it seems like Shiny goes back to using the default version. I did try including my pro directory inside the /www/ folder of my app, but without success. Seems like there is no way to tell the icon() function to look at a local version of fontawesome, something like icon(...,lib=local), or icon(...,lib=path_to_fa)...

非常欢迎任何帮助.

推荐答案

最简单，最可靠的方法是:

The simplest and most reliable way to do this is to:

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

将以下内容添加到UI代码中:

Add the following somewhere to the UI code:

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

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

Here's an example app that illustrates:

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())，其中包含对icon()的调用. my_icon()使用仅在Font-Awesome Pro中使用的图标，然后该Pro图标将不会显示.我在这里显示的方法不会有此问题.

One potential issue with the other method is that if the ui component contains a call to icon(), and then there is some dynamically-rendered UI (via renderUI() and uiOutput()) which contains a call to my_icon() that uses an icon that's only in Font-Awesome Pro, then that Pro icon will not show up. The method I showed here will not have that problem.

这是另一个方法会有此问题的原因:将应用程序的静态ui呈现为HTML时，它将在ui中查找htmlDependency对象，并为htmlDependency提供最新版本的htmlDependency对象.给定名称(在这种情况下为"font-awesome")"wins".因此，如果代码中仅调用了icon()(而在我的示例中没有调用my_icon()或显式的htmlDependency())，那么胜出的htmlDependency for Font-Awesome就是Shiny附带的htmlDependency，撰写本文时为5.13.0.浏览器将请求该版本的Font-Awesome.

Here's why the other method will have that problem: When the static ui for an application is rendered to HTML, it looks for htmlDependency objects in the ui, and the newest version of an htmlDependency for a given name (in this case "font-awesome") "wins". So if there's just a call to icon() in the code (and no call to my_icon(), or the explicit htmlDependency() in my example), then the htmlDependency for Font-Awesome that wins is the one that comes with Shiny, 5.13.0 as of this writing. The browser will request that version of Font-Awesome.

稍后，如果renderUI()插入带有Pro图标的my_icon()，则HTML将与Font-Awesome Pro的htmlDependency对象一起发送到浏览器.但是，到那时，浏览器已经加载了Font-Awesome，并且它不知道要加载它的较新版本-Shiny当前无法用较新的版本替换已经加载的Font-Awesome版本.

Later, if a renderUI() inserts a my_icon() with a Pro icon, the HTML will be sent to the browser along with an htmlDependency object for Font-Awesome Pro. However, at that point, the browser already has loaded Font-Awesome, and it will not know to load this newer version of it -- Shiny currently is not able to replace the already-loaded version of Font-Awesome with a newer one.

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

Adding the custom htmlDependency to the static ui object makes it so it can be resolved at initial page render time, and the browser knows to load the newer version from the start. The version I used, 99.0, ensures that this custom version will "win" over any other version of a Font-Awesome htmlDependency.

这篇关于R Shiny:如何将fontawesome专业版与图标功能一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！