Navbar social share and source code buttons not rendering

[e-leo]

I have a simple flexdashboard (https://www.marylandhbe.com/wp-content/docs/COVID_Uninsured_Analysis_Dashboard.html) which has the social share and source code buttons in the top right corner. As you can see, it compiled and generated just fine a few weeks ago. I updated some data and recompiled and now the social share and source code icons are showing as empty white boxes:

I've attempted the fix listed here , putting that code first before anything else in my script and also tried putting it after my library calls and I am still getting the icon display issue. All of my leaflet maps are also zoomed out, despite none of the code being different. I've gone over my script line by line and do not see ANY differences. I was able to fix all the font-awesome icons I use elsewhere on the page by adding the fas namespace, but I have no idea how to force flexdashboard/rmarkdown to use that new namespace. Any assistance would be much appreciated.

[cderv]

How do you insert icon in flexdashboard ? Using the navbar field ?
Which version of rmarkdown are you using currently ?

We've made a few changes for new prefix in rmarkdown but we may have missed something there, or in flexdashboard directly.

It is possible that flexdashboard does not yet use the prefix and it should

flexdashboard/R/flex_dashboard.R

Lines 549 to 592 in 82e9927

	navbar_links <- function(social, source_code) {
	links <- list()
	# social links
	for (service in social) {
	if (identical(service, "menu")) {
	menu <- list(icon = "fa-share-alt")
	menu$items <- list(
	list(title = "Twitter", icon = "fa-twitter"),
	list(title = "Facebook", icon = "fa-facebook"),
	list(title = "LinkedIn", icon = "fa-linkedin"),
	list(title = "Pinterest", icon = "fa-pinterest")
	)
	links <- append(links, list(menu))
	} else {
	links <- append(links, list(list(icon = paste0("fa-", service))))
	}
	}
	# source_code
	if (!is.null(source_code)) {
	# determine icon
	if (grepl("^http[s]?://git.io", source_code) ||
	grepl("^http[s]?://github.com", source_code)) {
	icon <- "fa-github"
	} else {
	icon <- "fa-code"
	}
	# build nav item
	url <- source_code
	if (identical(url, "embed"))
	url <- "source_embed"
	link <- list(title = "Source Code",
	icon = icon,
	href = url,
	align = "right")
	links <- append(links, list(link))
	}
	links
	}

Keeping FA V4 and V5 compatible is also something we need to improve in rmarkdown side (rstudio/rmarkdown#1994)

[e-leo]

Hello, thank you for the prompt reply! These are not icons that I'm inserting manually, these are included based on the header I've set at the beginning of my script:

--- title: "Uninsured Analysis" output: flexdashboard::flex_dashboard: theme: yeti orientation: rows vertical_layout: scroll logo: data/mhbelogo.png social: menu source: embed includes: after_body: footer.html bibliography: citations.bib runtime: shiny ---

Rmarkdown version says 2.7, flexdashboard says version 0.5.2 and my base R version is 4.0.4, if that helps. Please let me know if you need any more details! Thank you!

[smouksassi]

the current code use the fa prefix:

icon = "fa-twitter"

font awesome had some changes recently
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
and now the free available icon have a fas (solid) prefix fas instead of fa
try to run this and see what works or not in your rstudio viewer

shiny::icon("fa-twitter"), #does not work
shiny::icon("twitter"), #works
shiny::icon("fas fa-twitter")#works

[cderv]

@e-leo thanks for sharing.

I can't check directly as I don't have permission to open the link you shared to your dashboard. I would like to see what is the potential error in the browser console.

Currently, after updating to currently dev version of flexdashboard I can't reproduc with a simple example

---
title: "Uninsured Analysis"
output:
 flexdashboard::flex_dashboard:
   theme: yeti
   social: menu
   source: embed
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

Column {data-width=350}
-----------------------------------------------------------------------

### Chart B

```{r}

```

I got this correctly when I knit the above document

Can you check your packages versions and try updating ?

@smouksassi yes Fontawesome added prefix but this should be taken into accound with v4 compatibility. shiny is not supposed to be involved here. only flexdashboard and maybe rmarkdown

[e-leo]

Hm. Could the issue be that I have the shiny rendering call? Originally this dashboard was going to have shiny features, but I ended up using just flexdashboard. Should I remove that call to runtime:shiny? I've checked all the versions and I'm supposedly using the latest of each. I will try updating flexdashboard to the dev version and see if that helps and will update this comment if it resolves the issue. Thank you!

[cderv]

Let me try with runtime shiny and see if I can reproduce

[cderv]

It still works for me and I can see the icons with this small example:

---
title: "Uninsured Analysis"
output:
 flexdashboard::flex_dashboard:
   self_contained: false
   theme: yeti
   social: menu
   source: embed
runtime: shiny
---

```{r global, include=FALSE}
# load data in 'global' chunk so it can be shared by all users of the dashboard
library(datasets)
data(faithful)
```

Column {.sidebar}
-----------------------------------------------------------------------

Waiting time between eruptions and the duration of the eruption for the
Old Faithful geyser in Yellowstone National Park, Wyoming, USA.

```{r}
selectInput("n_breaks", label = "Number of bins:",
            choices = c(10, 20, 35, 50), selected = 20)

sliderInput("bw_adjust", label = "Bandwidth adjustment:",
            min = 0.2, max = 2, value = 1, step = 0.2)
```

Column
-----------------------------------------------------------------------

### Geyser Eruption Duration

```{r}
renderPlot({
  hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
       xlab = "Duration (minutes)", main = "Geyser Eruption Duration")
  
  dens <- density(faithful$eruptions, adjust = input$bw_adjust)
  lines(dens, col = "blue")
})
```

I am using last development version of packages installed from github.

[e-leo]

Removing runtime:shiny and using the dev version of flexdashboard (install.packages("flexdashboard", type="source" was tried first, then using the devtools::install_github() was also tried) did not resolve the issue. I'm posting a link to the raw source code for my dashboard here since you're unable to access my dashboard to view it:

https://raw.githubusercontent.com/Maryland-Health-Benefits-Exchange/MD_uninsured_analysis/main/COVID-19_Uninsured_Analysis/COVID_Uninsured_Analysis_Dashboard.Rmd

[gadenbuie]

I tried to reproduce this issue but could not. I believe that the flexdashboard's fontawesome dependency comes from rmarkdown::html_dependency_font_awesome() which includes a backwards-compatibility layer that allows flexdashboard to continue to use older fontawesome icon classes.

I'm going to close this for now; if anyone runs into a similar problem, please open a new issue. Thank you!

[cderv]

FWIW we are moving the rmarkdown HTML dependency to fontawesome to use the fontawesome R package. This will be useful to have any tool using rmarkdown dependencies to use the same R package for icons. This should be for compatibility and issue.

Anyhow, I believe this is indeed working better now since we've made updates in rmarkdown

Thanks