直接用标签嵌入图标即可，无需额外容器；结构上支持图标与文字自由混排，顺序由html书写决定，纯图标按钮须加aria-label；css推荐flex布局对齐，svg内联可避免依赖并适配深色模式；需兼顾可访问性与移动端点击区域。
直接用 <button></button> 标签内部嵌入图标即可，无需额外容器。关键在于结构清晰、样式可控、语义正确。
HTML 结构：图标 + 文字组合
按钮内可自由混排图标（<i></i>、<svg></svg> 或 <img>）和文字，左右顺序由 HTML 书写顺序决定：
- 左图标右文字：
<button><i class="icon-left"></i>确认</button> - 左文字右图标：
<button>取消<i class="icon-right"></i></button> - 纯图标按钮（无障碍需加 aria-label）：
<button aria-label="上一页"><i class="fa-chevron-left"></i></button>
CSS 样式：对齐与间距控制
图标默认会随文字基线对齐，常需微调。推荐用 flex 布局统一控制：
- 给 button 设置
display: inline-flex或display: flex，再用align-items: center垂直居中 - 图标加
margin-right（左图标）或margin-left（右图标），例如margin-right: 6px - SVG 图标建议设固定宽高并
vertical-align: middle，避免 baseline 错位 - 字体图标（如 Font Awesome）注意加载 CSS 并确保类名正确，例如
<i class="fas fa-check"></i>
实用 SVG 图标内联示例
避免外部依赖，直接嵌入轻量 SVG：
<button> <svg width="16" height="16" viewbox="0 0 16 16" style="margin-right: 6px; vertical-align: text-bottom;"><path d="M12.5 4.5L7 10l-1.5-1.5L3 11l5-5 5.5 5.5z"></path></svg> 提交 </button>
这样既无网络请求，又完全可控，适配深色模式时还可直接改 fill 颜色。
注意事项
别忽略可访问性：
- 纯图标按钮必须带
aria-label，屏幕阅读器才能识别功能 - 避免仅靠颜色区分状态，比如“禁用态”要同时降低 opacity 和 cursor
- 点击区域建议最小 44×44px，移动端更友好
- 不要用
<div onclick> 模拟按钮——语义错误，键盘无法聚焦，也不触发 form submit </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
