Question

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

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

Answer 1

知道了！

创建画布
在上面绘制fa图标
将其更改为base-64图片网址
将图像应用于光标css样式

// 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

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

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

1 30部分设置鼠标指针'热点'从左侧开始1px，从图像顶部开始30px。

Answer 4

提到的canvas方法会导致游标模糊。

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

从Encharm's Font-Awesome-SVG-PNG
使用文本编辑器编辑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的{{1}}标签上添加一个指针（因此会显示字体真棒图标！）

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

5 个答案: