CODEWITHSUNDEEP
twitter-bootstrap
t0xic
t0xic

Reputation: 131

Making Bootstrap button with an image

I need to make a button that is an image so that when you click on it, it will do what the button is supposed to do. I'm making a carousel and trying to change the left and right buttons if you were wondering what I needed it for. At the bottom is the code I am trying to change. Instead of glyphicons I need it to be my own images.

</div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

Upvotes: 2

Views: 12305

Answers (1)

cscott
cscott

Reputation: 286

Within both the left and right controls, replace these lines of code:

<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>

with:

<img class="img-responsive center-block" src="./path/to/image.jpg" alt="Your Alt Text">

Without seeing the code in action, it's difficult to say, but you may need to resize your images—or the CSS that governs the size of the carousel controls—to make your switch display correctly. It shouldn't require too much tweaking, though.

Upvotes: 3

Related Questions