Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Building Rich Pro, Con, and Featured Lists With FontAwesome

Building Rich Pro, Con, and Featured Lists With FontAwesome - Featured Image
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

Today we will cover adding a plugin and the associated classes to turn columns from the typical WordPress lists to a super impressive list that pulls in the readers. It isn’t that the default is “bad” but it is what everyone does when you want to pull people into your content and what makes it special you can add just a little bling.

Below is a standard section with “product features” and then the “product pros and cons”.

Standard Featured (H2) Header

  • Feature 1
  • Feature 2
  • Feature 3

PROS

  • Reason 1
  • Reason 2
  • Reason 3

CONS

  • Bad Reason 1
  • Bad Reason 2
  • Bad Reason 3

As you can see these are pretty straight forward lists which don’t look too fancy nor really draw your eyes in to investigate or read more.

Now let’s take a look at using Custom CSS through classes and FontAwesome (Icon Cheatsheet) to add some flair to the same H2 and columns below:

  • Feature 1
  • Feature 2
  • Feature 3

PROS

  • Reason 1
  • Reason 2
  • Reason 3

CONS

  • Bad Reason 1
  • Bad Reason 2
  • Bad Reason 3

Now doesn’t this pull in your eye much more and help you make a decision on the good and bad options from the lists?

If so then below I list out how you can accomplish this or something similar if you choose to change up some icons or colors!

Steps To Add FontAwesome

  1. Go to [ Plugins ]
  2. Click [ Add New ]
  3. Search For [ FontAwesome ]
  4. Click to [ Install ] and [ Activate ]
  5. Ready to move to the next steps

CSS To Add To Custom CSS

  1. Within the Gutenberg editor, you need to assign [ Classes ] to sections of each item you need to style for the front end.
    • Features Header – Assign Class of [ featured-header ]
    • Features List – Assign Class of [ key-features-bullets ]
    • Pro Column – Assign Class of [ pro-column ]
      • This is the full column on one side or the other
    • Con Column – Assign Class of [ con-column ]
      • This is the full column on the opposite side
    • Pro Text – Assign Class of [ pro-header ]
    • Con Text – Assign Class of [ con-header ]
    • Pro List – Assign Class of [ pros-bullets ]
    • Con List – Assign Class of [ cons-bullets ]
  2. Once applied then you can paste the below into your Custom CSS section in Acabado to style the blocks. This allows you to apply these same classes to new lists as you create them and the will be styled the same without additional effort.
.featured-header {
    text-decoration: underline;
}

.pro-column {
    background-color: #38ff0029;
    border-radius: 0px 0px 25px 25px;
    margin-bottom: 45px;
}
	
.con-column {
    background-color: #ff000029;
    border-radius: 0px 0px 25px 25px;
    margin-bottom: 45px;
}

.pro-heading {
    background-color: #38ff0029;
    border-radius: 25px 25px 0px 0px;
    text-align: -webkit-center;
    margin-top: -35px;
    padding-bottom: 0px;
    font-size: 19px;
}
									
.con-heading {
    background-color: #ff000029;
    border-radius: 25px 25px 0px 0px;
    text-align: -webkit-center;
    margin-top: -35px;
    padding-bottom: 0px;
    font-size: 19px;
}
									
ul.key-features-bullets {
    padding-bottom: 31px;
    list-style-type: none;
    padding-left: 20px;
}
									
ul.key-features-bullets li:before {    
    font-family: 'FontAwesome';
    content: '\f005';
    margin:0 5px 0 -15px;
    color: #f00;
}
									
ul.pros-bullets {
    padding-bottom: 31px;
    list-style-type: none;
    padding-left: 20px;
}
									
ul.pros-bullets li:before {    
    font-family: 'FontAwesome';
    content: '\f00c';
    margin: 0 5px 0 0px;
    color: #1fcc00;
}
									
ul.cons-bullets {
    padding-bottom: 31px;
    list-style-type: none;
    padding-left: 20px;
}
									
ul.cons-bullets li:before {    
    font-family: 'FontAwesome';
    content: '\f00d';
    margin: 0 5px 0 0px;
    color: #f00;
}

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

5 thoughts on “Building Rich Pro, Con, and Featured Lists With FontAwesome

  1. sweet I figured it out! This was my first time playing with custom code. When acabado updates, do I need to fix anything?

    1. No, that is why I have switched to these methods instead of child themes and theme edits. This way once you make a change you don’t have to manage it on each update.

Leave a Reply to Josh Koop Cancel reply

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

Recent Content