最省事用 Font Awesome 6 CDN，注意 class 名如 fa-solid fa-envelope；SVG 内联更可控，删 width/height 仅留 viewBox；禁用 PNG 位图；图标颜色需表意并适配深色模式。
用 Font Awesome 引入图标最省事
直接在 里加 CDN 链接，不用下载、不占本地空间，所有图标开箱即用。当前主流版本是 Font Awesome 6，免费版已足够简历使用。
常见错误是复制了旧版（v4/v5）的 class 名，比如写成 fa-phone，但 v6 已改为 fa-solid fa-phone 或 fa-brands fa-linkedin，不匹配就显示空白方块。
实操建议：
- 去 Font Awesome 官网搜索页 找图标，点进详情页复制「SVG + JS」方式的代码片段（它会自动注入所需 JS）
- 粘贴到 HTML 文件
内，位置放在<link rel="stylesheet">之前 - 在简历中用
<i class="fa-solid fa-envelope"></i>插入邮箱图标，fa-solid表示实心风格，fa-regular是线框风格 - 图标默认继承文字颜色和字号，所以加
style="font-size: 1rem; color: #333;"就能统一控制大小和色值
用 SVG 内联图标更可控
当需要微调路径、添加动画或确保离线可用时，SVG 内联是更稳妥的选择。尤其适合联系方式栏里的电话、邮箱、地址等固定图标 —— 数量少、复用稳定、无网络依赖。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：直接从图标网站下载 SVG 后，忘记删掉编辑器自动生成的 width/height 属性，导致在 Flex 布局里错位或缩放异常。
实操建议：
- 从 Icones 或 SVGRepo 搜索并下载单个 SVG 文件
- 用文本编辑器打开，删掉顶部类似
width="24" height="24"和viewBox外的多余属性（保留viewBox） - 把
<svg>...</svg>整段粘贴进 HTML，包裹在<span></span>里便于 CSS 控制，例如：<span class="icon"><svg>...</svg></span> - 用 CSS 统一设
.icon svg { width: 1.2em; height: 1.2em; vertical-align: -0.15em; }，对齐文字基线
别用 PNG / JPG 图标，除非你真需要照片级细节
PNG 图标在高分屏上容易发虚，且无法随字体缩放 —— 改个 font-size: 14px，文字变大了，图标还卡在 16×16 像素，视觉失衡。简历里所有功能性小图标（电话、邮件、GitHub、地点等）都不该用位图。
例外场景极少：比如你在“项目经历”里想嵌一个带品牌 logo 的截图，那用 PNG 合理；但“联系方式”旁那个电话小图，必须是矢量。
性能影响很实际：一个 2KB 的 SVG 图标，和一个 8KB 的 2x PNG，加载差异不大；但 10 个 PNG 就多出 60KB，对首屏渲染和 GitHub Pages 这类静态托管平台的冷启动有可感知延迟。
图标颜色与语义要一致
图标不是装饰品。比如用红色 fa-solid fa-bug 表示“擅长调试”，用绿色 fa-solid fa-check 表示“已上线项目”，这种隐含语义能加速 HR 理解。但如果全用同一色系（比如全灰），就浪费了视觉线索。
实操中常被忽略的一点：深色模式适配。Font Awesome 默认图标不响应系统主题，得手动加媒体查询：
@media (prefers-color-scheme: dark) {
.contact-icon { color: #999; }
}
而内联 SVG 可以直接在 <svg></svg> 里用 fill="currentColor"，让它自动跟随父元素文字色 —— 这是最轻量也最可靠的暗色模式支持方式。
