CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3glyphicons
DovesandChicks
DovesandChicks

Reputation: 388

Add Glyphicon to Every Button (bootstrap 3.5)

I'd like to add a glyphicon after the text on all my default buttons.

I found how to include the glyphicon in lists here: Using a Glyphicon as an LI bullet point

I tried applying this to buttons, but I haven't got it right

.btn-default button:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #0099FF;
}

I realise I can add it like this:

<a class="btn btn-default" href="testpage.aspx">
    Learn more
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

But I'd prefer not to have to add it each time. I'd also like to set the colour.

Upvotes: 1

Views: 460

Answers (2)

nimish
nimish

Reputation: 167

Button Style with Gylph-icons

I thing you might wants above image Output for your all the buttons.

For that you need to just write simple css :after class css to apply on all default buttons after text:

.btn-default:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    vertical-align: middle;
    padding: 6px 5px;
    color: #0099FF;
}

this will work for your all buttons as shown in image.

Upvotes: 1

Juan
Juan

Reputation: 5589

I understand that this is the correct way of doing it: 

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

To give it a different colour just add a class or reference the span by using a selector and give the colour in css.

.color-red { 
    color:#FF0000;
}

Upvotes: 0

Related Questions