html - 带填充的背景图像位置

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;

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