Использование символа HTML в качестве курсора

Question

Я хотел бы использовать символы двойной стрелки в качестве курсора, когда изображение зависает. Могу ли я добавить изображение в качестве настраиваемого курсора?

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

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

Answer 1

Вот решение с инлайн SVG:

вы можете регулировать высоту и ширину, что нужно для вашего текста (символов). Вы также можете изменить y текста для разных символов.

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

Хотя это чистый CSS, вы можете также сделать HTML5-холст и сделать свой текст на нем с 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;}