Replace dot from bullet point to a jpg or png

[Brianlv]

Hey,

I have a question and I don’t know how to resolve it.

I am trying to replace the dots from a bullet point with a small PNG or JPG, as shown on the attached file, because I saw it on many stores that they use an icon instead of a boring dot, so that the page looks more professional. The only problem is that I don’t know how to do it. Could someone please post a code, so

I could simply copy and paste it or help me find a solution?

I would appreciate it a lot!

Thank you in advance.

[Xipirons]

Hi @Brianlv

To replace the default bullet points with a custom image in an unordered list (

), you can use the CSS list-style-image property. Here’s how you can do it:

1. First, you need to have the image file (PNG or JPG) that you want to use as the bullet point. Let’s assume the image file is named “bullet-icon.png” and it’s located in the same directory as your CSS file.

2. In your CSS file, target the unordered list (

   ) and set the list-style-image property to the URL of your image file:

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

This will replace the default bullet points with your custom “bullet-icon.png” image for all unordered lists on the page.

3. Optionally, you can also remove the default padding and margin of the list items (
4. ) to better control the spacing around the custom bullet image:

ul {
list-style-image: url('bullet-icon.png');
padding-left: 20px; /* Adjust this value to control the spacing between the bullet and the list item text */
}

ul li {
margin-bottom: 10px; /* Adjust this value to control the spacing between list items */
}

Here’s the complete code:

- List item 1

- List item 2

- List item 3

/* CSS */
ul {
list-style-image: url('bullet-icon.png');
padding-left: 20px;
}

ul li {
margin-bottom: 10px;
}

Make sure to replace ‘bullet-icon.png’ with the actual name and path of your image file.

This approach will work for most modern browsers. However, keep in mind that older browsers may not support the list-style-image property, in which case you might need to use an alternative method, such as creating a background image for the list items and adjusting the padding to position the image correctly.

[Xipirons]

And you can do the same thing with another technique using the ::before pseudo-element.

You can use the following CSS code:

ul {
list-style: none; /* Remove default bullet points */
padding-left: 0; /* Remove default left padding */
}

li {
position: relative; /* Required for positioning the pseudo-element */
padding-left: 25px; /* Adjust this value to control the spacing between the icon and the list item text */
margin-bottom: 10px; /* Adjust this value to control the spacing between list items */
}

li::before {
content: url('bullet-icon.png'); /* Replace 'bullet-icon.png' with the actual name and path of your image file */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* Vertically center the icon */
}

Here’s how it works:

1. We remove the default bullet points by setting list-style: none; on the <ul> element.
2. We remove the default left padding of the <ul> element by setting padding-left: 0;.
3. We position the <li> elements relatively to allow positioning of the pseudo-element.
4. We add some left padding to the <li> elements to create space for the icon.
5. We use the ::before pseudo-element on the <li> elements to insert the custom icon.
6. We set the content property of the ::before pseudo-element to url('bullet-icon.png'), replacing 'bullet-icon.png' with the actual name and path of your image file.
7. We position the ::before pseudo-element absolutely and use top: 50%; and transform: translateY(-50%); to vertically center it.

Here’s the complete code:

- List item 1

- List item 2

- List item 3

/* CSS */
ul {
list-style: none;
padding-left: 0;
}

li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
}

li::before {
content: url('bullet-icon.png');
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

Make sure to replace 'bullet-icon.png' with the actual name and path of your image file.

This approach should work in modern browsers that support the ::before pseudo-element and the content property accepting a URL value.

Citations: