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";
}
Subscribe
Notify of

6 Comments
Oldest
Newest
Inline Feedbacks
View all comments
8 years ago

This is Good.
Thanks.

Ian Winstanley
6 years ago

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

Alehandro
6 years ago

thnx dude. thats what i wanted!

Passing Bystander
4 years ago

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.

4 years ago

Thanks ! it helps.