Reputation: 41357
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:
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:
Unfortunately, you can see the bullet points are still there in the icons.
Upvotes: 0
Views: 110
Answers (1)
Reputation: 12420
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>
```
Upvotes: 1