Add font-awesome icon to a series of buttons

Question

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?

Answer 1

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%;
}

Answer 2

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

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 []

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.