css 元素前面加小图标怎么做_通过 before 伪元素插入内容_技术教程

用 ::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