应将图标和文字包裹在同一个或内并设为inline-block，通过padding扩展热区、vertical-align: middle对齐、显式声明type="button"或role="link"确保语义与可访问性。
图标和文字必须包裹在同一个 <a></a> 或 <button></button> 元素内，且该元素需设为块级或行内块，才能共享可点击区域。单独给图标加 onclick 或把图标和文字分开放在两个链接里，都会导致点击行为割裂、热区不一致、移动端误触率高。
为什么直接写 <a><i></i>文字</a> 还是点不中图标？
常见错误是只靠图标本身的 font-size 或 width/height 去撑开点击区，但忽略了：
– 图标容器（如 <i></i> 或 <svg></svg>）默认是行内元素，padding 不生效
– 没设 display: inline-block 或 vertical-align: middle，导致图标和文字基线错位，视觉上“悬空”
– 父 <a></a> 没设 padding，实际可点击区域仍只包裹文字高度
正确做法是让整个 <a></a> 承担交互职责：
- 给
<a></a>设display: inline-block（非block，避免换行） - 用
padding: 8px 12px显式扩展上下左右热区 - 图标内部用
vertical-align: middle对齐文字中线 - 移除图标上多余的
margin，改用margin-left: 4px控制图文间距
<button></button> 包裹图标+文字时，如何避免表单提交干扰？
如果页面里有 <form></form>，未声明 type 的 <button></button> 默认是 submit，点一下就刷新页面。这不是样式问题，是语义陷阱。
务必显式声明类型：
- 纯交互按钮：加
type="button" - 图标+文字组合用于跳转：优先用
<a></a>，语义更准、无需防提交 - 若必须用
<button></button>（比如要触发 JS 弹窗），同时加role="link"和tabindex="0"保证键盘可访问 - 禁用默认焦点环时，别只靠
outline: none——得提供替代焦点样式，否则 WCAG 不合规
移动端图标太小，点不准怎么办？
图标本身尺寸常只有 16×16px，远低于 iOS/Android 推荐的 44×44px 最小点击热区。光放大 SVG 或字体图标会模糊或失真，真正有效的是扩展容器热区。
不用改图标，改包裹它的元素：
- 给
<a></a>或<button></button>加min-width: 44px; min-height: 44px; - 配合
padding（如padding: 12px 16px），让图文居中不顶边 - 用
text-align: center+line-height控制垂直居中，比flex更轻量、兼容性更好 - 避免对图标单独设
cursor: pointer——父元素已可点击，再加会误导辅助技术
最容易被忽略的一点：当图标带 pointer-events: none（比如为了不干扰 input 聚焦）时，它虽然视觉可见，但已脱离可点击流。如果此时你又没给父元素设足够 padding，用户实际能点中的就只剩文字那一窄条——这种“半失效”状态，在真机测试前几乎无法察觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
