如何仅让Font Awesome字体图标内部区域显示设置的背景色？

问题根因 #

你遇到的背景溢出问题本质不是padding导致的：Font Awesome的图标本质是特殊字体渲染在<i>元素上，你给.voteup设置的背景色默认是作用在整个<i>元素的矩形区域上，而<i>元素默认的行高、基础尺寸会比实际的图标字形大，所以才会出现背景显示在图标外的情况，设置padding: none自然不会生效。

可选方案 #

方案1：直接修改图标本身颜色（最常用） #

如果你想要调整向上箭头本身的显示颜色，不需要使用background-color，直接修改color属性即可，Font Awesome图标作为字体资源，color属性直接控制图标线条/填充的显示颜色：

.voteup {
  color: red;
}

该方案完全不会产生额外的外部背景，适配绝大多数投票按钮的使用需求。

方案2：背景仅显示在图标字形内部 #

如果你需要给图标填充特殊背景（比如渐变色、背景图案），或者你使用的是空心线框风格的图标、想要填充线框内部的区域，可以使用background-clip属性限制背景的显示范围：

.voteup {
  background: red; /* 此处可替换为渐变、背景图等任意背景配置 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

方案3：调整元素尺寸适配图标大小 #

如果你确实需要给<i>元素添加矩形背景、但不希望背景范围超过图标大小，可以调整元素的行高和宽高，让元素尺寸刚好贴合图标字形：

.voteup {
  background-color: red;
  line-height: 1;
  width: fit-content;
  height: fit-content;
}

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