I have been trying for ages to get a custom cursor to work in webflow, following this thread in particular
All of the custom code bits I have experimented with have worked perfectly, except for the custom cursor code, it just won’t work. I’ve even tried starting new blank sites to test it but I can’t get it to work, i’m tearing my hair out!
Here is the share link to my site,
If anyone could have a look I would be eternally grateful,
Cheers,
Damiaan
You’re not telling where we should look on your site 
The code linked is ok, it means any element of that class hovered by the cursor will get the defined image as a cursor. But you can google for image limitations. They’re not the same for each browser. Try with a 32 x 32 PNG image. Be sure to make the image stick to the upper left corner of the artboard.
Custom cursors aren’t recommended. They look horrible most of the time and users don’t really like to have their cursor changed to something fancy. But you decide Cursor design is hard. It’s small and need to be black with a white outline to be visible at all time. I tried many times and was never satisfied with the result.
I made an example for you on that site (it’s obvious), but it’s very poor with a very large cursor that’s not optimized or refined at all.
Sharing link:
https://preview.webflow.com/preview/candyshop?preview=4a66108fe401388812bc6717a8c47e29
Here’s the image used (too big, no outline):
Code:
<style>
.mic-cursor {
cursor: url('https://daks2k3a4ib2z.cloudfront.net/5931952fcb454512c039a2b4/5a204d414ee3d200016a622e_mic32.png'), default;
}
</style>
Hey Vincent,
Thanks very much for your reply!
I’m trying to capture the sliders controls and replace with a larger arrows,
I tried copy and pasting your code exactly into my site and amending the class but it still won’t work when published 
I will try a new site from scratch with your exact snippet and see how it goes,
Thanks,
D
edit _______________
Hey Vincent,
I think I might have figured it out, just now I was applying the cursor to an empty div and it wouldn’t capture - Now I have tried to capture it over an image instead and it it works!
On my original site I was try to get it to catch over the arrow buttons (set to 50% so left and right cover half of the image) that come with a set of sliders, - It seems like it doesn’t want to catch over those (maybe because it’s empty) - is that normal? is there anything else I can do?
Hi All,
I too have been strenuously working to make this custom cursor appear upon hovering over my website’s footer.
One curiosity is that @vincent shows “.mic-cursor” as the class … but I’d figure you would want to specify the class of the area on the website for the custom cursor to appear as opposed to the class of the cursor itself. Ergo, I’ve tried both perceived options with: “.footer”, “.footer.custom-cursor”, “.custom-cursor” and a few other variations.
My footer is a Symbol in the website. Is that what is messing it up? I have made sure to make the icon a .png file with the longest edge 128 px. (it’s 128 x 59.13 px) and I’ve triple checked my image link.
Please let me know how I’ve bungled this! Thanks, Alex
You probably need to insert a space between .footer and .custom-cursor
If that’s not the case, please show your project.
