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:

2016-04-23

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

2016-03-28

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

2015-10-23

• Remove minor version constraints on bower/npm dependencies

2015-10-19

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

2015-05-25

• Bug fix for rendering artifacts in Chrome

2015-03-06

• Bug fix for rendering artifacts in Firefox

2014-12-17

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

2014-12-12

• Add outline option for specifying an outline color for cursors

2014-11-29

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

2014-11-17

• 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.