如何用CSS实现随字号缩放的双背景自定义字体图标？

核心问题是你当前用了固定的rem数值（比如5rem、1.25rem），这些值不会随父元素的font-size变化。要实现自适应缩放，关键是使用相对单位em，因为em会基于当前元素继承的font-size计算尺寸，完美匹配字体图标的缩放需求。

修改后的完整SCSS代码 #

// 基础图标样式
.aw-#{$app_name}:before {
  content: $app_code;
  display: inline-block;
  font-size: inherit; // 继承父元素字号，确保图标随外部字号缩放
}

// 带圆角背景的图标
.aw-#{$app_name}-app:before {
  content: $app_code;
  position: relative;
  display: inline-block;
  padding: 0.25em; // 内边距用em，随字号同步缩放
  border-radius: 0.25em 0.25em 0.25em 0; // 圆角用em，保持比例
  background-color: #222; // 第一层前景背景
  color: #fff; // 图标颜色，按需调整
  z-index: 2; // 确保图标在倾斜背景上层
}

// 倾斜的第二层背景容器
.bg-app-black {
  position: relative;
  display: inline-block; // 容器自适应图标尺寸
  font-size: inherit; // 继承外部字号
}

.bg-app-black:before {
  content: "";
  position: absolute;
  top: 0.1em; // 偏移量用em，保持相对比例
  left: -0.1em;
  width: 100%; // 和图标容器同宽，确保尺寸匹配
  height: 100%; // 和图标容器同高
  border-radius: 0.25em;
  background-color: #000; // 第二层倾斜背景色
  transform: rotate(-20deg);
  z-index: 1; // 放在图标下方
}

简化后的HTML结构 #

<i class="aw-actions-app bg-app-black"></i>

关键调整说明 #

1. 单位替换：把所有固定rem值换成em，让尺寸、偏移、圆角都随font-size按比例变化。比如你原来的1.25rem圆角，换成0.25em后，当font-size为16px时对应4px，font-size为32px时自动变成8px，保持比例一致。
2. 层级控制：用z-index明确图标和倾斜背景的堆叠顺序，避免背景覆盖图标。
3. 自适应容器：给容器设置display: inline-block，让它自动匹配图标的尺寸，不需要硬写固定宽高。
4. 继承字号：所有元素都设置font-size: inherit，确保图标和背景都继承父元素的字号，实现全局缩放。

额外优化建议 #

如果需要支持多种颜色的倾斜背景，可以把背景样式抽成SCSS混合宏，复用更方便：

@mixin app-bg($color: #000, $offset: 0.1em) {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: $offset;
    left: -$offset;
    width: 100%;
    height: 100%;
    border-radius: 0.25em;
    background-color: $color;
    transform: rotate(-20deg);
    z-index: 1;
  }
}

// 使用时直接调用
.bg-app-black {
  @include app-bg(#000);
}
.bg-app-red {
  @include app-bg(#ff3333);
}

内容的提问来源于stack exchange，提问作者Brandon Hubbard