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

Question

Font Awesome 有一个非常好的图标集合，可用于网络元素。我想使用这些图标之一作为光标(自定义光标)。

据我了解，自定义光标需要一个图片网址，但我找不到 Font Awesome 图标的图片网址。

Answer 1

知道了!

1. 创建 Canvas
2. 在上面画一个fa图标
3. 将其更改为 base-64 图片 url
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');
});

body {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>