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.
About Abhishek Ghosh
Follow the Author of this article :
Here’s what we’ve got for you which might like :
Additionally, performing a search on this website can help you. Also, we have YouTube Videos.
Take The Conversation Further ...
We'd love to know your thoughts on this article.
Meet the Author over on Google+ or Twitter to join the conversation right now!
If you want to Advertise on our Article or want Business Partnership, you are invited to Contact us.
Contact Us