Please do not follow the tutorial below until further notice. There is currently a problem with the code that’s causing the click region for links inside list items to work erratically. Until I figure out a solution you may want to follow this method.
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.
Another screenshot with text in multiple lines:
First let’s load Font Awesome in WordPress by adding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
list-style-typefor list items tononefont-familyforul > li:beforeto FontAwesome
and content to fa-circle icon’s unicode with color set to our desired value.
Here’s the sample CSS from Minimum Pro:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
Reference: http://stackoverflow.com/a/14806308/778809
