带填充的背景图像位置

Question

我有一个图标设置为背景，如下所示：

正如你所看到的，箭头后面必须有填充才能有很好的空间。我该如何解决这个问题？

HTML

<span class="arrowIcon">Newsletter Sign up</span>

CSS

.arrowIcon{
  background-image:url(../img/arrow.png);
  background-position:right center;
  background-repeat:no-repeat;
  background-color:#5379A5;
  padding:10px;
  color:#FFFFFF;
  float:right;
  width:55%;
}

Answer 1

您可以通过在 css 中编写此内容来从右侧定位背景图像。

background-position: right 10px center;

我认为这是最干净的解决方案。