Examples

Hover your cursor over the boxes to see the example cursors

Blue Paper Plane With Top Right Hotspot

{% highlight javascript %}$('#example1') .awesomeCursor('paper-plane', { color: '#2cb2da', hotspot: 'top right' });{% endhighlight %}

Big Green Paintbrush

{% highlight javascript %}$('#example2') .awesomeCursor('paint-brush', { color: '#34db33', size: 32 });{% endhighlight %}

Red Banned Circle With Centered Hotspot

{% highlight javascript %}$('#example3') .awesomeCursor('ban', { color: 'red', size: 24, hotspot: 'center' });{% endhighlight %}

Pink Horizontally Flipped Fighter Jet

{% highlight javascript %}$('#example4') .awesomeCursor('fighter-jet', { color: 'hotpink', size: 24, flip: 'horizontal' });{% endhighlight %}

Blue Rotated Hand

{% highlight javascript %}$('#example5') .awesomeCursor('hand-o-up', { color: 'skyblue', size: 24, rotate: 45 });{% endhighlight %}

Green Pencil With Brown Outline

{% highlight javascript %}$('#example6') .awesomeCursor('pencil', { color: 'limegreen', size: 24, outline: 'brown' });{% endhighlight %}

<iframe>

Wait for the <iframe> to load, then set the cursor on the contents:

{% highlight javascript %}var $iframe = $('#iframe'); $iframe.ready(function(e) { $iframe.contents().find('img').awesomeCursor('map-marker', { color: 'maroon', size: 32, outline: '#ccc', hotspot: 'center bottom' }); });{% endhighlight %}

Google Maps

Using the Google Maps Javascript API v3.

{% highlight javascript %}var map = new google.maps.Map($('#google-maps')[0], { center: { lat: 37.544494, lng: 138.276398 }, zoom: 8 }); google.maps.event.addListenerOnce(map, 'bounds_changed', function() { $('#google-maps').find('div').awesomeCursor('location-arrow', { size: 22, color: 'orange', flip: 'horizontal' }); });{% endhighlight %}