Circular Color Bullets for List Items using Font Awesome

While it is possible to set up color bullets for unordered list items using this method, in this tutorial I show how we can use Font Awesome icons for the same.

First let’s load Font Awesome in WordPress by adding

// Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}

in functions.php.

We will then set

1. 1. list-style-type for list items to none
   2. font-family for ul > li:before to FontAwesome

and content to fa-circle icon’s unicode with color set to our desired value.

Here’s the sample CSS from Minimum Pro:

.entry-content ol,
.entry-content p,
.entry-content ul,
.quote-caption {
	margin-bottom: 26px;
}

.entry-content ol/*,
.entry-content ul*/ {
	margin-left: 54px;
}

.entry-content ul {
	margin-left: 40px;
	padding-left: 20px;
}

.entry-content ol > li {
	list-style-type: decimal;
	padding-left: 10px;
	margin-bottom: 10px;
}

.entry-content ul > li {
	/*list-style-type: disc;*/
	list-style-type: none;
	margin-bottom: 10px;
}

.entry-content ul > li:before {
	content: "\f111";
	font-family: FontAwesome;
	font-size: 8px;
	color: #eb871e;
	vertical-align: middle;
	margin-left: -28px;
	margin-right: 20px;
}

.entry-content ol ol,
.entry-content ul ul {
	margin-bottom: 0;
}