博客

如何使用字体超棒的图标作为光标

  • Post category:jquery

下面是使用字体图标作为光标的完整攻略。

准备工作

首先需要找到一个自己喜欢的字体图标库，权衡一下免费和收费、可用性和多样性等因素，选择一个最适合自己的字体图标库，例如Font Awesome、Material Icons等等。

然后需要根据自己的需求选择适合的CSS属性来修改鼠标光标，常用的CSS属性可以有：cursor、content、::before、::after等等。

修改CSS样式

以cursor属性为例，假设我们选用的字体图标是“arrow-right”，则可以在CSS中这么写：

body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23000' d='M13.29 7.29L8.71 2.71a1.003 1.003 0 00-1.42 0c-.39.39-.39 1.02 0 1.41L10.59 8H3C2.45 8 2 8.45 2 9v2c0 .55.45 1 1 1h7.59l-3.3 3.29a1.003 1.003 0 001.42 1.41L13.3 8.71c.38-.38.38-1.02 0-1.41z'/></svg>") 12 12, auto;
}

代码解析：

  • cursor: CSS属性，表示光标样式；
  • url: CSS属性值，用于定义光标图片的路径；
  • "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23000' d='M13.29 7.29L8.71 2.71a1.003 1.003 0 00-1.42 0c-.39.39-.39 1.02 0 1.41L10.59 8H3C2.45 8 2 8.45 2 9v2c0 .55.45 1 1 1h7.59l-3.3 3.29a1.003 1.003 0 001.42 1.41L13.3 8.71c.38-.38.38-1.02 0-1.41z'/>：SVG格式的图片内容；
  • 12 12: 图像的热点位置，x和y相等；
  • auto: 如果设置了url但是没有找到指定的光标文件，则使用默认的光标。

针对一些字体图标库，如Font Awesome，提供了CSS类名来修改CSS样式，例如fa-chevron-right表示右箭头图标，则可以这样写：

body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23"+("000")+"' d='"+icon.replace(/"/g, '%22').replace(/'/g, '%27')+"'/></svg>") 2 0, auto;
}
.fa-chevron-right {
  content: '\f054';
  display: inline-block;
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

代码解析：

  • fa-chevron-right: Font Awesome提供的字体图标CSS类名；
  • content: CSS属性，用于插入字体图标的Unicode编码，即\f054；
  • font-family: 设置字体图标所在的字体族；
  • line-height：解决字体图标位置偏移的问题；
  • icon.replace(/"/g, '%22').replace(/'/g, '%27')：解析Font Awesome中提供的SVG格式。

示例

示例1

使用Font Awesome的fa-caret-up图标作为鼠标的光标，示例代码如下：

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <style>
    body {
      cursor: none;
    }
    .mouse-cursor {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .fa-caret-up {
      color: #00bfff;
    }
  </style>
</head>
<body>
  <div class="mouse-cursor fa fa-caret-up"></div>
  <h1>使用Font Awesome的fa-caret-up图标作为鼠标的光标</h1>
  <p>当鼠标在页面中移动时，将会看到一个蓝色的向上箭头。</p>
</body>

代码解析：

  • 将CSS样式表中引入Font Awesome；
  • 使用fa-caret-up图标作为鼠标光标，设置颜色为蓝色；
  • 在页面中添加一个div元素，使用mouse-cursor类名来定位鼠标光标；
  • 设置cursor属性为none，隐藏默认光标，只显示自定义图标。

示例2

使用Material Designs的md-add图标作为鼠标的光标，示例代码如下：

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    body {
      background-color: #f2f2f2;
    }
    .mouse-cursor {
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      height: 50px;
      width: 50px;
      pointer-events: none;
    }
    .material-icons {
      font-size: 36px;
      color: #ff5722;
    }
  </style>
</head>
<body>
  <div class="mouse-cursor">
    <i class="material-icons">add</i>
  </div>
  <h1>使用Material Designs的md-add图标作为鼠标的光标</h1>
  <p>当鼠标在页面中移动时，将会看到一个橙色的加号。</p>
</body>

代码解析：

  • 将CSS样式表中引入Material Icons；
  • 使用md-add图标作为鼠标光标，设置颜色为橙色；
  • 在页面中添加一个div元素，使用mouse-cursor类名来定位鼠标光标；
  • 使用flex布局，使图标水平和垂直居中；
  • 设置cursor属性为none，隐藏默认光标，只显示自定义图标。

希望这份攻略能对你有所帮助！

Tags: