CODEWITHSUNDEEP
csstwitter-bootstrapfont-awesome
shenku
shenku

Reputation: 12438

Add font-awesome icon to a series of buttons

I know I can specifically add a font awesome to a button like this:

<a href="#" class="btn btn-default">Some text <i class="fa fa-chevron-right"></i></a>

But is there a way I can create a CSS class so that the icon is automatically inserted for all buttons?

Upvotes: 8

Views: 27243

Answers (3)

Govind jha
Govind jha

Reputation: 400

The following CSS rules will target the .btn elements and then inject a :after pseudo element that will place the icon at the end of the button. Additional styling may be needed. Other options are to use JavaScript to inject the <i> element with needed classes.

.btn:after {
    font-family: 'FontAwesome';
    content: '\f044';
    padding-left: 5px;
    position: relative;
    font-size: 90%;
}

 .btn:after {
    font-family: 'FontAwesome';
    content: '\f044';
    padding-left: 5px;
    position: relative;
    top: 1px;
    font-size: 90%;
}

Upvotes: 2

Christina
Christina

Reputation: 34652

This is with Glyphicon and FontAwesome. Add your unicode (found in the CSS file) in the content and create a class name that is appropriate for your situation or just add it to the .btn or .btn-default, but change the css to reflect that:

FontAwesome: http://jsbin.com/seguf/2/edit *

Glyphicon: http://jsbin.com/seguf/1/edit

HTML

  <a href="#" class="btn btn-default btn-plus">Some text</a>

http://jsbin.com/seguf/2/edit

CSS

.btn-arrow:after {
    font-family: 'FontAwesome';
    content: '\f054';
    padding-left: 5px;
    position: relative;
    font-size: 90%;
}


.btn-plus:after {
    font-family: 'Glyphicons Halflings';
    content: '\2b';
    padding-left: 5px;
    position: relative;
    top: 1px;
    font-size: 90%;
}

Upvotes: 7

James Donnelly
James Donnelly

Reputation: 128791

You can achieve this in CSS with the :after pseudo-element:

End Result

Firstly, remove the i element from your a element, then give your a element a new class. I'm going to use "chevron-right":

<a href="#" class="btn btn-default chevron-right">Some text</a>

Now navigate to FontAwesome's Cheatsheet to find out the Unicode ID for the icon you're wishing to use. In here we'll find the following:

fa-chevron-right [&#xf054;]

This means that the Unicode ID of our icon (in hexadecimal) is f054.

Now we can go to our CSS file and add the following:

.chevron-right:after {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-left: 5px;
}

Note that I've replaced the &#x of &#xf054 with \ and dropped the semicolon completely.

Here's a JSFiddle demo showing both the HTML icon and the CSS icon in use together.

Upvotes: 5

Related Questions