How To Use Font Awesome as Background Image

I am assuming that you know CSS Basic. We usually use something like the DIV element below to show a background image.

#content h2 {
   background: url(../images/tContent.jpg) no-repeat;
}

But if you would like to replace the image with an icon from Font Awesome. This is what you need to do.

div.fontawesomebg {
position:relative;
} 
   
div.fontawesomebg:before {
position:absolute;
font-family: FontAwesome;
font-size: 48px;
color: #563d7c;
top:0;
left:0;
margin-right: 5px;
content: "\f10b"; 
}

You can change the icon cheatsheet code (f10b)available at http://fontawesome.io/cheatsheet/ to have any icon of your choice.