推荐用 summary::before 插入 iconfont 图标，需显式声明 font-family、font-size 和 display；微信 X5 内核需降级为 base64 PNG 或 SVG；summary 应设为 flex 布局并清除后续元素 margin-top。
details标签里不能直接用 iconfont 的 字符
图标字体（如 iconfont）依赖 Unicode 字符映射，而 <summary> 内部若直接写 ，多数浏览器会把它当普通文本渲染——但 Safari（≤15.6）、微信 X5 内核甚至不解析该字符，只留空白或方块。这不是字体没加载，是 <summary> 的渲染上下文对私有区字符支持不稳定。
更关键的是：<summary> 是语义化触发控件，不是纯展示容器。把图标当内容塞进去，会干扰屏幕阅读器对“标题+操作”的识别逻辑。
- ✅ 推荐做法：用
summary::before插入图标，字体设置独立于<summary>文本流 - ✅ 图标字体 CSS 必须显式声明
font-family: 'iconfont';到伪元素上，不能靠继承 - ❌ 避免在
<summary>里嵌套<i class="icon-down"></i>——<i>是行内元素，但部分旧版 Safari 会忽略其点击热区
用 summary::before 加载 iconfont 图标要补全三件事
仅写 content: '\e601'; 不够。iconfont 的私有字符必须配合正确的字体、编码和显示模式，否则 Safari 和 Edge 18- 会 fallback 到系统默认字体，显示为问号或方框。
- 必须设
font-family: 'iconfont' !important;（!important防止被浏览器 UA 样式覆盖） - 必须设
font-size（不能依赖父级，::before默认尺寸不可靠） - 必须设
display: inline-block;（确保图标能响应vertical-align和margin）
示例：
立即学习“前端免费学习笔记（深入）”；
summary::before {
content: '\e601';
font-family: 'iconfont' !important;
font-size: 14px;
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}展开时旋转图标？别用 transform: rotate(90deg) 直接转字符——某些字体渲染引擎会锯齿。改用两个不同 Unicode 字符更稳：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
summary::before { content: '\e601'; }
details[open] > summary::before { content: '\e602'; }微信内嵌浏览器（X5）里 iconfont 图标完全不显示怎么办
微信 Android（尤其 v8.0.4x 及更早）的 X5 内核不支持 ::before 中的 iconfont 字符，连 font-family 声明都无效。这不是样式问题，是内核层面禁用了私有区字体回退机制。
- ✅ 临时方案：降级为 SVG 内联图标（
<svg><use xlink:href="#icon-down"></use></svg>），X5 支持良好 - ✅ 更通用方案：检测 UA，对
Micromessenger环境改用 base64 编码的 PNG 小图作为background-image - ❌ 不要尝试用 JS 动态插入 iconfont
<link>—— X5 对 document.write 或 appendChild 的字体加载极不敏感
检测并切换的最小逻辑：
if (/MicroMessenger/i.test(navigator.userAgent)) {
document.documentElement.classList.add('in-wechat');
}然后 CSS 里：
.in-wechat summary::before {
content: '';
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center;
width: 14px; height: 14px;
background-size: contain;
}图标对齐错位、上下晃动是常见副作用
summary::before 插入图标后，经常发现文字突然上移或下跳，尤其在展开/收起瞬间。这不是动画问题，是 <summary> 默认 display: list-item 和原生 ::marker 共存导致的行盒重排。
- 必须重置
summary的 display：写summary { display: flex; align-items: center; }，避免行内布局抖动 - 不要只给
::before设vertical-align: middle，它对 flex 容器无效；应统一用align-items: center - 折叠区内容（
<details>后的内容）默认带margin-top，需手动清零，否则展开时页面会“弹一下”：details > *:not(summary) { margin-top: 0; }
真正稳定的结构只有这一种组合：flex 布局 + ::before 图标 + 展开态用 details[open] 切换 content 或 background，其余任何“省事写法”在 iOS Safari 或微信里大概率失效。
