Use Font Awesome Icons in CSS

To use font awesome using css follow below steps -

step 1 - Add Fonts of FontAwesome in CSS

/*Font Awesome Fonts*/
@font-face {
    font-family: 'FontAwesome';
    //in url add your folder path of FontAwsome Fonts
    src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}

Step - 2 Use below css to apply font on class element of HTML

.sorting_asc:after {
    content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    padding-left: 10px !important;
    vertical-align: middle;
}

And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.

You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/

  #content h2:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f007";
    }

I am bit late to the party. Just like to suggest another way.

  button.calendar::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    left: -4px;
    bottom: 4px;
    position: relative;
  }

position, left and bottom are used to align the icon.

Sometimes adding font-weight: 600 or above also helps.

No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/

<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
  <span style="
        background-color: navy;
        border-radius: 50%;
        font-size: .25em;
        display:block;
        position:absolute;
        text-align: center;
        line-height: 2em;
        top: -.5em;
        right: -.5em;
        width: 2em;
        height: 2em;
        border:solid 4px #fff;
        box-shadow:0px 0px 1px #000;
        color: #fff;
    ">17</span>
</i>

#content h2:before {
    content: "\f055";
    font-family: FontAwesome;
    left:0;
    position:absolute;
    top:0;
}

Example Link: https://codepen.io/bungeedesign/pen/XqeLQg

Get Icon code from: https://fontawesome.com/cheatsheet?from=io

Alternatively, if using Sass, one can "extend" FA icons to display them:

.mytextwithicon:before {
  @extend .fas, .fa-angle-double-right;

  @extend .mr-2; // using bootstrap to add a small gap
                 // between the icon and the text.
}

It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in. Here is my solution to have a "real" background effect :

https://i.stack.imgur.com/CFVjS.png

html :

<div id="bloc" class="bg_ico_outer" style="">
    <i class="fa fa-bookmark-o bg_ico"></i>
    <div class='bloc_inner'>
        <h2>test fontawesome as background</h2>
    </div>
</div>

css :

.bg_ico {
    position: absolute;
    top: 0px;
    right: -10px;
    font-size: 17em;
    color: green;
    transform: rotate(25deg);
}

.bg_ico_outer{position: relative; overflow: hidden;}

#bloc{
    height: 200px;
    width:200px;
    background: blue;
    margin:50px auto;
}
.bloc_inner{
    position: absolute;
}
h2{color: white;}

For this you just need to add content attribute and font-family attribute to the required element via :before or :after wherever applicable.

For example: I wanted to attach an attachment icon after all the a element inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::before pseudo property to fetch out the content tag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:

   .post a:after {
     font-family: FontAwesome,
     content: " \f0c6" /* I added a space before \ for better UI */
    }

Use the following Python program via command line to create png images from Font-Awesome icons:

https://github.com/Pythonity/font-awesome-to-png