核心是content写对、字体加载成功、伪元素可见：content须为字符串/Unicode转义/url()，如"\f00c"；font-family和font-weight须与@font-face声明完全一致；display需设inline-block等以确保渲染。
直接用 ::before + content 插图标，核心就三件事：内容得写对、字体得加载上、伪元素得能看见。其他都是围绕这三点打转。
content 里到底该写什么字符
只能是字符串、Unicode 转义或 url()，不能是 HTML 标签、类名或 SVG 路径。常见错误是把 Font Awesome 的 HTML 写法 <i class="fa-solid fa-check"></i> 搬进 content，结果只显示一串文字。
- 用系统 emoji：直接写
content: "✅"，但 iOS/Android 渲染不一致，且无法单独调色 - 用 Unicode 符号：查 unicode-table.com，写成
content: "\2705"（注意反斜杠后无空格，位数不足补零） - 用字体图标（如 Font Awesome）：必须查官方 CSS 文件，找
.fa-check::before { content: "\f00c"; }这类声明，提取引号内值；content: "\f00c"才对，content: "f00c"或content: "fa-check"都无效 - 用
url()引 SVG：content: url("icon.svg")，但颜色和大小无法用 CSS 控制，得改 SVG 源文件
font-family 和 font-weight 必须严丝合缝
图标不显示，八成卡在这儿。不是“差不多就行”，而是要跟 @font-face 声明里 font-family 的值完全一致，包括空格、大小写、连字符。
- Font Awesome 6 Free Solid 图标必须配
font-weight: 900；Regular 版本是400 - 如果用了多个字体回退，比如
font-family: "Font Awesome 6 Free", "Segoe UI Emoji", sans-serif，前面的必须加载成功，否则 fallback 到 emoji 就变样了 - 浏览器开发者工具里检查
::before元素的 computed 样式，确认font-family确实生效，且没有被覆盖成serif或sans-serif - 本地开发时若字体路径错、CORS 没配，控制台会报
Failed to decode downloaded font，图标必然空白
为什么 ::before 死活不渲染
content 是唯一强制属性，缺了它整个伪元素就不存在。但写了也不代表一定可见——默认 display: inline 在很多布局下等于“隐身”。
- 父元素是
flex或grid容器时，::before可能尺寸为 0，加display: inline-block并设width/height才稳 -
li默认有list-style，原生项目符号会遮挡或错位，必须显式写list-style: none -
content: ""仍会生成占位节点，可能撑开行高；真不需要内容又想留钩子，改用content: none - 父容器设了
overflow: hidden或position: relative但没给z-index，也可能让图标被裁掉或压在底层
图标位置偏、大小不对、颜色不生效
这些不是 content 的问题，而是伪元素样式没控住。别试图在 content 里调颜色或缩放。
- 调大小统一用
font-size（字体图标）或background-size（url()SVG），别动width/height—— 容易拉伸变形 - 对齐靠
vertical-align（inline/inline-block 场景）或position: absolute+top/left（需父元素position: relative） - 颜色直接设
color，但前提是字体支持彩色（如"Segoe UI Emoji"），普通图标字体只认单色 - 调试时临时加
background: pink到::before，一眼看出是否意外占位或定位跑偏
最常被忽略的是：伪元素内容默认不进可访问性树，屏幕阅读器读不到。如果图标承载语义（比如“警告”“成功”），不能只靠 ::before，得补 aria-label 或用真实标签包裹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
