按钮图标不显示的主因是未设content、缺少position上下文或display属性；应统一用display:inline-block，父元素设position:relative，图标用绝对定位+transform微调，优先用currentColor和em单位适配响应式。
直接用 ::before 或 ::after 就能实现，前提是必须写 content、设 position 上下文、并处理好图标的尺寸与定位逻辑——漏掉任意一项，图标就消失或错位。
为什么按钮里加图标总不显示？
最常见原因是 content 没写，或者写了空字符串但没设 display。伪元素默认是 inline，没有宽高、无法定位，也压不住父元素的内边距或文字流。
-
content: ""或content: "→"必须存在，哪怕只是空字符串 - 推荐统一加
display: inline-block，方便控制width/height/vertical-align - 如果用字体图标（如 Font Awesome），
font-family和font-weight必须和引入的字体资源完全匹配，否则显示为方块或问号 - 别忘了给按钮本身加
position: relative，否则absolute定位会相对于 body 偏移
怎么让图标固定在按钮左/右/右上角？
核心是「父相对，子绝对」+ transform 居中微调。不同位置写法差异不大，但参数容易混淆。
- 左图标：按钮加
padding-left: 32px，::before设left: 8px; top: 50%; transform: translateY(-50%) - 右图标：按钮加
padding-right: 32px，::after设right: 8px; top: 50%; transform: translateY(-50%) - 右上角角标（如“new”）：
top: -6px; right: -6px; font-size: 10px，再配background和border-radius - 所有绝对定位都依赖父元素
position: relative，漏了就飘到页面顶部左侧
用 Unicode 还是字体图标？
看项目是否已引入字体库。没引入就别硬套 \f005，直接用 Unicode 更稳；已引入则优先用字体图标，缩放不失真、颜色可继承。
立即学习“前端免费学习笔记（深入）”；
- Unicode 示例：
content: "\2713"（✔）、"\2192"（→），注意要用反斜杠转义 - Font Awesome 示例：
content: "\f005"; font-family: "Font Awesome 6 Free"; font-weight: 900 - 用
currentColor替代写死颜色，图标自动跟随文字色，比如color: currentColor - 别在
content里写 HTML 实体（如✓），CSS 不识别，只认 Unicode 转义
真正难的不是加图标，而是当按钮高度随字体大小变化、或在移动端缩放时，图标还能保持垂直居中且不溢出——这时候 em 单位 + line-height + transform 的组合比固定像素更可靠，但调试成本会上升。
