最常见原因是未设置content属性或其值为空，导致伪元素不渲染；必须显式写content: ""，且需配合font-family、font-weight及尺寸样式才能使字体图标正常显示。
为什么 ::before 插入图标后不显示
最常见原因是没设置 content，或者值为空字符串。CSS 伪元素必须有 content 才会渲染，哪怕只是 content: ""。另外，display 默认是 inline，如果父元素是 flex 或 grid，可能因尺寸为 0 而“看不见”——实际是存在但没宽高。
- 务必写
content: ""（不能省略，也不能写成content: none） - 图标用字体（如 Font Awesome）时，需确保
font-family正确且字体已加载 - 用 Unicode 字符（如
\e900）时，确认字体支持该码位，且未被浏览器转义 - 若用
background-image，要手动设width/height，否则尺寸为 0
用 ::before 插入 Font Awesome 图标要注意什么
Font Awesome 6+ 默认用 SVG 方式引入，直接在 ::before 里用 content 插 Unicode 已不推荐；但如果仍用 Web Font 版本（CDN 提供的 all.css），就得配对使用 font-family 和 Unicode。
- 加载 Web Font CSS 后，检查 DevTools 中 computed 样式，确认
font-family生效（通常是"Font Awesome 6 Free"） - 查图标对应的 Unicode：比如
fa-home是\f015，写成content: "\f015" - 加
font-weight: 900（Solid 图标）或400（Regular），否则可能显示为空心或乱码 - 避免用
fa-fw类名逻辑套到伪元素上——它依赖额外 DOM 元素，::before无法继承这类布局行为
::before 图标和文字之间间距怎么控制
默认是紧贴的，因为 ::before 是 inline 级伪元素。调整间距不能只靠 margin-left，要考虑父容器的 line-height、vertical-align 和是否换行。
- 首选
margin-inline-start: 8px（现代写法，兼容性好于margin-left在 RTL 场景） - 若图标上下偏移，加
vertical-align: middle或-0.125em微调 - 文字多行时，图标可能只出现在第一行开头：此时改用
display: inline-flex包裹图标 + 文字，或把::before设为display: inline-block并设vertical-align: top - 避免用
padding在伪元素上“撑空间”，容易引发基线错位
用 background-image 替代字体图标有什么利弊
适合需要精确控制尺寸、颜色不可变（如品牌色固定）、或字体图标加载失败兜底的场景。但会失去缩放平滑性和文本可访问性（screen reader 不读取 background）。
- 必须显式声明
width和height，否则伪元素尺寸为 0，图片不显示 - 用
background-size: contain保持比例，或100% 100%拉伸填满 - 推荐用
background-repeat: no-repeat和background-position: center避免偏移 - SVG 路径建议内联 base64 或用
url("data:image/svg+xml,...")，减少 HTTP 请求，但注意 URL 编码（&要写成&）
实际项目中，最易忽略的是 content 的强制存在性和字体图标的 font-weight 匹配。一个没写 content，另一个 font-weight 错了，图标就彻底消失，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
