根本原因是::before默认为display: inline，受line-height、vertical-align及字体度量影响；需配display: inline-block或absolute+transform对齐，并在flex容器中加flex-shrink: 0防压缩。
为什么::before图标总和文本错位？
根本原因不是样式写得不够多，而是没理清伪元素的“行内流身份”——::before默认是display: inline，它和紧随其后的文本共享同一行内格式化上下文（IFC），受line-height、vertical-align、字体度量、甚至父容器flex行为共同影响。常见表现：图标上浮、下沉、被截断、或换行后偏移。
vertical-align: middle为什么经常失效？
它只对inline和inline-block元素起作用，但“middle”的基准是父容器的line-height中线，而不同字体的x-height、ascender高度差异大，尤其混用中文字体和图标字体时，视觉上根本不对齐。
- 别依赖
vertical-align: middle单独生效；必须配合display: inline-block（否则宽高、margin不生效） - 更可靠的做法是改用
transform: translateY(-50%)+top: 50%，但前提是父元素设position: relative且伪元素为position: absolute - 若用
inline-block布局，确保父元素font-size和line-height稳定，避免继承干扰
多行文本下图标被压缩或消失怎么办？
当li或div用了display: flex，::before会被浏览器当作匿名flex子项参与布局，默认flex-shrink: 1，空间不足时就被压扁甚至宽度归零。
- 显式给
::before加flex-shrink: 0，锁定其尺寸 - 同时设
width和height（比如1.125rem），避免依赖内容撑开 - 若用
background-image而非content: url()，记得配background-size: contain和background-repeat: no-repeat
字体图标对齐失败的三个硬性条件
用Font Awesome这类字体图标时，缺一不可：
-
content里的Unicode必须转义，比如"\f005"，不能写"f005"或"" -
font-family值必须和@font-face定义的完全一致（大小写、空格、引号），例如"Font Awesome 5 Free" -
font-weight要匹配图标的字重，Solid图标通常需900，Brands图标可能是400
漏掉任意一个，图标就显示成方块或空白——这不是bug，是字体加载链断裂的必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
