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。
我在这里缺少什么?
非常感谢!
我们刚刚遇到这个问题并找到了潜在的原因。
https://fontawesome.com/docs/web/troubleshoot/
指向https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences
当我们切换“在 Windows 中显示动画”时。动画又开始工作了。
| 归档时间: |
|
| 查看次数: |
2712 次 |
| 最近记录: |