17370845950

用 ::before 插入小图标需设 content（如""、Unicode或url）和 display（推荐 inline-block），字体图标要确保 @font-face 引入、font-family 指定及 Unicode 转义正确（如\e901），SVG 推荐用 background-image 替代 content: url() 以避免尺寸失控，IE8 需用 :before 单冒号并处理 z-index。

用 ::before 插入小图标需要设置 content 和 display

纯 CSS 的 ::before 伪元素默认不渲染，必须显式指定 content（哪怕只是空字符串），且推荐设为 display: inline-block 或 inline 才能稳定控制尺寸和对齐。常见错误是只写 content: "" 却忘了设宽高或背景，结果图标“看不见”。

• content 必须存在：可为 ""、"●"、"\e901"（字体图标 Unicode）或 url("icon.svg")
• 若用背景图，需设 width/height，否则 ::before 高度为 0
• 避免依赖 line-height 垂直居中——改用 transform: translateY(-50%) + top: 50% 更可靠

插入字体图标（如 Iconfont、Font Awesome）的关键三步

用字体图标最轻量，但容易卡在 Unicode 转义或字体未加载。核心是确保字体文件已引入、类名/Unicode 正确、且 ::before 继承了字体族。

• 确认字体已全局声明，例如：

  @font-face {
    font-family: "iconfont";
    src: url("//at.alicdn.com/t/c/font_XXX.woff2") format("woff2");
  }

• 在 ::before 中指定字体和 Unicode：

  .item::before {
    font-family: "iconfont" !important;
    content: "\e901"; /* 注意 \e901 是十六进制 Unicode，不能写成 e901 */
    margin-right: 8px;
  }

• 禁用用户选中图标文字：-webkit-user-select: none; -moz-user-select: none; user-select: none;

用 url() 引入 SVG 图标时的尺寸陷阱

直接 content: url("check.svg") 看似简单，但 SVG 尺寸常失控：它默认按原始 viewBox 缩放，且不响应父元素 font-size。必须手动约束。

• width 和 height 必须显式设置，否则可能撑满整行
• 优先用 background-image 替代 content: url()，更易控制缩放：

  .btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("success.svg") no-repeat center / contain;
    margin-right: 6px;
  }

• 若坚持用 content: url()，SVG 文件本身应尽量精简 viewBox，并避免内联 width/height 属性

IE 兼容性与伪元素层级问题

::before 在 IE8+ 支持，但 IE8 只认单冒号 :before；更麻烦的是，它默认渲染在元素内容「之下」（z-index 为负），导致图标被遮挡。

• IE8 兼容写法：.icon:before { ... }（不用双冒号）
• 确保图标显示在文字上方：position: relative; 给父元素，再给 ::before 加 position: absolute; 和 z-index: 1;
• 不要对 ::before 使用 transition 动画后加 display: none —— 这会中断动画；改用 opacity: 0 + visibility: hidden

实际项目里，最常被忽略的是字体图标加载延迟导致的“闪动”，以及 SVG content: url() 在 Safari 下的尺寸抖动。建议优先用 background-image 方式，可控性高，兼容性好。