ps0604 ps0604 - 6 months ago 26
CSS Question

Assign Font Awesome icon to cursor on hover

I want to use one of Font Awesome icons as the cursor/mouse pointer when I hover over a div. Is this possible? something like this:

.myClass:hover {
cursor: <--- here assign to the cursor the Font Awesome icon


according to the documentation, the only way to achieve a custom cursor, is by using cursor: url();

So, tagging along with @RicardoRuiz 's answer:

  • someone created a fontawesome to png generator
  • download the .png icon,
  • store it inside your project assets directory or online e.g. dropbox
  • use CSS cursor: url() to use the icon image as a cursor.