I know how to create custom cursors,

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

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

I know how to create custom cursors,

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

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

• javascript
• html
• css

Share Improve this question Follow edited Oct 27, 2017 at 10:24 semirturgay 4,20133 gold badges3131 silver badges5050 bronze badges asked Oct 27, 2017 at 10:13 user3607282user3607282 2,55566 gold badges3737 silver badges6565 bronze badges 1

• 2 You can make your own icon and replace the default one. Have a look at jsfiddle/wNKcU/5 – Ali Zia Commented Oct 27, 2017 at 10:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="movablediv"></div>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>