rquartoreveal.js

Font Awesome doesn't change bullet points in revealjs Quarto


I would like to use Font Awesomes to change my bullet points. I tried using the following code from this question which uses html in my revealjs Quarto presentation:

---
title: "Font Awesome"
format: revealjs
---

# Test

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

Output:

enter image description here

As you can see the bullet points keep the same. I don't understand why we can't use this html syntax to convert the bullet points to a font awesome. The font awesome documentation shows us that it should work. So I was wondering if anyone knows how to fix this.


After creating a kit like mentioned by @Limey it does create the bullet points like this:

---
title: "Font Awesome"
format: revealjs
---

# Test

<script src="https://kit.fontawesome.com/954a9d9f43.js" crossorigin="anonymous"></script>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

Output:

enter image description here

Unfortunately, you can see the bullet points are still there in the icons.


Solution

  • All the answers were in the comments already, but to put it all together:

    ---
    title: "Font Awesome"
    format: revealjs
    ---
    
    # Test
    
    <script src="https://kit.fontawesome.com/954a9d9f43.js" crossorigin="anonymous"></script>
    
    <ul class="fa-ul" style="list-style-type: none;">
      <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
      <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li>
      <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
      <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
    </ul>
    

    Or what I prefer to do since it makes things look cleaner:

    ---
    title: "Font Awesome"
    format: revealjs
    ---
    
    # Test
    
    ```{=html}
    <script src="https://kit.fontawesome.com/954a9d9f43.js" crossorigin="anonymous"></script>
    
    
    <ul class="fa-ul" style="list-style-type: none;">
      <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
      <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li>
      <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
      <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
    </ul>
    ```
    

    enter image description here