How to Use Font Awesome in Lists

Photo of Ashley
Posted by
Coding
, , , ,
If you haven’t already, please read How to Use Font Icons on Your WordPress Blog first. This tutorial requires that you have Font Awesome installed.

Jessica sent in the following tutorial request:

Hey Ashley,
I was wonder how you use icons, such as the heart one, in your lists instead of the normal round/square bullet points. I tried using fontawesome and css to change my own lists to stars but I can’t seem to figure it out. Hope you can help.
Thanks,
Jessica

Here’s an example of what she’s referring to, in case you haven’t seen my lists:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Quisque id est nibh.
  • Sed iaculis, lectus id tempor lacinia, massa lacus consequat urna, dictum posuere risus nunc nec metus.

The list HTML

If you’re using a CMS, you probably have a visual editor to create a list. But if not, here’s what the HTML structure looks like:

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Quisque id est nibh.</li>
<li>Sed iaculis, lectus id tempor lacinia, massa lacus consequat urna, dictum posuere risus nunc nec metus.</li>
</ul>

Styling the list

Next, you need to add custom CSS to your theme like this:

ul {
	list-style: none;
}
ul li {
	padding: 5px 0 5px 30px;
	position: relative;
}
ul li:before {
	content: '\f004';
	color: #a7dacc;
	font-family: 'FontAwesome';
	position: absolute;
	top: 6px;
	left: 5px;
}

See where I entered in content: '\f004'; ? That’s the code for the Font Awesome heart. You can change this to any other Font Awesome icon. Find your desired icon in the Font Awesome list and click on it. On that page, find where it says:

Unicode: f004

Copy whatever number/letter combination is after unicode and replace f004 with that code. But make sure you keep the \ in front in the code I provided.

So, for example, if you wanted to use the star icon instead, your code would look like this:

content: '\f005';

Want to change the colour?

If you want to change the colour of the icon, just edit this line of code:

color: #a7dacc;

Change the a7dacc part to another hex colour value. You can use ColorPicker.com to find a colour. Then copy the number/letter combination in the input box at the top (after the # sign).

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

37 comments

    1. I used the code you posted, but instead of just changing my lists in my posts, it changes the navigations and the pagination. I tried adding #main to the code, and it no longer affects the navigation, but it still changes the pagination. Do you have any tips on how to fix this? Thanks!

        1. No, put it before everything, not at the end. So:

          .post_content ul {
list-style: none;
}

.post_content ul li {
padding: 5px 0 5px 30px;
position: relative;
}
.post_content ul li:before {
content: ‘\f0f4 ‘;
color: #5d6b6c;
font-family: ‘FontAwesome’;
position: absolute;
top: 6px;
left: 5px;
}

                  1. Don’t ban me from the blog for spamming you..*blushes* If you want to exclude a part of your actual post from converting to image what command would you write? My share buttons which oddly do not have bullet points now have coffee cups. (this happen with menu too until I excluded it and made post content only but need to add a line. I tried Google for the answer but no luck.

                    kimbacaffeinate recently posted: Sunday Post #120 Live, Laugh, Love
  12. Pingback: Weekly Recap| Aug 3-9, 2014 | Oh, the Books!
  13. Pingback: Sunday Post | 53rd Edition - Fantasy is More FunFantasy is More Fun
  14. Pingback: August Wrap Up - Lose Time ReadingLose Time Reading

    1. You would use the exact same code but put an extra ul in front of it each time. Example:

      This affects all lists

      ul li:before {
	content: '\f004';
	color: #a7dacc;
	font-family: 'FontAwesome';
	position: absolute;
	top: 6px;
	left: 5px;
}

      This affects the SECOND LEVEL of lists

      ul ul li:before {
	content: '\f004';
	color: #a7dacc;
	font-family: 'FontAwesome';
	position: absolute;
	top: 6px;
	left: 5px;
}

      To target a deeper level, just keep adding uls ( ul ul ul li:before ).

  18. Hi, Ashley. Thanks for the article. I realise it’s quite old, but perhaps you still read the comments.

    I find that some codes work, and some don’t. For example, f004 and f005 work. But f001 (musical note) or f21c (motorcycle) don’t.

    I’ve downloaded the latest version of Font Awesome.

    If you have any time to point out the error of my ways, I’d be grateful!

    Thanks – Cath

  19. I took coding years ago in college I was afraid of it then and I’m still afraid of it now. But I stil yearn to learn how to use it.

Recent Posts

    Random Posts