在开发网页、制作演示文稿或设计应用程序界面时,经常需要展示 Word 文档的图标,以直观地表示文件类型。本文将介绍几种常见且实用的 Word 文档图标嵌入方式。
最简单的方式是使用一个 PNG 或 SVG 格式的 Word 图标,并通过 <img> 标签插入:
<img src="word-icon.png" alt="Word 文档图标" width="32">
如果你的项目已引入 Font Awesome,可以直接使用其提供的 Word 图标(需 Pro 版本)或通用文档图标:
<i class="fas fa-file-word"></i> <!-- 需要 Font Awesome Pro -->
<i class="fas fa-file"></i> <!-- 免费版通用文件图标 -->
为减少 HTTP 请求,可将小图标转为 Base64 并直接写入 HTML:
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzQyODVGMCIgZD0iTTE0IDEwaC00djRoNG0tNC00aDR2LTRoLTR6Ii8+PC9zdmc+" alt="Word Icon">
若用于 PowerPoint、Word 等 Microsoft Office 软件,可直接插入官方 Word 图标图片,或使用“插入 > 图标”功能搜索 “Word” 获取矢量图标(Office 365 及以上版本支持)。