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:
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:
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:
Don’t forget you can also add some color to these icons. Check it out:
li:before{
color: #147efb;
}
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.
