- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an unordered list with image bullets in HTML?
To create unordered list in HTML, use the <ul> tag. The unordered list starts with the <ul> tag. The list item starts with the <li> tag and will be marked as disc, square, circle, etc. The default is bullets, which is small black circles. If you want to create an unordered list with image bullets, use the CSS property list-style-image.
We will be using the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <ul> tag, with the CSS property list-style-image to add image bullets to an unordered list. The URL property sets the image source for the list item.
Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet
Example
You can try to run the following code to set image bullet in an unordered list −
<!DOCTYPE html>
<html>
<head>
<title>HTML Unorderd List</title>
</head>
<body>
<h2>Tutorials</h2>
<p>The list of tutorials:</p>
<ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
</ul>
</body>
</html>
- Related Questions & Answers
- How to create an unordered list with disc bullets in HTML?
- How to create an unordered list with circle bullets in HTML?
- How to create an unordered list with square bullets in HTML?
- How to create an unordered list without bullets in HTML?
- How to create an unordered list without bullets using CSS?
- How to add an unordered list in HTML?
- How to create space between list bullets and text in HTML?
- How to create an ordered list with list items numbered with numbers in HTML?
- Make Unordered list with Bootstrap
- How to create clickable areas in an image in HTML?
- How to create an ordered list in HTML?
- Create a bordered list without bullets using CSS
- How to create an ordered list with list items numbered with lowercase letters in HTML?
- How to create an ordered list with list items numbered with uppercase letters in HTML?
- How do we create an image map in HTML?