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

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

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

Ответы

Ответ 1

Получил это!

  • Создать холст
  • Нарисуйте значок fa на нем
  • Измените его на URL-адрес изображения base-64
  • Примените изображение к стилю курсора 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');
});

Ответ 2

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

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

Или передайте ему несколько опций:

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

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

Ответ 3

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

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

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

Ответ 4

Метод холста упоминает результаты в размытых курсорах.

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

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

Ответ 5

1500 × 844 Изображения могут быть защищены авторским правом. Узнать больше Алмазный меч Бесплатная 3D модель в ближнем бою 3DExport 3DExport Алмазный меч. Удалить закладку Закладка на этот товар