3. How to use images for bullet points?

When we are writing a post on a blog or website, we often come across a list of items we usually keep them as a list with bullet points.

The bullets displayed will be usually "dot".
But it would look great if we can add the images in place of "dot" for the list of items as mentioned below.



1. Copy the CSS code for the bullet image that we want to use from website:

Code snippet for Use the customized image

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('IMAGE-URL-HERE');
}

Code snippet - Ready to use

Green tick

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBkbqjRyPPbbKBmdFC0Z8EPYl1Qq0EjwGobcieDCO5x8NWMux7piL-ybHnaMs8Hv-lpSo_Y12l8WF9whvccmSMG1fzbugrMJmVEols_yTjmzM1hLQGoPsIDx6OTV3TdeFI-zdsq6Wr3W8/s1600/bullet-point-green-tick.png');
}

Yellow tick

ul.imglist {
margin: 0;
padding: 0;
}

ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLf2aqZQF1-2i1vtF8aTNbs0Pn0KHUro1v8aaQF0adX38sPI6hoEmb-JP9xn4WBRYVHzlajDK5kTQEbWbhlHiSJadtSdW3Lho7IupDekD3Fnd7vHKcf9TqP1ka8EmngXcQ7vJxkY7D2MWr/s1600/bullet-point-image-6.gif');
}

Maroon arrow bullet

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMm2h0l3GBWiP5c6AgyzvSZHc0i3WcnuwgQZ_YpkK5fhMYLkPxYfW8PnUl5fWB1SNaEg8apoZEaf_6GcdhYZUO8uTdXefNNgOQMCWa74Je3gDO71sV-01i51kR3AbZjrCjZrkoSCFOjtjE/s1600/bullet-point-image-1.png');
}

Flower bullet

ul.imglist {
margin: 0;
padding: 0;
}
ul.imglist li {
margin: 0;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkLgckqTCercIbClqdez-iBCS7zxnoV-Ozld8-Iqfsq53YPRMD9R1zOl9-WDbdKgbuswzdbm4dSn-Pvyi-4MgPfpJZ0UQcU6j1bIJ7VT8pimJwiRi7tkIGoaDrMnmSrQEcSyfB1Ja-dGv/s1600/bullet-point-image-4.jpg');
}

2. Paste the CSS code to the blog template template as below.
Dashboard -> Layout -> Template Designer -> Advanced -> Add CSS -> Paste the code -. click Apply to blog








3. Go to : Dashboard ->Create new post
Then Compose the post with a list of items with bullet points as shown below.

• Item1
• Item2
• Item3
• Item4

4. Then shift to HTML view of the post and the code looks as below.

<ul style="text-align: left;">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>

5. Now change the code as below.

<ul class="imglist"; style="text-align: left;">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>

6.Update the post and view the blog for changes.

Before Adding CSS code



After Adding CSS code