最轻量兼容做法是用 background-image + padding-left：设 background-repeat: no-repeat、background-position: left center、background-size（如 16px 16px），padding-left ≥ 图标宽+间距，优先用内联 svg base64。
怎么用 background-image + padding-left 做左侧图标警告框
直接加 background-image 到提示框元素上，配合 padding-left 留出图标空间，是最轻量、兼容性最好的做法。不用额外标签，不触发重排，CSS 也干净。
- 图标用
background-image: url(...)或background-image: linear-gradient(...)都行，但优先选内联 SVG base64，避免请求 -
padding-left值必须 ≥ 图标宽度 + 间距（比如padding-left: 32px，其中图标宽 16px，右边留 16px 文字间隙） - 一定要设
background-repeat: no-repeat和background-position: left center，否则图标会平铺或偏上/下 - 如果文字多行，
background-position: left center能让图标始终垂直居中；用top或0会导致第二行文字顶到图标
为什么 background-position 设成 left center 比 left 5px 更可靠
因为 left 5px 是绝对偏移，而警告框字体大小、行高、内边距一变，图标就容易和文字错位。用 left center 是相对计算，浏览器自动对齐背景图和内容区的垂直中线，适配各种 font-size 和 line-height。
- 错误写法：
background-position: left 8px→ 换个主题字体大小后图标飘高了 - 正确写法：
background-position: left center→ 即使font-size从 14px 改成 18px，图标仍稳在文字中间 - 如果容器有
padding-top/bottom，要确认background-origin是padding-box（默认值），否则center会按 content-box 算，位置又偏了
遇到图标模糊或缩放变形怎么办
本质是背景图被拉伸了。CSS 默认把小图铺满整个背景区域，没指定尺寸时就会失真。
- 必须加
background-size: 16px 16px（按实际图标尺寸填），不能只写16px（那会等比缩放高度，可能压扁） - SVG 图标用 base64 时，确保原始 SVG 有明确
width/height属性，不然某些浏览器渲染模糊 - 别用 PNG 截图做图标——放大后锯齿明显；改用 inline SVG 或 font-icon（但 font-icon 在警告框里不如 background 稳定）
- 如果用了
background-size: contain，记得搭配background-repeat: no-repeat，否则可能意外重复
要不要用伪元素 ::before 替代 background-image
可以，但没必要。除非你需要图标响应 hover、或动态换色（比如用 currentColor）、或做 CSS 动画。
立即学习“前端免费学习笔记（深入）”；
- 纯静态警告图标，
background-image更省 DOM、更少样式干扰、更易维护 - 用
::before要额外设content: ""、display: inline-block、vertical-align: middle，还容易和文字 baseline 对不齐 - 如果真要用伪元素，图标颜色建议用
color: currentColor，这样继承父级文字色，换主题不用改 CSS - 注意：伪元素默认插入在内容最前，若警告框里有
svg或img标签，顺序可能错乱；background-image则完全不参与文档流
