Font Awesome 文件类型图标(Files + File Types Icons)详解
Font Awesome 在 Files 类别下提供了丰富的文件相关图标,包括通用文件、文件夹、特定文件类型(如 PDF、Excel、Word、代码、图片、视频、压缩包等)。这些图标非常适合文件管理器、下载列表、附件展示、文档库等场景。大多数属于免费版(Solid 风格),部分有 Regular 或其他变体(可能需 Pro)。
官方类别页面:https://fontawesome.com/icons/categories/files
在这里可以搜索所有文件图标,目前(2025 年底)免费版有 数十个 文件类型相关图标。
如何使用文件类型图标
前缀通常是 fas(Solid 免费风格),部分有 far(Regular)。
基本语法:
<i class="fas fa-file"></i> <!-- 通用文件 -->
<i class="fas fa-file-pdf"></i> <!-- PDF 文件 -->
<i class="fas fa-file-excel"></i> <!-- Excel 文件 -->
<i class="fas fa-file-code"></i> <!-- 代码文件 -->
完整示例:
<script src="https://kit.fontawesome.com/你的kit代码.js" crossorigin="anonymous"></script>
<i class="fas fa-file-pdf fa-3x" style="color: #FF0000;"></i> <!-- 红色 PDF -->
<i class="fas fa-file-word fa-3x" style="color: #2B579A;"></i> <!-- 蓝色 Word -->
<i class="fas fa-file-excel fa-3x" style="color: #217346;"></i> <!-- 绿色 Excel -->
<i class="fas fa-file-archive fa-3x" style="color: #F1C232;"></i> <!-- 黄色压缩包 -->
常见文件类型图标推荐(免费版主要列表)
以下是热门的文件类型图标(类名统一为 fas fa-xxx):
- 通用文件:
fa-file(空白文件)fa-file-lines(带文本的文件)fa-file-invoice(发票文件)- 办公文档:
fa-file-pdf(PDF,红色调常见)fa-file-word(Word 文档)fa-file-excel(Excel 表格)fa-file-powerpoint(PowerPoint 演示)- 媒体文件:
fa-file-image(图片文件)fa-file-audio(音频文件)fa-file-video(视频文件)- 代码与压缩:
fa-file-code(代码文件)fa-file-archive(压缩包,如 ZIP)fa-file-zipper(拉链压缩,变体)- 文件夹:
fa-folder/fa-folder-open(文件夹)fa-folder-closed(闭合文件夹)
更多图标可在官网搜索 “file” 或直接访问 Files 类别获取最新列表。
使用技巧
- 颜色自定义:根据文件类型匹配官方颜色(如 PDF 红、Excel 绿、Word 蓝)。
- 大小与叠加:结合
fa-2x等,或堆叠如文件上加箭头表示下载。 - 动画:
fa-pulse用于上传/下载进度。 - 旧版兼容:早期版本用
fa-file-pdf-o(轮廓版),现在多用实心版。
这些图标简洁专业,完美用于文件浏览器或 CMS。如果需要特定文件类型的代码、更多变体,或在列表中的组合示例,告诉我,我可以继续讲解!官方搜索:https://fontawesome.com/search?q=file