在鼠标悬停时为光标分配Font Awesome图标

Question

在鼠标悬停时为光标分配Font Awesome图标

4

我想在鼠标悬停在一个 div 上时使用 Font Awesome 图标作为光标/鼠标指针。这可能吗？就像这样：

```css div:hover { cursor: url('path/to/font-awesome-icon'), auto; } ```

.myClass:hover {
    cursor: <--- here assign to the cursor the Font Awesome icon
}

- ps0604

这可能是你正在寻找的：https://dev59.com/t2Af5IYBdhLWcg3w9mts - Ricky Ruiz

请参考以下链接：https://jwarby.github.io/jquery-awesome-cursor/ - Ricky Ruiz

那可以运行，但我想避免使用jQuery。 - ps0604

1

光标属性需要一个指向图像的URL，因此您可以将所需的图标保存为图像。这里有一个SVG库[1]，您可以从中保存适合您要求的大小的PNG。然后使用cursor：url（fa-icon.png），auto;我认为目前没有其他纯CSS方法可以解决这个问题。[https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg] - Ricky Ruiz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- warkentien2 · Accepted Answer

根据文档，实现自定义光标的唯一方法是使用cursor: url();

因此，跟随@RicardoRuiz的回答：

有人创建了一个fontawesome到png生成器
下载.png图标，
将其存储在您的项目资源目录或在线上例如：Dropbox
使用CSS cursor: url()将图标图像用作光标。