A look at Font Awesome’s Pseudo Elements

Creative Director

Date

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="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" 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:

HTML:

<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>
</ul>

take a look at my .scss syntax:

ul.fontawesome {
  list-style: none;
    li {
        position:relative;
        font-size: 26px;
        line-height:2.5;
    }
    li:before {
        position:absolute;
        color: tomato;
        left: -30px;       
        font-family: "FontAwesome";
    }    
    .search:before {
//you can reference all the unicodes (f002) for each font at http://fontawesome.io/icons/
        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 🙂