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

Question

Font Awesome 有一个非常好的图标集合，可用于 Web 项目。我想使用其中一个图标作为光标（自定义光标）。

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

Answer 1

知道了！

1. 创建画布
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>

Answer 2

最后，我无法让@fish_ball 的代码可靠地工作，所以我只是downloaded the images，使用gimp 将它们裁剪并编辑为32×32px，并像这样使用它们：

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

1 30 部分将鼠标指针“热点”设置为距图像左侧 1 像素和距图像顶部 30 像素。

Answer 3

有jQuery Awesome Cursor，你可以通过调用一个简单的代码来为你的光标添加字体很棒的图标：

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

或者传递一些选项：

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

免责声明：我不是我刚刚找到的这个库的作者。

Answer 4

上述canvas方法导致光标模糊。

使用 SVG 可以提供更好的结果：

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

Answer 5

对于使用 Vue.js 的任何人，有一个更简单的方法：

将字体真棒图标作为组件导入：

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas);
library.add(fab);
library.add(far);
Vue.component('fa-icon', FontAwesomeIcon);

并直接在页面的 HTML 中使用它：

<fa-icon icon="copy" @click="yourFunction"/>

并用<span>包围您的标签：

<span class="hover"><fa-icon icon="copy" @click="yourFunction"/></span>

并添加到您的 CSS：

span.hover { 
  cursor: pointer; 
}

这将在您的代码中的所有 <span> 标记上添加一个指针 hover 类（因此您的字体真棒图标！）