マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」

マウスのカーソルを変えたいなんてことがたまにあるかと思います。
そんな時はAwesome Cursor - a jQuery plugin for using FontAwesome icons as custom CSS cursorsを利用することで、多彩なアイコンに簡単に変更できます。
※Chrome and FireFoxのみ
マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」サンプル

使用方法
Awesome Cursorからファイル一式を、また、Font Awesome, the iconic font and CSS toolkitからもファイルをダウンロードします。
<link rel="stylesheet" href="font-awesome.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.awesome-cursor.js"></script>
<script>
$(document).ready(function() {
$('body').awesomeCursor('globe');
});
</script>

なおFont Awesomeのfontも所定の場所にアップする必要がありますので、ご注意下さい。
またアイコンを変更したい場合はFont Awesome Iconsにあるアイコンからfa-を抜いたものを入力いただければ反映されます。
さらにオプションとしては以下の様なものがあり、色なども柔軟に変更できます。
$(document).ready(function() {
$('body').awesomeCursor('code', {
color: 'red', //色
size: 24, //サイズ
hotspot: 'center'//場所
});
});

マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」サンプル

sponsors

「マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」」をシェアする

記事作成:
記事URL:

TOP > > > マウスのカーソルをFontAwesomeのアイコンに変更できるjQueryプラグイン「jQuery Awesome Cursor」