You can follow these steps to change cursor icon to custom icon, use FontAwesome
#1. First, choose desired icon on FontAwesome > Get this syntax.
#2. Use this code to Custom CSS
/* custom cursor icon */
body, body * {
cursor: none;
}
.custom-cursor {
position: fixed;
width: 24px;
height: 24px;
pointer-events: none;
z-index: 99999;
transform: translate(-50%, -50%);
display: none;
}
.custom-cursor i {
font-size: 24px;
}
#3. Use this code to Code Injection > Footer
<div class="custom-cursor" id="smileCursor">
<i class="fa-regular fa-face-smile" style="color: #24b9f9;"></i>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const cursor = document.getElementById('smileCursor');
let isOverLink = false;
document.addEventListener('mousemove', function(e) {
if (isOverLink) {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
}
});
const links = document.querySelectorAll('body');
links.forEach(link => {
link.addEventListener('mouseenter', function() {
isOverLink = true;
cursor.style.display = 'block';
});
link.addEventListener('mouseleave', function() {
isOverLink = false;
cursor.style.display = 'none';
});
});
});
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
Remember to replace FontAwesome syntax you got in #1.
