将Font Awesome图标设置为光标 - 这可能吗？

Question

Font Awesome有一个非常好的图标集合,可用于Web项目.我想使用其中一个图标作为光标(自定义光标).

根据我的理解,Custom Cursors需要一个图片网址,但我无法找到Font Awesome图标的图片网址.

Answer 1

得到它了!

1. 创建一个画布
2. 在上面绘制fa图标
3. 将其更改为base-64图像网址
4. 在光标css样式上应用图像

我做了一个演示:http://jsfiddle.net/rqq8B/2/

// http://stackoverflow.com/questions/13761472/how-to-render-glyphs-from-fontawesome-on-a-canvas-element
// http://stackoverflow.com/questions/13932291/css-cursor-using-data-uri

$(function() {
    var canvas = document.createElement("canvas");
    canvas.width = 24;
    canvas.height = 24;
    //document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000000";
    ctx.font = "24px FontAwesome";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("\uf002", 12, 12);
    var dataURL = canvas.toDataURL('image/png')
    $('body').css('cursor', 'url('+dataURL+'), auto');
});

Answer 2

有jQuery Awesome Cursor,你只需调用一个简单的代码就可以在游标中添加字体真棒图标:

$('body').awesomeCursor('pencil');

或者传递一些选项:

$('body').awesomeCursor('pencil', {
  /* your options here */
  size: 22,
  color: 'orange',
  flip: 'horizontal'
});

免责声明:我不是我刚刚找到它的这个库的作者.

Answer 3

提到的画布方法会导致光标模糊。

使用 SVG 提供更好的结果：

• 从Encharm 的 Font-Awesome-SVG-PNG下载要使用的图标的 SVG。
• 使用文本编辑器编辑 SVG 并指定要使用的宽度和高度
  • 例如：24 x 24。
  • 请记住，浏览器中通常有一个最大尺寸（Firefox 中为 128 x 128。）
• 在 CSS 中声明光标，例如： cursor: url( '/assets/img/volume-up.svg' ), pointer;

Answer 4

最后,我无法让@ fish_ball的代码可靠地运行,所以我只是下载了图像,使用gimp裁剪并将它们编辑为32×32px,并像这样使用它们:

.myClass { cursor: url('/static/img/pencil30_32x32.png') 1 30, crosshair }

该1 30部分设置鼠标指针'热点'从左侧1px和从图像顶部30px.