Установить шрифт Awesome иконки в качестве курсора - это возможно?

Font Awesome имеет очень хорошую коллекцию значков для использования в веб-проектах. Я хочу использовать один из этих значков в качестве курсора (пользовательский курсор).

в моем понимании, пользовательские курсоры нуждаются в url-адресе изображения, но я не могу найти URL-адреса изображений для шрифтов Awesome icons.

28
css font-awesome html5 html5-canvas javascript

4 ответов

получил его!

  1. создать холст
  2. нарисуйте значок fa на нем
  3. измените его на url-адрес изображения base-64
  4. применить изображение на курсоре css style

и я сделал демо: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');
});
40

здесь jQuery удивительный курсор, где вы можете добавить шрифт-удивительные значки к курсору, вызвав только один простой код:

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

или передавая ему некоторые опции:

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

отказ от ответственности: я не автор этой библиотеки, которую я только что нашел.

9

в конце концов, я не мог заставить код @fish_ball работать надежно, поэтому я просто скачал картинки, используется gimp обрезать и редактировать их до 32×32px и использовать их следующим образом:

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

на 1 30 часть устанавливает указатель мыши "hotspot" 1px слева и 30px сверху изображения.

7

упомянутый метод canvas приводит к размытым курсорам.

использование SVG дает лучшие результаты:

  • загрузите SVG для значка, который вы хотите использовать из шрифт Encharm-удивительный-SVG-PNG.
  • отредактируйте SVG с помощью текстового редактора и укажите ширину и высоту, которые вы хотите использовать
    • например: 24 x 24.
    • имейте в виду, что обычно максимальный размер в браузере (128 x 128 в Браузер firefox.)
  • объявите курсор в CSS, например:cursor: url( '/assets/img/volume-up.svg' ), pointer;
3