覆盖字体真棒图标惠特背景图像

Question

我正在尝试使用背景图片替换/替换“超赞字体”图标。我只有CSS访问权限。

我所拥有的：

.btn.btn-default.bootstrap-touchspin-up:before {
    font-family: Fontawesome;
    content: "\f067";
    font-size: 14px;
}

我要实现的目标：

.btn.btn-default.bootstrap-touchspin-up:before {
    background-image : url(Images/arrows-left-right.png);
    font-family: initial;
    content: "";
    font-size: 14px;
    height: 20px;
    width: 20px;
}

Answer 1

您需要这些附加属性

  width: 15px;
  height: 15px;
  display: inline-block; 
  background-position: center;
  background-size: contain;

正如@Alexander De Sousa在评论中提到的那样，内联块是使所有内容保持内联的更好选择。

Answer 2

尝试一下

HTML：

    <span class="btn btn-default"></span>

CSS：

.btn:before {
  font-family: Fontawesome;
  content: "\f067";
  font-size: 14px;
}

.btn {
  border-radius: 50%;
  border: 2px solid black;
}

演示：http://jsfiddle.net/GCu2D/5181/

Answer 3

display:inline-block;

这就是您所需要的。按照标准，：before和：after是内联的，因此无论高度和宽度如何，它们都将折叠。内联阻止功能将为您提供所需的东西。