如何为IcoMoon字体图标设置80%蓝色+20%白色的双色星形图标

嘿，我来帮你搞定这个双色星标的需求！针对IcoMoon字体图标，有两种简单靠谱的CSS方案，你可以根据自己的场景选：

方法一：背景渐变+文字裁剪（最简洁） #

因为IcoMoon图标本质是字体，所以我们可以利用CSS的文字裁剪特性，让渐变背景透过文字显示出来，刚好控制80%和20%的比例：

1. 先准备好你的图标元素（假设你用的是IcoMoon生成的星形图标Unicode）：

<span class="two-color-star">★</span>

2. 编写CSS样式：

.two-color-star {
  font-family: 'IcoMoon'; /* 替换成你实际的IcoMoon字体名称 */
  font-size: 48px; /* 按需调整图标大小 */
  /* 定义80%蓝色在上，20%白色在下的渐变 */
  background: linear-gradient(to bottom, #007bff 80%, #ffffff 20%);
  /* 把背景裁剪成文字的形状 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 让文字本身透明，露出背景渐变 */
  color: transparent;
}

如果想要横向分色（比如左80%蓝，右20%白），只需要把渐变方向改成to right就行。

方法二：伪元素叠加（更灵活可控） #

如果你需要对两个颜色层做更精细的调整（比如加阴影、动画），可以用伪元素叠加的方式：

1. HTML结构（用data-icon属性复用图标内容）：

<span class="two-color-star" data-icon="★"></span>

2. CSS样式：

.two-color-star {
  font-family: 'IcoMoon';
  font-size: 48px;
  color: #007bff; /* 底层是完整的蓝色星标 */
  position: relative;
  display: inline-block;
}

.two-color-star::after {
  content: attr(data-icon); /* 复用原图标，避免重复写Unicode */
  position: absolute;
  bottom: 0;
  left: 0;
  color: #ffffff; /* 上层是白色星标 */
  height: 20%; /* 只显示白色星标的底部20% */
  overflow: hidden; /* 隐藏超出的部分 */
}

这个方法的好处是，你可以单独给蓝色层或白色层加样式（比如text-shadow），甚至做hover动画。

小提示 #

• 确保你的IcoMoon星形图标是实心样式，如果是空心的，渐变效果可能不符合预期；
• 颜色值可以替换成你需要的蓝色（比如品牌蓝）和白色调；
• 测试时注意浏览器兼容性，background-clip: text在现代浏览器都支持，旧版Chrome需要加-webkit-前缀。

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