Icon hyperlinks no longer visible in R markdown using YAML html_document #1924

a-brasch · 2020-10-15T03:20:36Z

I previously had success adding headers and footers to my R markdown HTML files using guidance found here: Pimp my RMD. No changes have been made to my header.html, but now the icon hyperlinks are no longer visible when knit via RStudio. I confirmed that the URL is still valid. The hyperlink via "Author Name" is still visible. When the header.html file is opened in Chrome, the hyperlink icons are visible and valid. Why would the hyperlink icons no longer be visible in the markdown HTML?

I posted this same question on stackoverflow and the R Community, but no answers to-date.

Examples included below and a zip file containing an .rmd, header.html, footer.html, and knit html file is attached. As you can see from this link, the icons and hyperlinks used to be visible.
html_header_icons_issue.zip

Thanks for any insight,
Alex

My YAML looks like this:

---
title: "html_header_icons_issue"
author: "a-brasch"
date: "10/14/2020"
output:
  html_document:
    includes:
      before_body: ./header.html
      after_body: ./footer.html
---

My header.html file looks like this:

<p style="text-align: right;"><a href="mailto:[email protected]">Author Name</a></p>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- Add font awesome icons -->
<p style="text-align: right;">
    <a href="https://stackoverflow.com/questions/64309378/icon-hyperlinks-no-longer-visible-in-r-markdown-using-yaml-html-document-includ" class="fas fa-chart-bar"></a>
    <a href="https://community.rstudio.com/t/icon-hyperlinks-no-longer-visible-in-r-markdown-using-yaml-html-document/84317" class="fab fa-linkedin"></a>
    <a href="https://yihui.org/issue/" class="fab fa-github"></a>
</p>

By filing an issue to this repo, I promise that

