HTML按钮标签如何制作带图标的左右复合按钮

直接用<button>标签嵌入图标即可，无需额外容器；结构上支持图标与文字自由混排，顺序由HTML书写决定，纯图标按钮须加aria-label；CSS推荐flex布局对齐，SVG内联可避免依赖并适配深色模式；需兼顾可访问性与移动端点击区域。

直接用 <button> 标签内部嵌入图标即可，无需额外容器。关键在于结构清晰、样式可控、语义正确。

HTML 结构：图标 + 文字组合

按钮内可自由混排图标（<i>、<svg> 或 <img>）和文字，左右顺序由 HTML 书写顺序决定：

1. 左图标右文字：<button><i class="icon-left"></i>确认</button>
2. 左文字右图标：<button>取消<i class="icon-right"></i></button>
3. 纯图标按钮（无障碍需加 aria-label）：<button aria-label="上一页"><i class="fa-chevron-left"></i></button>

CSS 样式：对齐与间距控制

图标默认会随文字基线对齐，常需微调。推荐用 flex 布局统一控制：

1. 给 button 设置 display: inline-flex 或 display: flex，再用 align-items: center 垂直居中
2. 图标加 margin-right（左图标）或 margin-left（右图标），例如 margin-right: 6px
3. SVG 图标建议设固定宽高并 vertical-align: middle，避免 baseline 错位
4. 字体图标（如 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"/></svg>提交</button>

这样既无网络请求，又完全可控，适配深色模式时还可直接改 fill 颜色。

注意事项

别忽略可访问性：

1. 纯图标按钮必须带 aria-label，屏幕阅读器才能识别功能
2. 避免仅靠颜色区分状态，比如“禁用态”要同时降低 opacity 和 cursor
3. 点击区域建议最小 44×44px，移动端更友好
4. 不要用 <div onclick> 模拟按钮——语义错误，键盘无法聚焦，也不触发 form submit