How to Create Awesome Unordered Lists with Icons for Your WordPress Site

Post written by David Wells
On Tuesday, January 7th, 2014

Get a FREE estimate for WordPress Customization provides over 500 senior WordPress Experts to help you with your customization needs.

Creating beautiful lists is not for the faint of heart.

Styling a list requires some knowledge of CSS and some HTML, but not anymore baby!

We created a handy shortcode for you to use for your next list.


Sexy right?

Step 1 – Install WordPress Leads, Landing Pages or CTA

All three of our flagship plugins include the same awesome shortcodes. Once you have the plugin installed you will be able to generate an awesome list.

We found that having professionally designed lists on landing pages helped with conversions!

Step 2 – Head to any visual editor and click on the inbound now power icon

Click on the power icon shortcodes-blue in the WordPress visual editor and then select insert icon list.

Set up your list options

Next setup your list options.

You have the entire font awesome icon library to choose from to create your awesome list.

You can also configure the font sizes, how many columns the list should be split up into, and color options.

Insert the Shortcode

Now replace the content “(Insert Your Unordered List Here. Use the List insert button in the editor. Delete this text)” with and unordered list with your content and publish

Final Product

In the screenshot above you can see an example of a larger 2 column list layout and down towards the bottom you can see the single column list.

Now you have no excuse for not making your lists extremely sexy.

Get help with difficult WordPress projects provides over 500 senior WordPress Experts that can help you get past dead ends.

About the Author:
David is Founder of Inbound Now and a Fanatical WordPress Designer & Developer. He believes that the internet is a magical place where wonderful things can happen. Say hi to him @DavidWells

Signup and get started with Inbound Now

Sign Up for Free


[gravityform id="3" name="Popup Form" title="false" description="false" ajax="true"]