How Do I Code the Image Bullet in CSS Files?
While the "list-style-type" property in Cascading Style Sheet (CSS) code gives you some bullet style options, sometimes Web designs require custom-image-based bullets. The best method of setting an image as a bullet for your bullet lists -- also known as "unordered lists" in HTML -- involves using it as a background image. Do so on every list item and then add padding to place the text to the side of the image. This works well in every browser and allows you better control over the position of the bullet.
Other People Are Reading
Instructions
-
-
1
Use a code editor if you already have one installed. Otherwise, go to "Start." Enter "Notepad" in the search box. Navigate to "File" in the top menu and open your CSS file.
-
2
Add the following code to the bottom of your CSS file:
ul {
list-style: none;
}
-
-
3
Write code targeting the list items within your bullet list to add the image bullet as a background:
li {
background-image: URL('path/to/bullet.png') no-repeat left center;
}
This code sets the image bullet as the background for each list item while telling the browser not to tile the image. Set its placement as "left center" so the image is placed to the left of the text and vertically centered.
-
4
Add padding to the left side of each list item:
li {
background-image: URL('path/to/bullet.png') no-repeat left center;
padding-left: 20px;
}
Set the left padding to a value equal to the width of the image bullet in pixels, plus some additional pixels for added spacing between the bullet and the text.
-
1
Tips & Warnings
Give the "<ul>" tag a class name such as "<ul class='star'>" and target the list items as ".star li" in your CSS to add image bullets to certain lists and not others.
Backup your CSS and HTML files before editing them.
