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 🙂

Originally published on

Leave a Reply

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

Have Any Questions?

Speak with a
Digital Expert

  • Looking to increase leads?
  • Maximize profits?
  • Redesign your website?
  • Sell Online?
  • Build an App?

Let's Discuss Your Next Project

  • This field is for validation purposes and should be left unchanged.