jQuery Plugin For Custom Cursor Using Font Awesome Icons - Awesome Cursor

File Size: 55.9 KB
Views Total: 3810
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Custom Cursor Using Font Awesome Icons - Awesome Cursor

Awesome Cursor is a fancy jQuery plugin which uses a Font Awesome icon as the cursor to be displayed in a specified container.

How to use it:

1.Include the latest Font Awesome font icon set into your document.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

2. Include jQuery JavaScript library and the jQuery awesome cursor plugin at the bottom of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/jquery.awesome-cursor.js"></script>

3. Call the plugin on the target element and specify the icon you wish to use.

$('#demo-1').awesomeCursor('paper-plane', {
  // Options here

4. All the customization options.

$('#demo-1').awesomeCursor('paper-plane', {

  // The color of the cursor
  color: '#000000', 

  // The size of the cursor
  size: 18, 

  // The string descriptor for the hotspot location
  // x and y offsets hotspot: [0, 17]
  // or using a string descriptor:  hotspot: 'bottom left'
  hotspot: [0, 0],

  // Cursors can be flipped horizontally, vertically, or in both directions
  // 'horizontal', 'vertical' or 'both'
  flip: '',

  // Cursor can be rotated any number of degrees
  // rotate: 45
  rotate: 0,

  // specify an outline color for cursors
  outline: null,

  // To use a different font, the font option must be set to an object, 
  // specifying the font family and the CSS class format for icons.
  font: {
    family: 'FontAwesome',
    cssClass: 'fa fa-%s'

Change logs:


  • v0.3.0: Hotfix - Make FontAwesome an optional dependency


  • v0.2.0: Bug fix for certain icons getting clipped when used as a cursor


  • Remove minor version constraints on bower/npm dependencies


  • Fix issue where Chrome would not set cursor style if it was already set - clear


  • Bug fix for rendering artifacts in Chrome


  • Bug fix for rendering artifacts in Firefox


  • Add font option for specifying an alternative icon font to use instead of FontAwesome


  • Add outline option for specifying an outline color for cursors


  • Add rotate option for rotating cursor by a specified number of degrees. 
  • Flip transformation now applied after other transformations (e.g. rotate)


  • Allow cursors to be flipped horizontally, vertically, and in both directions using a `flip` option

This awesome jQuery plugin is developed by jwarby. For more Advanced Usages, please check the demo page or visit the official website.