I have fully read the issue guide at https://yihui.org/issue/
I have provided the necessary information about my issue.
- If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
- If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('rmarkdown'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/rmarkdown').
- If I have posted the same issue elsewhere, I have also mentioned it in this issue.
I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

The text was updated successfully, but these errors were encountered:

cderv · 2020-10-15T13:22:10Z

I don't really know why it worked before but it seems this is a Pandoc related issue when producing self_contained document.

in self contained mode, this will be transformed to be integrated in the html file source code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

and it seems that does not play well with fontawesome.

You can set self_contained = FALSE and it should work.

If you are not bound to version 5.15.1 you used above, you can also use the fontawesome dependency included with rmarkdown bu using this in your document.

```{r setup, include=FALSE}
htmltools::tagList(rmarkdown::html_dependency_font_awesome())
```

The version is 5.1.0 I think.

And It seems to work.

Also which version of Pandoc are you using ? rmarkdown::pandoc_version() ?

a-brasch · 2020-10-15T14:56:37Z

Thanks for the response @cderv.

rmarkdown::pandoc_version() yields 2.7.2

self_contained: = FALSE threw this error: "Error in if (self_contained) { : argument is not interpretable as logical
Calls: ... do.call -> -> output_format -> html_document_base
Execution halted"

pandoc_self_contained_html: = FALSE did not solve the issue.

Adding the following setup did solve the issue.

htmltools::tagList(rmarkdown::html_dependency_font_awesome())

I did not have to update my header/footer.html files, but to remove redundancy or potential confusion, I removed the following:

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

cderv · 2020-10-15T15:01:53Z

self_contained: = FALSE threw this error: "Error in if (self_contained) { : argument is not interpretable as logical
Calls: ... do.call -> -> output_format -> html_document_base
Execution halted"

This should be

self_contained: FALSE

if you use it the yaml header under html_document

I did not have to update my header/footer.html files, but to remove redundancy or potential confusion, I removed the following:

Yes I forgot to mention that. Good to know that it works correctly with this.

a-brasch · 2020-10-15T15:12:54Z

Of course, thanks for the correction.

a-brasch · 2020-10-23T21:39:46Z

As mentioned on Oct. 15, 2020, using the following worked, but 8 days later, after nothing has changed in the rmd file, the icons are once again missing. Any suggestions?

YAML

---
title: "html_header_icons_issue"
author: "a-brasch"
date: "10/14/2020"
output:
  html_document:
    includes:
      before_body: ./header.html
      after_body: ./footer.html
---

in combination with

{r setup}
# Use font awesome to display icons within header and footer html files
htmltools::tagList(rmarkdown::html_dependency_font_awesome())

a-brasch · 2020-10-23T21:39:55Z

As mentioned on Oct. 15, 2020, using the following worked, but 8 days later, after nothing has changed in the rmd file, the icons are once again missing. Any suggestions?

YAML

---
title: "html_header_icons_issue"
author: "a-brasch"
date: "10/14/2020"
output:
  html_document:
    includes:
      before_body: ./header.html
      after_body: ./footer.html
---

in combination with

{r setup}
# Use font awesome to display icons within header and footer html files
htmltools::tagList(rmarkdown::html_dependency_font_awesome())

ckelly17 · 2020-12-19T14:19:03Z

Did you ever get a fix on this? Having the same issue. Didn't change code bu fa-icons are now missing from knitted files.

a-brasch · 2020-12-19T15:57:57Z

Unfortunately, no. That's why I reopened the issue, but it hasn't gotten any traction.

jsaraviadrago · 2021-02-06T16:08:40Z

Hi!

I have the exact same problem, I've being going around the internet for ours now. My .yaml file looks something like this.


name: "Juan Carlos Saravia"
output_dir: "."
navbar:
  title: "Juan Carlos Saravia"
  left:
    - text: "Portafolio"
      href: portafolio.html
    - text: "Consulting"
      href: research.html
    - text: "Programming"
      href: software.html
    - text: "Data Science for good"
      href: blogs.html
  right:
    - icon: fa-envelope fa-lg
      href: contact.html
    - icon: fa-github fa-lg
      href: https://github.com/jsaraviadrago
    - icon: fa-twitter fa-lg
      href: https://twitter.com/statssos
    - icon: fa-linkedin fa-lg
      href: https://www.linkedin.com/in/jcsaraviadrago/
output:
  html_document:
    theme: darkly
    css: 'styles.css'

Pretty simple, the funny thing is that the first icon shows but not the other ones, but the links are still there because when you put the cursor you can actually click on them.

Thanks a lot!

cderv · 2021-02-08T09:36:01Z

@jsaraviadrago fa-github, fa-twitter and fa-linkedin are brand icons. With FA 5 that R Markdown now uses, this means you need to use the correct prefix (https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use). For brands icons, it is fab. You need at least version 2.6 of rmarkdown because there is a fix.

Be before changing your YAML, can you try #1994 to see if it works ?
This is a PR with a fix to improve FA V4 compatibility.

remotes::install_github("rstudio/rmarkdown#1994")

@a-brasch could this be related to your issue ? Are you using specific icons ?

a-brasch · 2021-02-09T15:44:07Z

Thanks for the response @cderv! My issue also seems to have been related to the R Markdown solution you linked to. I have not changed anything since my Oct. 23, 2020 post (YAML, header HTML, and code snippet below) and the icons now appear as expected when knit.

I am using brand icons and my html was using the 'fab' prefix based on my reference to font awesome v5. As posted above on Oct. 15, adding the following setup solved the issue.

htmltools::tagList(rmarkdown::html_dependency_font_awesome())

Thanks again for the help!

My YAML looks like this:

title: "html_header_icons_issue"
author: "a-brasch"
date: "10/14/2020"
output:
  html_document:
    includes:
      before_body: ./header.html
      after_body: ./footer.html

My header.html file looks like this:

<p style="text-align: right;"><a href="mailto:[email protected]">Author Name</a></p>
<!-- Add font awesome icons -->
<p style="text-align: right;">
    <a href="https://stackoverflow.com/questions/64309378/icon-hyperlinks-no-longer-visible-in-r-markdown-using-yaml-html-document-includ" class="fas fa-chart-bar"></a>
    <a href="https://community.rstudio.com/t/icon-hyperlinks-no-longer-visible-in-r-markdown-using-yaml-html-document/84317" class="fab fa-linkedin"></a>
    <a href="https://yihui.org/issue/" class="fab fa-github"></a>
</p>

My r setup code snippet looks like this:

{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
htmltools::tagList(rmarkdown::html_dependency_font_awesome())

cderv · 2021-02-09T16:21:36Z

Great News! Just to clarify, does it work now for you with #1994 installed or not ? With the PR or without the PR ?

Thanks.

a-brasch · 2021-02-09T16:44:30Z

I actually didn't make any changes and it now works as expected. I'm assuming I've updated packages since last Oct., but I didn't do any specific installation related to #1994. Sorry, what is "PR"?

cderv · 2021-02-09T17:34:45Z

OK great. That means your issue was fix by something else. This is what I wanted to know. I'll close this then.

Sorry, what is "PR"?

Pull Request. It is the way to submit some changes to a github repository
See https://happygitwithr.com/big-picture.html#special-features-of-github

combiz · 2021-05-12T14:45:20Z

I have the same issue: icon hyperlinks for font-awesome have suddenly disappeared in knitted HTML documents. I've tried adding the suggested htmltools::tagList(rmarkdown::html_dependency_font_awesome()) to the {r setup} to no avail.

I've found that editing the generated HTML file and manually adding <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> to the head fixes the issue. Any suggestions on how to have this line added automatically would be much appreciated.

My current setup is identical to #1924 (comment) (i.e. a header/footer html file includes: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">). I've also tried all steps with font-awesome v5.

packageVersion("rmarkdown")
[1] ‘2.8’
rmarkdown::pandoc_version()
[1] ‘2.3.1’
`

cderv · 2021-05-12T15:15:59Z

@combiz can you open a new issue by sharing an example of what is not working for you ?

Also please, see the new fontawesome package (https://github.com/rstudio/fontawesome) : it has a more up to date version of fontawesome for now than the html dependency in rmarkdown

combiz · 2021-05-12T18:32:59Z

Thanks @cderv, the fontawesome package was just the trick.

github-actions · 2021-11-09T05:13:22Z

This old thread has been automatically locked. If you think you have found something related to this, please open a new issue by following the issue guide (https://yihui.org/issue/), and link to this old issue if necessary.

a-brasch closed this as completed Oct 15, 2020

a-brasch reopened this Oct 23, 2020

cderv added the bug an unexpected problem or unintended behavior label Feb 8, 2021

cderv closed this as completed Feb 9, 2021

github-actions bot locked as resolved and limited conversation to collaborators Nov 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Icon hyperlinks no longer visible in R markdown using YAML html_document #1924

Icon hyperlinks no longer visible in R markdown using YAML html_document #1924

a-brasch commented Oct 15, 2020 •

edited

Loading

cderv commented Oct 15, 2020 •

edited

Loading

a-brasch commented Oct 15, 2020

cderv commented Oct 15, 2020

a-brasch commented Oct 15, 2020

a-brasch commented Oct 23, 2020

a-brasch commented Oct 23, 2020

ckelly17 commented Dec 19, 2020

a-brasch commented Dec 19, 2020

jsaraviadrago commented Feb 6, 2021

cderv commented Feb 8, 2021 •

edited

Loading

a-brasch commented Feb 9, 2021 •

edited

Loading

cderv commented Feb 9, 2021

a-brasch commented Feb 9, 2021

cderv commented Feb 9, 2021

combiz commented May 12, 2021

cderv commented May 12, 2021

combiz commented May 12, 2021

github-actions bot commented Nov 9, 2021

Icon hyperlinks no longer visible in R markdown using YAML html_document #1924

Icon hyperlinks no longer visible in R markdown using YAML html_document #1924

Comments

a-brasch commented Oct 15, 2020 • edited Loading

cderv commented Oct 15, 2020 • edited Loading

a-brasch commented Oct 15, 2020

cderv commented Oct 15, 2020

a-brasch commented Oct 15, 2020

a-brasch commented Oct 23, 2020

a-brasch commented Oct 23, 2020

ckelly17 commented Dec 19, 2020

a-brasch commented Dec 19, 2020

jsaraviadrago commented Feb 6, 2021

cderv commented Feb 8, 2021 • edited Loading

a-brasch commented Feb 9, 2021 • edited Loading

cderv commented Feb 9, 2021

a-brasch commented Feb 9, 2021

cderv commented Feb 9, 2021

combiz commented May 12, 2021

cderv commented May 12, 2021

combiz commented May 12, 2021

github-actions bot commented Nov 9, 2021

a-brasch commented Oct 15, 2020 •

edited

Loading

cderv commented Oct 15, 2020 •

edited

Loading

cderv commented Feb 8, 2021 •

edited

Loading

a-brasch commented Feb 9, 2021 •

edited

Loading