用 Font Awesome CDN（v6+）引入社交图标最便捷，需用 fab 类和正确图标名，添加 aria-label 和 rel="noopener noreferrer" 保障可访问性与安全，配合 flex 布局和缩放类优化显示。
怎么用 Font Awesome 快速加社交图标
直接引入 Font Awesome CDN 是最省事的方式，不用下载图标、不用配路径，改个 <i> 标签就能用。注意必须用 v6+ 的免费版链接（v5 已停更，部分图标名变了）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
然后在页面里写：
<a href="https://github.com/yourname" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
-
fab表示品牌图标（Brand），fa-github是图标名，大小写敏感 -
aria-label不可少，否则屏幕阅读器读不出用途，影响可访问性 -
target="_blank"后建议加rel="noopener noreferrer"防安全漏洞
图标对齐和间距总不整齐？检查 display 和 margin
默认 <i> 是行内元素，多个图标堆一起容易上下错位或挤在一起。常见修复方式：
- 给父容器设
display: flex+align-items: center统一垂直对齐 - 每个图标加
margin: 0 8px（别用margin-right单边，末尾会多出空白） - 避免用
font-size直接调大小——优先用 Font Awesome 自带的缩放类：fa-lg/fa-2x/fa-3x
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="social-links" style="display: flex; align-items: center;"> <a href="..."><i class="fab fa-github fa-lg"></i></a> <a href="..."><i class="fab fa-linkedin fa-lg"></i></a> </div>
图标点击没反应？先确认 href 和协议是否合法
本地开发时如果用 file:// 协议打开 HTML，部分浏览器会拦截 target="_blank" 跳转，导致“点不动”。真实部署到 HTTP/HTTPS 服务后就正常了。
另外注意链接格式：
- GitHub 必须是
https://github.com/xxx，不是github.com/xxx（缺协议会当成相对路径） -
邮箱链接要用
mailto:you@example.com，不是you@example.com -
微信没有公开 URL Scheme，别写
weixin://—— 浏览器打不开，用户还得手动复制微信号
想换图标但找不到对应 class 名？查官网图标库别靠猜
Font Awesome 官网图标搜索页（https://fontawesome.com/icons）支持按平台名过滤，比如搜 “discord”，出来的结果是 fa-discord；搜 “zhihu” 才能找到 fa-zhihu。
容易踩的坑：
- v6 把部分中文平台图标移到了 Pro 版（如
fa-weibo仍免费，但fa-xiaohongshu需付费） - 有些图标名带连字符，比如
fa-stack-overflow，少一个短横就失效 - 不要混用 v5 和 v6 的 class：v5 是
fa fa-github，v6 是fab fa-github，混用会导致图标不显示
图标本身不难加，难的是让它们在不同设备上都对齐、可点、可读、不报错。尤其是本地双击 HTML 文件测试时的跳转失败，常被误判为代码问题，其实是协议限制。
