How to Style a List with Font Awesome Icons

So we already know how to create really cool pure CSS social media icons using Font Awesome, but what else can we do with this awesome icon library? One really cool way to utilize the icons is by using them in place of bullets when styling unordered lists.

Font Awesome is a library of hundreds of different icons and symbols that can be used for free by developers in any project. It’s a really useful tool to have, especially because using Font Awesome icons are almost always superior to using pngs or jpegs as icons because of how well the Font Awesome characters (color, size, etc) can be manipulated by CSS.

Using the Font Awesome icons in place of bullets or discs that are usually used to style unordered lists is a really cool way to add some unique flair to an otherwise boring list, and it’s also a pretty innovative way to use the Font Awesome library. Keep reading to see how it’s done.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

Getting Font Awesome

Like most libraries, Font Awesome can be downloaded and placed onto your server, but the best and most lightweight way to use it is probably to link to the library directly, either in your head section or at the top of your stylesheets using the @import rule. Here’s the link you can insert into the head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

We’re gonna start by creating a standard unordered list. If you’re not sure how to build one, check out the HTML below:

<ul>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
  <li>Fourth list item</li>
  <li>Fifth list item</li>
</ul>

The results of which should look a little bit like this:

Screen Shot 2016-11-27 at 3.36.33 PM

The CSS

The CSS is where you’ll get rid of the standard bullet points and replace them with a cool Font Awesome icon of your choice using the content property combined with the :before pseudo-selector. First, pick the Font Awesome icon you’d like to use as the list item icon. You can see all of the hundreds of Font Awesome icons to choose from on this page.

First, set the list-style-type to none:

li{
  list-style-type: none;
}

So now the list should have no bullets:

Screen Shot 2016-11-27 at 3.49.39 PM

Now we’ll need to use the :before pseudo-selector to select the space before the list items, and the content property to insert the Font Awesome icons as the content before the list items.

In this case, let’s pretend we’re creating a list with a nautical theme, so our Font Awesome icon of choice might be the anchor icon, the unicode code of which is f13d. To use the anchor icon as the list item icon, use the following CSS:

li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}

The results of which should look like this:

Screen Shot 2016-11-27 at 3.56.52 PM

Don’t forget you can also add some color to these icons. Check it out:

li:before{
color: #147efb;
}

Screen Shot 2016-11-27 at 3.58.20 PM

How’s that for a nautical themed list? There are so many Font Awesome icons available that the possibilities for styling your lists are practically endless. Definitely keep this technique in the back of your mind for when you’re looking to create some unique lists.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

2 thoughts on “How to Style a List with Font Awesome Icons”

  1. Great tip, thanks!

    I’d like to add to this: to address multi-line wrapping when using this technique (so that all lines are left-aligned and the bullets are on the outside), you can use a negative text-indent, which will move only the first line of each list item to the left, then compensate with padding-left to move everything back to the right.

Leave a Reply

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