CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
QED
QED

Reputation: 77

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

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/

Upvotes: 3

Views: 8542

Answers (2)

Alex Ardavin
Alex Ardavin

Reputation: 345

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;

Upvotes: 1

madcow
madcow

Reputation: 2633

Add this to your css

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

Upvotes: 6

Related Questions