I've been struggling to make a spinner icon spin on my webpage. I made sure to download the latest version of font awesome and created a simple HTML file to troubleshoot the issue.
Take a look at the HTML code below:
<!doctype html>
<html lang="en">
<head>
<link href="C:/Users/<my-user-name>/Downloads/fontawesome-free-6.2.0-web/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col">
<i class="fa-solid fa-spinner fa-spin"></i>
</div>
</div>
</body>
</html>
Although the code displays the icon, the animation does not seem to be working.
Upon inspecting the icon element in Chrome, I noticed that there's a style called animation-timing-function: var(--fa-animation-timing, linear);. However, the message "—fa-animation-timing is not defined" appears when I hover over this style.
Following the fontawesome host yourself instructions from fontawesome's website, I believe I have included all necessary files. I made sure not to delete any files from the extracted free font awesome download. Additionally, I attempted referencing fontawesome.css, brands.css, and solid.css as an alternative to all.css.
Can anyone identify what I might be missing here?
Thank you in advance for your help!