Skip To Content

A look at Font Awesome’s Pseudo Elements


Kevin Doherty Creative Director

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:


OR how about a Button?


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


Your email address will not be published. Required fields are marked *

Request a Quote

If you’re ready to change the trajectory of your business and
excited to partner with the right team to get the job done.


© 2024 NVISION. All Rights Reserved.