Override Font Awesome icon whit background image

Question

I'm trying to override/replace Font Awesome icon with background image. I have only CSS access.

What I have:

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

What I'm trying to achieve:

.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

You need these additional properties

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

as mentioned by @Alexander De Sousa in comments, inline-block is much better choice to keep everything inline.

Answer 2

Try this

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

Demo : http://jsfiddle.net/GCu2D/5181/

Answer 3

display:inline-block;

That's all you need. As standard :before and :after are inline, so they'll collapse in regardless of height and width. Inline-block will get you what you want.