Using HTML / UTF-8 character's as cursor

Question

I'd like to be able use the double arrow characters as a cursor when an image is hovered. Can I only add an image as a custom cursor?

cursor: url(images/my-cursor.png), auto;

http://designerstoolbox.com/designresources/html/

Answer 1

Here is a solution with an inline SVG:

you can adjust the height and width as you need for your Text (Character). You might also want to change the y of the text for diffrent chars.

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  /* only this is relevant */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="30" style="font-size: 20px;"><text y="15">¶</text></svg>'), auto;
}

While this is pure CSS, you can also make a HTML5-Canvas and draw your text on it with JavaScript:

var canvas = document.createElement("canvas")
canvas.width = 10
canvas.height = 15
var context = canvas.getContext("2d")
context.font = "20px 'sans serif'"
context.fillText("¶", 0, 13)
document.body.style.cursor = "url('" + canvas.toDataURL() + "'), auto"

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
}