伪元素::after必须设置content且不能为空；真要占位需用content: " "或visibility: hidden；图标字体需正确声明@font-face并转义unicode码点，如"\e900"。
必须设置 content 且不能为空字符串
不写 content，::after 就是无效的；写成 content: "" 也等同于没写，浏览器直接跳过渲染。真要“占位”又不显示内容，得用 content: " "（一个空格）或配合 visibility: hidden。
用 @font-face 加载图标字体后，content 只填对应字符
比如你用 IcoMoon 导出的字体中，“房子”图标编码是 \e900，那 CSS 里就得这样写：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.woff') format('woff');
}
.icon-home::after {
content: "\e900";
font-family: 'icomoon';
speak: none;
font-style: normal;
}
注意三点：
-
content里的 Unicode 必须加反斜杠转义，写成"\e900"，不是"e900"或"" -
font-family必须和@font-face中声明的一致，且需在伪元素上显式设置 - 加
speak: none和font-style: normal是为了兼容读屏器和避免斜体干扰
别依赖 content: attr() 拼图标——它不支持计算或拼接
content: attr(data-icon) 能读取 HTML 属性值，比如 <span data-icon=""></span>，但仅限原样输出，不能做 attr(data-icon) " (new)" 这类拼接，也不能用 calc() 动态算尺寸或偏移。
常见误用场景：
- 想根据
data-status值自动切换图标：不行，attr()不支持条件判断 - 想把图标和文字一起塞进
content：只能靠 HTML 属性里提前拼好，CSS 无法干预 - 误以为
attr(class)能读 class 名：不能，attr()只认自定义属性（如data-*）
图标显示异常？先查字体加载和码点是否匹配
Unicode 图标显示为方框、问号或空白，大概率不是 CSS 写错了，而是：
- 字体文件没加载成功（检查 Network 面板里
.woff是否 200） - HTML 页面编码不是
UTF-8（<meta charset="UTF-8">缺失） - 图标码点写错位数，比如该写
"\e900"却写了"\e90"（少一位） - 字体文件本身没包含这个码点（IcoMoon 导出时没勾选对应图标）
最稳的验证方式：打开 IcoMoon 的 demo.html，复制里面显示正常的字符，粘贴到你的 content 里测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
