fontawesome 6.2 动画根本不起作用

use*_*605 2 html css font-awesome

我试图让旋转图标旋转但没有成功。我已经下载了最新的很棒的字体,并创建了一个非常基本的 html 文件,以尝试消除任何变量以使其正常工作。

这是 HTML:

<!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>
Run Code Online (Sandbox Code Playgroud)

上面的代码渲染了图标,但动画不起作用。

我唯一注意到的是,当我检查 chrome 中的图标元素并查看 .fa-spin 的样式详细信息时,它显示了一种名为“animation-timing-function”的样式: var(--fa-animation-timing, Linear );但是当我将鼠标悬停在该样式上时,会出现文本,指出“--fa-animation-timing 未定义”。

据我从很棒的房东自己的说明中可以看出,我已经包含了我需要的一切。我没有从提取的免费字体真棒下载中删除任何文件。我还尝试了引用 all.css 的替代选项,其中涉及引用 fontawesome.css、brands.css 和 Solid.css。

我在这里缺少什么?

非常感谢!

Qui*_*ack 6

我们刚刚遇到这个问题并找到了潜在的原因。

https://fontawesome.com/docs/web/troubleshoot/

指向https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences

当我们切换“在 Windows 中显示动画”时。动画又开始工作了。

  • 这也适用于 Chrome 112 和 macOS 13。 (2认同)