下面是使用字体图标作为光标的完整攻略。
准备工作
首先需要找到一个自己喜欢的字体图标库,权衡一下免费和收费、可用性和多样性等因素,选择一个最适合自己的字体图标库,例如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
,隐藏默认光标,只显示自定义图标。
希望这份攻略能对你有所帮助!