How to add custom image background to span inside bootstrap button?

Question

I want to use custom icon as background image inside span for a bootstrap toggle button. Is it possible to achieve it without using fontawesome or glyphicons?

CSS:

.icon-search {
    background-image: url("https://dl.dropboxusercontent.com/u/23295105/search.png");
    background-repeat: no-repeat;
    background-position: center center;
}

HTML:

<button class="toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-search"></span>
</button>

Here's my fiddle: http://jsfiddle.net/ox04anfb/

Answer 1

Add this to your css

width: 20px; // replace with actual width
height: 20px; // replace with actual height
display: inline-block;

Answer 2

Try the solution of QED, but add the auto property:

width: auto; // replace with actual width
height: auto; // replace with actual height
display: inline-block;