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?

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;}