4

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
}
ps0604
  • 1,227
  • 23
  • 133
  • 330
  • This might be what you're looking for: http://stackoverflow.com/questions/24093263/set-font-awesome-icons-as-cursor-is-this-possible – Ricky Ruiz Jul 07 '16 at 02:49
  • Or this: https://jwarby.github.io/jquery-awesome-cursor/ – Ricky Ruiz Jul 07 '16 at 02:51
  • That works, however I'm trying to avoid using jquery – ps0604 Jul 07 '16 at 02:55
  • 1
    The cursor property is expecting an url to an image, so what you can do is save the desired icon as an image. Here's a library of svgs[1] from where you can save a png with the size that fits your requirement. Then use cursor: url(fa-icon.png),auto; I don't think there's any other way at the moment that can solve this with pure CSS. [https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg] – Ricky Ruiz Jul 07 '16 at 03:05

1 Answers1

7

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.
warkentien2
  • 969
  • 13
  • 20
  • Just wanted to add that url("imageLink") wasn't working for me until i added "auto" value to it, as in cursor: url("imageLink"), auto; – srinced Sep 20 '21 at 13:56