When writing any content particularly for web consumption, bullet points are really handy. They help break up your text a bit if they article is very long. They also give people a quick focus point. But have you looked at your bullets and thought they looked a little… blah? Here’s some code you can use to pretty up your bullets.

Circle Bullets

  • Item 1
  • Item 2
  • Item 3
1
2
3
4
5

<ul style="list-style-type: circle;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Square Bullets

  • Item 1
  • Item 2
  • Item 3
1
2
3
4
5

<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Lower Roman Numerals Bullets

  1. Item 1
  2. Item 2
  3. Item 3
1
2
3
4
5

<ol style="list-style-type: lower-roman;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Image Bullets
This one is just a tad more work, but you can have visually stunning bullets with images.

  1. First, you need to find a bullet image. I like to scroll through this site to find something to use.
  2. Save it to your computer and then upload it to your website. Take note where you upload the image to because you’ll be needing the URL to the image.
  3. Copy paste the code below and remember to fill it in with the URL to your own bullet image. If you want to use the same bullet image I am using here, just right click on this image red bullet and save.
  • Item 1
  • Item 2
  • Item 3
1
2
3
4
5

<ul style="list-style-image: url('0136_fat_arrow.png');">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>