CSS Tick Marks and Wrong Marks – How To Add In Easy Steps

CSS Tick Marks and Wrong Marks are very easy to add in WordPress or Blogger Blog and sometimes it is very essential part of a copy-writing to use these icons.
This CSS tutorial is also an on demand article, our regular visitor Fazl ur Rahman has asked how we have used the tick marks.

 

What are the usage of these CSS Tick Marks and Wrong Marks

 

The concept of copy-writing, Squeeze and Landing pages are making these CSS Tick Marks and Wrong Marks very important graphical part.

 

Ways to create : CSS Tick Marks and Wrong Marks versus background image

 

In case of background image, the page becomes heavy and takes more time to load than a page with CSS Tick Marks and Wrong Marks.

Example usage of CSS Tick Marks and Wrong Marks

• CSS Tick Marks and Wrong Marks takes less time to load

• Graphically added Tick marks make the page heavier

 

How to add CSS Tick Marks and Wrong Marks

 

 

In case of WordPress or Blogger, simply switch to HTML mode and use the following :

 

<span style="color: #339966;">&lt;ul</span> <span style="color: #0000ff;">style=</span><span style="color: #ff00ff;">"list-style-image: url('<span style="color: #ff0000;">Your Full Url Of The Tick Mark or Wrong Mark</span>');"</span>&gt;<span style="color: #339966;">&lt;li&gt;</span>CSS Tick Marks and Wrong Marks takes less time to load<span style="color: #339966;">&lt;/li&gt;</span>

<span style="color: #339966;">&lt;/ul&gt;</span>

 

As you can see, in our case along with the CSS Tick Marks, the unordered list bullet is appearing. To prevent this, you have to create a separate div (for example take the name of div as ‘CSS Tick Marks‘). You have to define in your CSS the unordered list as:

 

list-style: none;

Wrap your CSS Tick Marks within the div, a sample can be :

 

<span style="color: #339966;">&lt;div</span> <span style="color: #0000ff;">id=</span><span style="color: #ff00ff;">"CSS Tick Marks"</span><span style="color: #339966;">&gt;</span>

<ul style=“list-style-image: url(‘Your Full Url Of The Tick Mark or Wrong Mark‘);”>
<li>CSS Tick Marks and Wrong Marks takes less time to load</li>
</ul>

</div>