content属性必须写Unicode字符（如"e900"），不能写类名、SVG或图片URL；需确保font-family精确匹配且字体已加载，display设为inline-block等可见值。
content属性里该写什么才能显示字体图标
直接写 Unicode 字符是唯一可靠方式，比如 content: "e900"。不能写类名（如 "icon-home"），也不能写 SVG 路径或图片 URL——::before 的 content 不解析 HTML 或 CSS 类，只渲染纯文本或指定字符。
常见错误是复制了字体图标库文档里的 HTML 写法（如 <i class="icon-home"></i>），然后误以为把 class 塞进 content 就能生效。它不会触发任何样式计算，只会原样输出字符串。
- 查图标对应 Unicode：打开字体图标库的 CSS 文件或官网“图标详情页”，找类似
.icon-home::before { content: "e900"; }这样的声明，提取引号内的十六进制值 - 确保字体已加载并正确声明：
font-family必须与图标字体一致（如"icon-font"），且该字体已通过@font-face引入 - Unicode 前必须加反斜杠和小写
x或直接用四位/五位 Unicode 转义："e900"✅，"e900"❌，"ue900"（带u）在部分浏览器中不兼容
为什么图标没显示？检查这三处关键配置
最常卡在字体未生效、伪元素不可见、或字符被拦截。不是代码写错，而是上下文缺失。
-
display必须设为inline、inline-block或block：默认::before是inline，但若父元素是flex或grid容器，可能因尺寸为 0 而不可见；加display: inline-block; width: 1em; height: 1em;更稳妥 -
font-family必须精确匹配@font-face中的font-family值（区分大小写和空格），且需放在content后面声明，否则字体回退到系统默认，Unicode 变成方框或问号 - 检查浏览器控制台是否报
Failed to decode downloaded font或CORS错误：本地开发时字体路径错误、线上跨域未配Access-Control-Allow-Origin都会导致字体加载失败，图标自然空白
用 ::before 插图标比直接写 <i> 标签有什么实际差别
核心区别在于语义剥离与样式解耦。用伪元素，HTML 里不残留无意义的 <i> 或 <span>，图标完全由 CSS 控制，适合状态化场景（如按钮 hover 时换图标）。
立即学习“前端免费学习笔记（深入）”；
- 可动态切换：配合 CSS 自定义属性，
content: var(--icon-close);，JS 只需改element.style.setProperty('--icon-close', '"\e902"');，无需操作 DOM - 避免重复渲染：多个相同图标不用重复写
<i class="icon-x"></i>，维护一套 CSS 规则即可批量更新 - 注意副作用：伪元素无法被屏幕阅读器读取（除非加
aria-hidden="true"显式声明），如果图标有功能含义（如“删除”按钮），必须额外用aria-label补充语义，否则无障碍失效
兼容性与性能上容易被忽略的细节
IE11 支持 ::before 和 content，但对 Unicode 转义的容错极低——"e900" 可以，"ue900" 或漏掉反斜杠直接写 "e900" 就挂。现代项目虽可忽略 IE，但某些内网系统仍需兜底。
- 字体文件体积影响首屏：图标字体通常是整包引入，哪怕只用 2 个图标，也要加载几 KB 的 WOFF2。如项目图标少且固定，考虑改用内联 SVG 或 CSS
mask+ 背景色方案 - 字符渲染有平台差异：同一 Unicode 在 Windows 和 macOS 上可能字重/间距不同，用
font-feature-settings: "liga"或text-rendering: optimizeLegibility有时能缓解，但不保证一致 - 不要在
content里拼接变量（如content: "×" attr(data-icon)）来“动态”图标——attr() 只读 HTML 属性，且不支持转义，data-icon="e900"会被当普通字符串输出，不是图标
