CSS banner image.

HTML offers a small list of bullet options for unordered lists. Read up on lists in the post HTML lists. If you are looking to create a list with custom bullets using an image, you will need some CSS.

Your CSS rule will look like this:

ul {
	list-style-image: url('custom-bullet-image.png');
}

For a once-off customisation, the inline CSS version:

<ul style="list-style-image: url('custom-bullet-image.png');">
	<li>Fantastic Mister Fox</li>
	<li>Reynard the Fox</li>
	<li>Br'er Fox</li>
	<li>Freddy Fox</li>
</ul>

And a Codepen to play in:

See the Pen CSS: Use an image as a custom bullet by David Fox (@foxbeefly) on CodePen.

Reference: https://www.w3schools.com/cssref/pr_list-style-image.asp

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.