It Looks Great to Have Colored Tick Marks, Unordered List with Icon-Font ! Most Importantly, with Base64 Encoding, no image to load! Definitely, this is somewhat advanced article and you must must be used with our way of hacking – every good website has some special way of making the things to work. CSS Tricks has a set, Perishable Press has a set and so on. None probably copies from each other. So, you probably need to read Using Icon-Font with WordPress, which basically will help any CMS, any HTML, PHP, ASP, whatever webpages to make them working. Before clicking the link – know it clearly : the article has lot of links to other guides! It will really consume a huge time if you are a newbie. But, warranted fact is – after reading the guide; you can practically play with the icons. Do not like red colored tick mark? Ok, go green then. Wherever, whenever you want; you can add colored Tick Mark, unordered list with Icon-Font and no extra CSS will be required.
Colored Tick Mark, Unordered List with Icon-Font : Do More in WordPress
Going a bit off topic; actually WordPress has lot of Icon-Fonts now – Tools, Settings, Users – probably that set can cover a huge number of usage with your theme. You actually can load the css in front end by adding this eneque script function on child theme’s function.php file :
1 2 3 4 5 6 | add_action( 'wp_enqueue_scripts', 'child-theme-name_scripts' ); function child-theme-name_scripts() { wp_enqueue_style( 'child-theme-name-style', get_stylesheet_uri(), array( 'dashicons' ), '1.0' ); } // child-theme-name is just a name; // array( 'dashicons' ) is important |
Let us come back to the topic.
---
Colored Tick Mark, Unordered List with Icon-Font : Simple HTML, Nothing More
The CSS is already loaded by you (you accepted to read our older guides by scrolling up to this point… ). This is a normal unordered list :
- I am good
- I am more good
- Icon-Font is also good
- But Base64 Encoding is more good
Usually the HTML is :
1 2 3 4 5 6 | <ul> <li>I am good</li> <li>I am more good</li> <li>Icon-Font is also good</li> <li>But Base64 Encoding is more good</li> </ul> |
And this is probably you want to see :
I am good
I am more good
Icon-Font is also good
But Base64 Encoding is more good
We used this :
1 2 3 4 | <p><i class="icon-check" style="color: green;"></i></i>I am good</p> <p><i class="icon-check" style="color: red;"></i>I am more good</p> <p><i class="icon-check" style="color: blue;"></i>Icon-Font is also good</p> <p><i class="icon-check"></i>But Base64 Encoding is more good</p> |
In our case, as in CSS file; the list style of unordered list style is not set to none; we need to force it – it is not actually an unordered list. If you set list style to none; , then you can use :
1 2 3 4 5 6 7 | <ul> <li><i class="icon-check"></i>I am good</li> ... so on ... </ul> |
Obviously if your CSS coding is bad, it might look bad but, it is usually never happens with Icon-Font (compare with SVG). The fun of adding color is very easy :
1 | <i class="icon-check" style="color: blue;"></i> |
This article on Colored Tick Mark, Unordered List with Icon-Font is intended for HTML5 web pages only. i class will not work in previous version of HTML.
