content属性必须显式设置，否则::before伪元素完全不渲染；常见错误包括遗漏content、误用content:none或html实体；正确写法为content:"\f00c"，并确保font-family和font-weight匹配font awesome要求。
content 属性必须显式设置，否则图标根本不会出现
浏览器对 ::before 的渲染极其严格：没写 content，哪怕你写了 color、font-size、background 全都无效。它不是“默认空内容”，而是直接跳过整个伪元素。
常见错误包括：
- 复制别人代码时漏掉
content: ""或content: "\f00c" - 误写成
content: none（这会彻底禁用伪元素） - 用 HTML 实体如
×—— CSS 不解析实体，只能用 Unicode 转义或字面字符
正确写法示例：
.btn::before {<br> content: "\f00c"; /* Font Awesome check 图标 */<br>}
用 Font Awesome 字体图标时，font-family 和 font-weight 必须完全匹配
图标显示为空白方块？大概率是字体没加载完，或名字/权重对不上。Font Awesome 6 Free 的 solid 图标要求 font-family: "Font Awesome 6 Free" + font-weight: 900；regular 图标则用 font-weight: 400。
关键点：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 检查开发者工具的 Computed 面板，确认
font-family最终生效值和 @font-face 定义一致（注意引号、空格、版本号） - 不要写
content: "\uf00c"—— 标准写法是"\f00c"（不带u） - IE11 及更早不支持
font-display: swap，建议用font-display: block防止闪白
图标定位错位？先看父元素有没有 position: relative
想用 position: absolute 把图标钉在按钮左上角或右侧？必须给按钮本身加 position: relative，否则 ::before 会相对于最近的已定位祖先定位，结果飘到页面任意位置。
另外两个高频陷阱：
-
::before默认是display: inline，受line-height和vertical-align影响，导致图标上下偏移 —— 改成display: inline-block+vertical-align: middle更稳 - 用
margin-left控制图标与文字间距？换字体或字号后立刻错位 —— 改用padding-left在按钮上留白，再把图标绝对定位进去
需要多色、响应缩放或防白屏？改用 background-image
字体图标在加载失败时显示方框，SVG 图标又难统一颜色。这时用 background-image 更可控：
- 必须保留
content: ""—— 否则伪元素盒模型不创建，背景无处渲染 - 推荐内联 base64 SVG：
background: url("data:image/svg+xml,%3Csvg%3E...%3C/svg%3E") no-repeat，避免额外请求 - 记得设
width/height和background-size: contain，否则 SVG 可能被拉伸或裁剪 - base64 中的
/、+、=要 URL 编码，别手写 —— 用在线工具生成
真正麻烦的不是怎么写，而是字体加载时机、父容器 visibility 状态、以及屏幕阅读器看不见这个图标 —— 如果它是“必填”“错误”这类语义标识，就得用真实 <span></span> + aria-hidden="true" 补全可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
