Font Awesome 手势图标
Font Awesome 手势图标
简介
【Font Awesome】是一个开源图标字体,由Dave Gandy主持开发,致力于为开发者提供大量优秀的图标,方便开发者快速制作出精美的网页。
【Font Awesome】的手势图标为专为移动端和触控设备开发,涵盖了常见的手势操作,如拇指向上,拇指向下,旋转等多种手势。
使用方法
使用【Font Awesome】的手势图标,需要先引入【Font Awesome】的CSS文件,可以从官网https://fontawesome.com/下载。在HTML代码中,使用以下代码引入CSS文件
<link rel="stylesheet" href="路径/font-awesome.min.css">
引入CSS文件后,即可在HTML中使用手势图标。例如,在网页中添加一个拇指向上的图标,可以使用以下代码:
<i class="fas fa-thumbs-up"></i>
其中,.fas
为样式类,代表实心图标,.fa-thumbs-up
为图标类,代表拇指向上。
除了拇指向上的图标,【Font Awesome】还提供了多种其他类型的手势图标,如下表所示:
手势类型 | 图标类 |
---|---|
拇指向上 | fas fa-thumbs-up |
拇指向下 | fas fa-thumbs-down |
拇指向左 | fas fa-thumbs-left |
拇指向右 | fas fa-thumbs-right |
安卓手势 | fas fa-hand-lizard |
苹果手势 | fas fa-hand-peace |
手掌 | fas fa-hand-paper |
手指头和盘子 | fas fa-hand-point-down |
手指头和指针 | fas fa-hand-point-up |
手拳头 | fas fa-hand-rock |
手剪刀 | fas fa-hand-scissors |
手稳 | fas fa-hand-spock |
旋转手势 | fas fa-redo-alt |
图标样式
【Font Awesome】提供了三种图标样式,分别是实心图标(fas
)、轮廓图标(far
)和品牌图标(fab
)。其中,品牌图标包括了一些常见的品牌标识,如Facebook、Twitter等。
三种图标样式所使用的CSS类别分别为:
样式类型 | CSS类别 |
---|---|
实心图标 | fas |
轮廓图标 | far |
品牌图标 | fab |
总结
【Font Awesome】的手势图标可以为开发者提供更丰富的图标资源,满足在移动端和触控设备中使用的需求。使用方法也十分简单,只需在HTML代码中引入CSS文件,并使用相应的图标CSS类别即可。