在中放Font Awesome提示图标需引入v6 CDN，用，加vertical-align:middle对齐，绑定点击事件时用event.stopPropagation()防冒泡，兼容性问题优先用title属性。
怎么在 <td> 里放 Font Awesome 提示图标？
<p>直接用 <code><i></i> 标签插入图标即可，但必须确保 Font Awesome 的 CSS 已加载。常见错误是只引入 JS 版本却没配好 SVG 渲染，或用了旧版 class 名（比如 fa-info-circle 在 v6 中已改为 fa-circle-info）。
实操建议：
- 推荐用 CDN 引入最新版：在
加<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"> - 图标放在
<td> 内任意位置，例如：<code><td> <i class="fa-solid fa-circle-info" aria-hidden="true"></i> 数据说明</td> -
aria-hidden="true"必须加上，避免屏幕阅读器重复读出图标名 - 不要用
<span></span>包裹图标再加 class——<i></i>本身就是语义正确的容器 - 给图标加
vertical-align: middle;（最常用且兼容性好） - 如果表格单元格用了
padding或设置了line-height，需同步调整图标的font-size，否则显得过大或过小 - 避免用
margin-top硬调——一旦文字换行或字号变化，就失效 - 可统一写成类：
.icon-tip { vertical-align: middle; font-size: 0.9em; }，然后<i class="fa-solid fa-circle-info icon-tip"></i> - 用
event.stopPropagation()阻止冒泡，防止触发<tr> 或 <code><td> 的 click 回调 <li>别用内联 <code>onclick=""，改用 JS 选择器批量绑定：document.querySelectorAll('i.fa-circle-info').forEach(el => el.addEventListener('click', showTooltip)) - 提示框建议用原生
title属性快速实现（<i title="这里是提示内容"></i>），简单可靠，无需 JS - 若要用自定义 tooltip，务必把浮层
z-index设高，并用position: absolute+top/left动态计算位置，避免被表格overflow: hidden截断 - 打开浏览器开发者工具，看 Network 标签下是否有
fonts/fontawesome-webfont.woff2类请求 404 或被 CORS 拦截 - CDN 是否被国内网络屏蔽？可临时换为 jsDelivr：
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css - v6 默认只启用
fa-solid，若用了fa-regular图标（如fa-circle-question），需额外引入对应字体包或改用fa-solid替代 - 老环境不支持
woff2？Font Awesome v6 已不提供woff回退，此时建议降级到 v5.15.4（仍维护 woff 支持）
图标和文字怎么对齐才不歪？
默认情况下，<i></i> 是行内元素，但字体图标基线常和文字不一致，导致上下偏移。这不是 bug，是字体度量差异造成的。
解决方法：
立即学习“前端免费学习笔记（深入）”；
点击图标弹出提示框，怎么绑定事件又不干扰表格交互？
直接给 <i></i> 绑 onclick 很容易误触，尤其当单元格本身有 hover 效果或点击跳转时。关键不是“能不能绑”，而是“绑了之后会不会抢事件”。
实操要点：
IE11 或老安卓 WebView 里图标显示为空心方块？
这是 WebFont 加载失败的典型表现，不是图标没引入，而是字体文件没正确加载或被拦截。
排查顺序：
字体图标本质是字符渲染，依赖字体加载时机和环境支持。能用 title 就先用 title，复杂交互再上 JS，别为了“美观”把基础可用性搞崩。
