Skip To Content

A look at Font Awesome’s Pseudo Elements

Kevin Doherty

Creative Director


Jan. 30, 2014

This is a quick and easy tip. At nvision, we’re pretty big fans of the amazing font icon library font awesome. Vector-based font icons are a key asset in any front-end developers arsenal nowadays.

On Font Awesome’s website, they will ask you to include the library in your project, which you can do in a few ways. I suggest just using their CDN for a quick and easy integration by putting this in the <head> of your document.

<link href="//" rel="stylesheet">

To render an icon from their library, you typically would do something like:

<i class="fa fa-rocket fa-5x"></i>

which would show as:

Thats all fine and dandy but what if you want to use one of their icons as a bullet on a list? or use their link icon beside an anchor?, or use their social icons beside the url’s of their accounts?

the simplest and easiest approach is to use either a :before or :after pseudo CSS class and call your icon via CSS (or SCSS in our case).

take this list for example:


<ul class="fontawesome">
	<li class="search">Search</li>
	<li class="link">Link</li>
	<li class="facebook">Facebook</li>
	<li class="right-arrow">Right Arrow</li>

take a look at my .scss syntax:

ul.fontawesome {
  list-style: none;
    li {
        font-size: 26px;
    li:before {
        color: tomato;
        left: -30px;       
        font-family: "FontAwesome";
    .search:before {
//you can reference all the unicodes (f002) for each font at
        content: "f002";
    .link:before {
        content: "f0c1";
    .facebook:before {
        content: "f09a";
    .right-arrow:before {
        content: "f0a9";

 would render like:

[codepen_embed height=”330″ theme_id=”1″ slug_hash=”gHufG” default_tab=”result”][/codepen_embed]

OR how about a Button?

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”vueyh” default_tab=”result”][/codepen_embed]

The examples on this page use SASS (.scss syntax) with the compass framework 🙂

Book with us

Let’s accomplish what you are looking for, our team of experts are here for you.

Let's work together

Warning: Working with our team may result in excessive creativity, uncontrollable 'aha' moments, and an addiction to perfect pixels. Please proceed with caution.