如何将图标附加到光标？

Question

I know how to create custom cursors,

cursor: url('custom.svg'), default;

But how do you attach an icon to a existing pointer cursor?

Answer 1

you can try something like this :)

 $(document).ready(function(){ $('html').mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; $('div.movablediv').css({'top': y,'left': x}); }); }); 

 .movablediv {width:25px; height:25px; position:absolute; border:solid 1px #000} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="movablediv"></div> 

Answer 2

If you don't want to use a custom image for the cursor you could use JavaScript. Here is an example with jQuery

 $(function() { $(document).mousemove(function(e) { var iconPosition = { top: e.pageY + 12, left: e.pageX + 12 }; $('.cursor-icon').offset(iconPosition); }); }); 

 .cursor-icon { z-index: 1000; color: red; font-size: 2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <span class="cursor-icon"><i class="fa fa-heart" aria-hidden="true"></i></span>