將 Font Awesome 圖標設置為光標 - 這可能嗎？

Question

Font Awesome 有一個非常好的圖標集合，可用於 Web 項目。 我想使用這些圖標之一作為光標（自定義光標）。

據我了解，自定義光標需要一個圖片網址，但我找不到 Font Awesome 圖標的圖片網址。

Answer 1

知道了！

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("\", 12, 12); var dataURL = canvas.toDataURL('image/png') $('body').css('cursor', 'url('+dataURL+'), auto'); });

 body { position: fixed; left: 0; right: 0; top: 0; bottom: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

Answer 2

最后，我無法讓@fish_ball 的代碼可靠地工作，所以我只是下載了圖像，使用gimp將它們裁剪並編輯為 32×32px，然后像這樣使用它們：

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

1 30部分將鼠標指針設置為距圖像左側 1px 和 30px 的“熱點”。

Answer 3

有jQuery Awesome Cursor ，您可以通過調用一個簡單的代碼向光標添加字體很棒的圖標：

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

或者向它傳遞一些選項：

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

免責聲明：我不是我剛剛找到的這個庫的作者。

Answer 4

提到的畫布方法會導致光標模糊。

使用 SVG 可提供更好的結果：

• 從Encharm 的 Font-Awesome-SVG-PNG下載要使用的圖標的 SVG 。
• 使用文本編輯器編輯 SVG 並指定要使用的寬度和高度
  • 例如：24 x 24。
  • 請記住，瀏覽器中通常有一個最大尺寸（Firefox 中為 128 x 128。）
• 在 CSS 中聲明光標，例如： cursor: url( '/assets/img/volume-up.svg' ), pointer;

Answer 5

對於任何使用 Vue.js 的人來說，有一個更簡單的方法：

將字體真棒圖標作為組件導入：

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas);
library.add(fab);
library.add(far);
Vue.component('fa-icon', FontAwesomeIcon);

並直接在頁面的 HTML 中使用它：

<fa-icon icon="copy" @click="yourFunction"/>

並用<span>包圍你的標簽：

<span class="hover"><fa-icon icon="copy" @click="yourFunction"/></span>

並添加到您的 css：

span.hover { 
  cursor: pointer; 
}

這將在所有<span>標簽上添加一個指針，並在您的代碼中添加類hover （以及您的字體真棒圖標！）