常用操作图标
首页
fa-home
用户
fa-user
设置
fa-cog
搜索
fa-search
编辑
fa-edit
删除
fa-trash
下载
fa-download
上传
fa-upload
添加
fa-plus
减少
fa-minus
社交媒体图标
Facebook
fa-facebook
Twitter
fa-twitter
Instagram
fa-instagram
LinkedIn
fa-linkedin
YouTube
fa-youtube
GitHub
fa-github
微信
fa-weixin
QQ
fa-qq
文件类型图标
PDF
fa-file-pdf
Word
fa-file-word
Excel
fa-file-excel
图片
fa-file-image
视频
fa-file-video
音频
fa-file-audio
压缩包
fa-file-archive
代码
fa-file-code
导航和方向图标
向上
fa-arrow-up
向下
fa-arrow-down
向左
fa-arrow-left
向右
fa-arrow-right
左箭头
fa-chevron-left
右箭头
fa-chevron-right
菜单
fa-bars
关闭
fa-times
状态和提示图标
成功
fa-check-circle
警告
fa-exclamation-triangle
错误
fa-times-circle
信息
fa-info-circle
加载
fa-spinner fa-spin
时钟
fa-clock
日历
fa-calendar
喜欢
fa-heart
通信和联系图标
邮件
fa-envelope
电话
fa-phone
消息
fa-comment
位置
fa-map-marker-alt
全球
fa-globe
WiFi
fa-wifi
分享
fa-share-alt
链接
fa-link
使用指南
1. HTML中使用
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<i class="fas fa-home"></i>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<i class="fas fa-home"></i>
2. Bootstrap图标
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<i class="bi bi-house"></i>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<i class="bi bi-house"></i>
3. 自定义样式
<style>
.my-icon { color: #2563eb; font-size: 24px; }
</style>
<i class="fas fa-home my-icon"></i>
.my-icon { color: #2563eb; font-size: 24px; }
</style>
<i class="fas fa-home my-icon"></i>
4. CSS伪元素使用
.element::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f015"; /* home图标 */
}
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f015"; /* home图标 */
}