Use Font Awesome to Change The Mouse Cursor

#css #webdev

Introduction

As you probably know it, you can easily change the cursor's appearance thanks to the CSS property cursor. For example, cursor: pointer gives you the pointing hand. There are actually a lot of built-in values, as you can see on csscursor.info. On that website, the most surprising cursor icon is the hand from Santa Claus. Yes, you can use a custom PNG or a SVG for the cursor!

Syntax

To use your own icon, you have to provide two values. The first value is a path to your PNG or SVG file, using the url() syntax (like for the background property).
The second value is a fallback cursor appearance (among the built-in values) in case that your image file fails to load. I usually leave that fallback value to auto.

#my-custom-icon {
  cursor: url(path/to/custom-cursor.svg), auto;
}

Font Awesome

I find it very easy to use icons from Font Awesome for the cursor. You can download the icons as SVG and then all you need to do is to specify a height and a width (e.g. 20x20) and remove the unnecessary attributes:

<svg height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" ><path  d="M502.63 217.06L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.77c-6.24-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.63l86.19 86.18-94.76 94.76c-37.49 37.49-37.49 98.26 0 135.75l117.19 117.19c18.75 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.88-28.12l221.57-221.57c12.49-12.5 12.49-32.76 0-45.26zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.61 58.6c12.49 12.49 32.75 12.49 45.24 0 12.49-12.49 12.49-32.75 0-45.24l-58.61-58.6 58.95-58.95 162.45 162.44-48.35 48.34z"></path></svg>

Conclusion

You now have the complete Font Awesome library at your disposal to customize the cursor on your websites 😃
But please don't go crazy with it. Use this new power with the utmost moderation. Changing the cursor's appearance, especially to a custom icon, can really confuse your users. Your custom icon should always be specific to the context. In my case, I've changed it to a bucket when the user wants to fill an area on a canvas.

Remember also that users with a touch screen won't get that experience. In my canvas example, I had to find another way to indicate to those users that the bucket tool was selected.

As long as you keep your users in mind, you can be creative. For example, look at the link hover effect on this website: http://radiokdug.com/