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.

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>
```