30Mar

How to use Font Awesome Icons in CSS

Here is a simple quick way to use icons from Font Awesome as a “background-image” using CSS.

You need to get the code of the symbol of Font Awesome. The easiest way is to use your browser inspector on the the icon you want to use and copy the code, in my example it’s the little star icon using the code “\f005”.

Add “position: relative;” to your container and use the :before (or :after) property to call your symbole.

.btn {
  padding-left: 32px;
  position: relative;
}
.btn:before {
  position: absolute;
  font-family: 'FontAwesome';
  top: 0;
  left: 10px;
  content: "\f005";
}

6
Leave a Reply

5 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
  Subscribe  
newest oldest
Notify of

This is Good.
Thanks.

Ian Winstanley

Great thank solved my problem adding a Font Awesome editable icon to a contenteditable div

Alehandro

thnx dude. thats what i wanted!

Passing Bystander

Just thought I’d leave a little message to point out that where you have used the classname of .btn that isn’t an actual input type=”button” but another HTML element as you cannot set the :before (or :after) of input elements.

Thanks ! it helps.