Font Awesome 文件类型图标

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

文章已创建 3181

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部