Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 image bullets in HTML
Overview
In HTML we can create the list in two types which are of ordered list and unordered list. So when the lists are created these are followed up with the numbering, alphabet or roman numbers in the ordered list and in the unordered list as dots. So sometimes we need to change these bullets with an image. This can be achieved using the Cascading Styles Sheet (CSS) styling property list-style-image. By using any image url or an image address we can set it to the value of list-style-image which will show as a bullet before the list items.
Syntax
The syntax used in the CSS styling property is −
list-style-image: url();
Algorithm
Step 1 − Create a HTML file in a text editor with a HTML boilerplate in it.
Step 2 − Create a HTML ol container to create the list items.
<ol></ol>
Step 3 − Add the list items in the ol tag using li.
<ol> <li>Penetration Testing</li> <li>Blackbox testing</li> <li>Whitebox testing</li> <li>Computer System Security</li> </ol>
Step 4 − Now create an internal css by adding the style tag to the head tag of the HTML tag.
Step 5 − Now style the ol tag, using list-style-image property and set the url value to it.
ol {
list-style-image: url("https://www.tutorialspoint.com/static/images/cyber-security.svg");
}
Step 6 − The image as a bullet is created successfully.
Example
In this example we have created a list item using the ordered list and had used the list style image to make the bullets of the image.
<html>
<head>
<title>image as bullet</title>
<style>
ol {
list-style-image: url("https://www.tutorialspoint.com/static/images/cyber-security.svg");
}
</style>
</head>
<body>
<h3>Image list items</h3>
<ol>
<li>Penetration Testing</li>
<li>Blackbox testing</li>
<li>Whitebox testing</li>
<li>Computer System Security</li>
</ol>
</body>
</html>
Algorithm
Step 1 − Create a HTML file in a text editor with a HTML boilerplate in it.
Step 2 − Now create a HTML unordered list ul container to create the list items.
<ul></ul>
Step 3 − Add the list items in the ul tag using li.
<ul> <li>Penetration Testing</li> <li>Blackbox testing</li> <li>Whitebox testing</li> <li>Computer System Security</li> </ul>
Step 4 − Now create an internal css by adding the style tag to the head tag of the HTML tag.
Step 5 − Now style the ul tag, using list-style-image property and set the url value to it.
ul {
list-style-image: url("https://www.tutorialspoint.com/static/images/cyber-security.svg");
}
Step 6 − The image as a bullet is created successfully.
Example
In this example we have created the list items using the unordered list (<ul>) and have used the list style image to make the bullets of the image.
<html>
<head>
<title>image as bullet ul</title>
<style>
ul {
list-style-image: url("https://www.tutorialspoint.com/static/images/cyber-security.svg");
}
</style>
</head>
<body>
<h3>Image list items ul</h3>
<ul>
<li>Penetration Testing</li>
<li>Blackbox testing</li>
<li>Whitebox testing</li>
<li>Computer System Security</li>
</ul>
</body>
</html>
The given below image shows the output of the above example, as the below image shows a list of items and the bullets are marked by the red color rectangle. So you can see that the bullets are not the normal dots or alphabets, these are the images which is imported using the css property.
Conclusion
As in the above examples we have used the ordered list, we can also add the images in the bullet using the unordered list. These images are replaced with the bullets from the default bullet lists. These bullet images make the user interface better. You should only select the png icon images or any image which is smaller in size or if you are going to use the image with background or large image it will make the interface ugly.
884 Views
