Trying to include fontawesome icons using includes in_header from GitHub version

[storopoli]

Dear @seankross,

Amazing package! Thank you!

I've tried to include fontawesome icons using the GitHub version of postcards.

I've included a custom my header.html file with the following code (note that real fontawesome id is omitted):

<!-- Fontawesome Icons -->
<script src="https://kit.fontawesome.com/XXXXreal_id_hereXXXX.js" crossorigin="anonymous"></script>

Then, I've included it in my index.Rmd file:

---
title: "Jose Storopoli"
image: "CV/pic.png"
color1: "#5A59A3"
color2: "#C66060"
angle: 130
links:
  - label: <i class="ai ai-cv ai-2x"></i>
    url: "https://storopoli.github.io/CV/CV.pdf"
  - label: <i class="fa-github fa-2x"></i>
    url: "https://github.com/storopoli"
  - label: <i class="fa-twitter fa-2x"></i>
    url: "https://twitter.com/JoseStoropoli"
  - label: <i class="fa-linkedin fa-2x"></i>
    url: "https://www.linkedin.com/in/storopoli/"
  - label: <i class="fa-paper-plane fa-2x"></i>
    url: "mailto:thestoropoli@gmail.com"
  - label: <i class="ai ai-google-scholar ai-2x"></i>
    url: https://scholar.google.com/citations?user=xGU7H1QAAAAJ&hl=en
  - label: "Estatística com R"
    url: "https://storopoli.github.io/Estatistica"
  - label: "Estatística Bayesiana<br>com R e Stan"
    url: "https://storopoli.github.io/Estatistica-Bayesiana"
output:
  postcards::onofre:
    includes:
      in_header: myheader.html
---

<!--Academicons Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">

Chief Data Scientist, Associate Professor and Researcher at Universidade Nove de Julho - UNINOVE located in São Paulo - Brazil. Teaches undergraduate and graduate courses in Statistics, Bayesian Statistics, Machine Learning, Deep Learning and Data Science using R, Python and Julia. Researches, publishes and advises PhD candidates on topics about Smart Cities and Urban Planning. Certified RStudio Tidyverse Instructor.

And it doesn't work. It shows blank white squares where the icons should be. Note that the Academicons work perfectly even reacting while hovering the mouse over (see pic below).

[seankross]

Hi @storopoli,

Try this approach:

1. First install the fontawesome package remotes::install_github("rstudio/fontawesome")
2. Use fontawesome icons in your yaml like this:

links:
  - label: '`r fontawesome::fa("github", height = 25, fill = "white")`'
    url: "https://github.com/storopoli"
  - label: '`r fontawesome::fa("twitter", height = 25, fill = "white")`'
    url: "https://twitter.com/JoseStoropoli"
  - label: '`r fontawesome::fa("linkedin", height = 25, fill = "white")`'
    url: "https://www.linkedin.com/in/storopoli/"
  - label: '`r fontawesome::fa("paper-plane", height = 25, fill = "white")`'
    url: "mailto:thestoropoli@gmail.com"

Let me know if that works out for you.

[storopoli]

Dear @seankross, thank you!

That was already the fix that I was using but they are not reactive while roovering the mouse.

I have used the height as "1.33em" which equates to fa-2x.

Thank you