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

Download jQuery Plugin For Custom Cursor Using Font Awesome Icons – Awesome Cursor

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Custom Cursor Using Font Awesome Icons – Awesome Cursor, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <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.

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

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

view source
1 $('#demo-1').awesomeCursor('paper-plane', {
2   // Options here
3 });

4. All the customization options.

view source
01 $('#demo-1').awesomeCursor('paper-plane', {
02  
03   // The color of the cursor
04   color: '#000000',
05  
06   // The size of the cursor
07   size: 18,
08  
09   // The string descriptor for the hotspot location
10   // x and y offsets hotspot: [0, 17]
11   // or using a string descriptor:  hotspot: 'bottom left'
12   hotspot: [0, 0],
13  
14   // Cursors can be flipped horizontally, vertically, or in both directions
15   // 'horizontal', 'vertical' or 'both'
16   flip: '',
17  
18   // Cursor can be rotated any number of degrees
19   // rotate: 45
20   rotate: 0,
21  
22   // specify an outline color for cursors
23   outline: null,
24  
25   // To use a different font, the font option must be set to an object,
26   // specifying the font family and the CSS class format for icons.
27   font: {
28     family: 'FontAwesome',
29     cssClass: 'fa fa-%s'
30   }
31 });

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.

source : jqueryscript.net

Related posts: