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 (<ul>), 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 (<ul>) 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 (<li>) 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:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>


/* 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:

<!-- HTML -->
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>


/* 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: