使用背景图覆盖 Font Awesome 图标

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;
}

- Slasher

---

为什么不将其设置为inline-block，给其添加1像素的边框，并增加边框半径直到它变成圆形呢？ - Royal Wares

我已经尝试过了，但仍然无法更改字体的粗细，使其像那张图片一样纤细。 - Slasher

Answer 1

您需要这些额外的属性

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

正如评论中@Alexander De Sousa提到的，inline-block是保持所有内容内联的更好选择。

- Waqar

---

或许值得注意的是，对于未来发现此问题的人们，display:block将占据整个宽度，因此它不会像“字符”一样表现，这可能解决OP的特定问题，但没有这种澄清可能会使未来的人们感到困惑。 - Royal Wares

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/

- K K

---

请使用 Stack Snippets。 - Bram Vanroy

Answer 3

display:inline-block;

这就是你需要的全部。标准情况下，:before和:after是内联的，因此无论高度和宽度如何，它们都会折叠。使用inline-block可以得到你想要的效果。

- Royal Wares