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: Use the CSS cursor property You can define a custom cursor using the CSS cursor property. The cursor property takes the comma-separated list of user-defined cursors value followed by the generic cursor.
The HTML5 Standard: Unicode UTF-8 Unicode enables processing, storage, and transport of text independent of platform and language. The default character encoding in HTML-5 is UTF-8.
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;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With