FontAwesome SVG箭头图片底部被裁剪，请问原因是什么？

嗨，这个问题我之前也碰到过，你遇到的底部裁剪情况主要有两个原因：

• 首先，FontAwesome的SVG图标都带有固定的viewBox比例（比如大部分solid图标是0 0 24 24的正方形比例，但也有少数图标比例不是严格1:1），你用background-size: 100%时，是强制让图标宽度填满50px的容器，但高度会按SVG的原始比例自动计算。如果计算出的高度超过容器的固定50px，底部的图形自然就会被容器截断。
• 其次，FontAwesome为了保证图标的视觉平衡，会在viewBox内预留少量留白，当你强制拉伸宽度适配容器时，这些留白加上图形本身的高度可能会超出容器高度，导致底部的箭头部分被裁剪。

最快的修复方案 #

把background-size的值从100%改成contain，这个属性会自动保持SVG的原始宽高比，让整个图标完整显示在容器里，不会出现裁剪：

.alpha {
  width: 50px;
  height: 50px;
  left: 0%;
  background: url('./arrow-right-solid.svg') 0 0 / contain no-repeat;
}

如果你希望图标填满容器 #

要是你想让图标完全占满50x50的容器（允许轻微拉伸），同时保证箭头不被裁剪，可以搭配cover和居中定位：

.alpha {
  width: 50px;
  height: 50px;
  left: 0%;
  background: url('./arrow-right-solid.svg') center / cover no-repeat;
}

再补充点原理帮你理解 #

• background-size: 100%：只约束宽度为容器的100%，高度按SVG原始比例自适应。如果自适应后的高度超过容器高度，超出部分就会被容器隐藏。
• background-size: contain：优先保证整个SVG完整显示，会自动调整尺寸适配容器的最小边，可能会在容器的某一侧留下空白，但图标不会被裁剪。
• background-size: cover：会让SVG填满整个容器，可能会裁剪图标边缘，但用center定位后，图标核心部分（比如箭头）会保持在容器中间，不会被裁掉。

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