最常见原因是未设置content属性（如content: ""）或未声明display: inline-block/block，导致伪元素不渲染；此外父元素list-style、Unicode转义错误、font-family不匹配、图标字号未适配等也会导致图标不可见。
为什么
加
无法显示图标
最常见原因是没给
设置
（或
），或者忘了设
值——哪怕只是空字符串
，缺了它
伪元素
就完全不渲染。
另外，如果父元素是
或
且用了默认的
，图标可能被原生项目符号遮挡或错位。
必须显式写
（哪怕不用内容）
推荐加
，方便控制宽高、对齐和定位
把
的原生符号关掉：
图标位置靠左时，用
配合
+
更稳，但需确保
有
用 Unicode 字符做图标时，
怎么写
Unicode 字符要写成十六进制转义形式，比如 ✅ 是 U+2705，就得写成
（注意：反斜杠后不能有空格，位数不足补零，如
不是
）。
别直接粘贴 emoji 到 CSS 里——不同系统/字体渲染不一致，还可能被压缩工具删掉。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
查 Unicode 码位推荐用
unicode-table.com
写法示例：
（✅）、
（?）
配合
提升兼容性
字号建议设为
，避免撑开行高
用字体图标（如 Font Awesome）时，
和
怎么配
Font Awesome 6+ 默认用 SVG，但若你仍用 Web Font 版本（
），就得靠
+
+
组合触发图标。
关键不是图标名字，而是它的私有 Unicode 码点。比如
对应
，这个必须查官方 CSS 文件或文档确认，不能凭印象写。
引入字体 CSS 后，检查浏览器开发者工具里
是否加载了正确字体
必须严格匹配字体定义的码点，例如：
要写全名，如：
（注意空格和大小写）
Free 版需额外加
（solid 图标），
是 regular
图标和文字之间间距不均匀？用
还是
用
。因为伪元素是行内级，
在水平方向有效，但垂直方向 padding 不影响行高；而
可稳定控制图标与文字的距离，且不会干扰
计算。
如果图标用了
，那就改用
值来调节横向偏移，此时
失效，但能彻底脱离文档流，避免换行错位。
推荐组合：
绝对定位场景：
避免用
或负
推文字——易引发 RTL（从右向左）布局问题
实际中最容易被忽略的是：伪元素默认继承父级
，但图标字体往往需要更小字号来对齐，而很多人只调了
却忘了同步调
或用
微调视觉居中。
::beforecontent::beforedisplay: inline-blockblockcontentcontent: ""ullilist-stylecontent: ""display: inline-blocklilist-style: noneposition: absolutelefttopliposition: relativecontent\2705\e900\e90content: "\2705";content: "\1F4C1";font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;font-size: 0.85emcontentfont-familyfa-solid.css::beforecontentfont-familyfa-check\f00c::beforecontentcontent: "\f00c";font-familyfont-family: "Font Awesome 6 Free";font-weight: 900400marginpaddingmarginpaddingmargin-rightline-heightposition: absoluteleftmargindisplay: inline-block; margin-right: 8px;position: absolute; left: -20px; top: 50%; transform: translateY(-50%);text-indentmargin-leftfont-sizefont-sizeline-heighttransform: scale()