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";

5 thoughts on “How to use Font Awesome Icons in CSS

  1. 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.

Leave a Reply