覆盖字体真棒图标白色背景图像

Question

我正在尝试用背景图像覆盖/替换Font Awesome图标。 我只有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是内联的，因此无论高度和宽度如何，它们都会崩溃。 内联块将为您提供所需的内容。