twitter bootstrap custom carousel indicators

Question

I want to change the carousel indicators with something like this:

I ha

Answer 1

You could use media query -

@media screen and (max-width:480px) {
     .carousel-indicators li{
        background: url(images/triangle.png) no-repeat;
        background-size:120px 60px;
        width:120px;
        height:60px;
        cursor: pointer;
        text-align:center;
    }

Answer 2

It's collapsing because the width of your carousel-indicator is 320px. You can't have fixed with if you also want your code to be responsive on mobile. You can substitute percentage rather than using a fixed width

.carousel-indicators li{
    background: url(images/triangle.png) no-repeat;
    max-width:25%;
    max-height:15%; /*or any other percentage that would look good*/
    cursor: pointer;
    text-align:center;
}

Note that I used max-height and max-height so that I could keep the proportion of the image so it doesn't get stretched out in either direction.