web-dev-qa-db-ja.com

Font Awesomeアイコンをカーソルとして設定します-これは可能ですか？

Font Awesomeには、Webプロジェクトで使用する非常に優れたアイコンのコレクションがあります。これらのアイコンの1つをカーソル（カスタムカーソル）として使用します。

私の理解では、カスタムカーソルには画像のURLが必要ですが、Font Awesomeアイコンの画像のURLを見つけることができません。

javascriptcsshtml5html5-canvasfont-awesome
31
Pratheeswaran.R

とった！

  1. キャンバスを作成する
  2. その上にfaアイコンを描画します
  3. Base-64画像のURLに変更します
  4. カーソルのCSSスタイルに画像を適用します

そして、デモを作成しました： http://jsfiddle.net/rqq8B/2/

// http://stackoverflow.com/questions/13761472/how-to-render-glyphs-from-fontawesome-on-a-canvas-element
// http://stackoverflow.com/questions/13932291/css-cursor-using-data-uri

$(function() {
    var canvas = document.createElement("canvas");
    canvas.width = 24;
    canvas.height = 24;
    //document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000000";
    ctx.font = "24px FontAwesome";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("\uf002", 12, 12);
    var dataURL = canvas.toDataURL('image/png')
    $('body').css('cursor', 'url('+dataURL+'), auto');
});
42
Alfred Huang

jQuery Awesome Cursor があり、1つの単純なコードを呼び出すだけで、フォントに素晴らしいアイコンをカーソルに追加できます。

$('body').awesomeCursor('pencil');

または、いくつかのオプションを渡します：

$('body').awesomeCursor('pencil', {
  /* your options here */
  size: 22,
  color: 'orange',
  flip: 'horizontal'
});

免責事項：私は今見つけたばかりのこのライブラリの著者ではありません。

9
Mahdi Alkhatib

最終的に、@ fish_ballのコードを確実に動作させることができなかったので、 イメージをダウンロードした を使用し、 gimp を使用して32×32pxに切り取り、編集し、使用しましたそれらはこのように：

.myClass { cursor: url('/static/img/pencil30_32x32.png') 1 30, crosshair }

1 30 partは、マウスポインター「ホットスポット」を左から1ピクセル、画像の上部から30ピクセルに設定します。

6
Michael Scheper

前述のキャンバスメソッドでは、カーソルがぼやけます。

SVGを使用すると、より良い結果が得られます。

  • 使用するアイコンのSVGを EncharmのFont-Awesome-SVG-PNG からダウンロードします。
  • テキストエディターを使用してSVGを編集し、使用する幅と高さを指定します
    • 例：24 x 24。
    • 通常、ブラウザには最大サイズ（Firefoxでは128 x 128）があることに注意してください。
  • CSSでカーソルを宣言します。例：cursor: url( '/assets/img/volume-up.svg' ), pointer;
4
Fabien Snauwaert