使用 font awesome 6 本地引入最稳妥，图标类名需按 v6 规范（如 fa-x-twitter），html 必须语义化并添加 aria-label，css 用 flex 布局居中且设 cursor:pointer，微信/微博/b站图标名易错需注意拼写。
直接用就行，但别照抄路径和颜色——图标能显示的前提是链接有效、CSS没被覆盖、字体加载成功。
用 Font Awesome 6 的 @font-face 方式最稳
CDN 加载快，但国内偶尔抽风；本地引入反而更可控，尤其初学者调试时不会卡在“图标变方块”上。
- 去 Font Awesome 官网下载 v6.5+ ZIP，解压后把
webfonts/整个文件夹放进你网站根目录（比如和index.html同级） - 在 HTML
里加这段 CSS 引入（注意路径别写错）：@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");或者本地版：@import url("fontawesome/css/all.min.css"); - 图标类名统一用
fa-brands+ 平台标识，比如微信是fa-weixin，Twitter 是fa-x-twitter（不是fa-twitter，v6 已改名）
HTML 结构要带语义和可访问性
光堆 <i></i> 标签会害屏幕阅读器用户听不懂你在干啥，搜索引擎也不喜欢。
- 每个图标必须包在
<a></a>里，href指向真实主页（别写#） - 加
aria-label描述用途，比如aria-label="关注我们的微信公众号" - 用
<nav aria-label="社交媒体链接"></nav>包住整组，告诉辅助工具这是导航区 - 别用
<div> 或 <code><span></span>当容器——它们没语义，CSS 布局也难对齐一行居中图标栏的 CSS 关键就三行
初学者常卡在“图标不水平居中”或“点不动”，其实多半是 display 和 cursor 没设对。
- 父容器用
display: flex; justify-content: center; gap: 1rem;（别用 text-align，它对 flex 无效） -
<a></a>标签加display: inline-flex; align-items: center; justify-content: center;，不然图标上下偏移 - 必须写
cursor: pointer;，否则鼠标悬停没反馈，用户以为点不了 - 图标大小统一用
font-size: 1.5rem;，别用 width/height——Font Awesome 是字体图标，缩放靠字号
微信、微博、B站这些国内平台的图标名容易写错
Font Awesome 官方没收录“小红书”“知乎”“抖音”，得手动补 SVG 或换图标库，但微信、微博、B站都有现成支持。
- 微信：
fa-weixin（不是fa-wechat） - 微博：
fa-weibo - Bilibili：
fa-bilibili（拼写是 bilibili，不是 bili-bili） - QQ：
fa-qq（小写，不是FA-QQ） - 如果图标不显示，打开浏览器开发者工具 → Elements 面板，检查元素有没有被其他 CSS 的
font-family覆盖（比如全局设了font-family: "Helvetica";就会干掉 FontAwesome）
真正麻烦的不是写代码，是确认每个
href是否真实可访问、每个aria-label是否准确描述动作、每个图标在手机上是否还能点——这些没法靠复制粘贴解决。 - 父容器用
