MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › list-style-image
list-style-image - CSS Demo - MDN
December 16, 2025 - .default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; } Note: This property is applied to list items, i.e., elements with display: list-item; by default this includes <li> elements.
W3Schools
w3schools.com › cssref › pr_list-style-image.php
CSS list-style-image property
The list-style-image property replaces the list-item marker with an image.
Videos
04:45
list style image property in CSS (Hindi) - YouTube
02:57
CSS List Style Image - YouTube
03:17
CSS list-style-image Property - CSS Tutorial 66 🚀 - YouTube
03:26
#20 CSS List Style | List Style Type | List Style Image | List ...
07:09
CSS List Style | list style type, image and position - YouTube
08:53
Comment créer un site web: TUTO CSS (list-style-image) - YouTube
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › list-style-image
list-style-image - CSS - MDN Web Docs
July 14, 2025 - .default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; } Note: This property is applied to list items, i.e., elements with display: list-item; by default this includes <li> elements.
Codrops
tympanus.net › codrops › css_reference › list-style-image
list-style-image | Codrops
February 4, 2015 - ul { list-style-image: url("images/pointing-hand.png"); } Try using an image of your own as the list item marker to see how it changes. Example demos are temporarily unavailable.
DoFactory
dofactory.com › css › list-style-image
CSS list-style-image
<style> .style-resize > li::before { content: ''; display: inline-block; height: 50px; width: 50px; background-size: cover; background-image: url('/img/css/sunflowers-sm.jpg'); background-repeat: no-repeat; margin-right: 10px; background-position: center center; vertical-align: middle; } </style> <ul class="style-resize" style="list-style-type: none"> <li>Vincent Van Gogh</li> <li>Henri Matisse</li> <li>Paul Gauguin</li> </ul> Try it live
CSS Reference
cssreference.io › property › list-style-image
list-style-image - CSS Reference
Defines the image to be used as an list item's bullet point. ... The list items will use the bullet point defined by the list-style-type value, which by default is a disc.
TechOnTheNet
techonthenet.com › css › properties › list_style_image.php
CSS: list-style-image property
In this CSS list-style-image example, we have chosen to display the image called symbol.gif in front of each list item in the <ol> tag.
WebPlatform
webplatform.github.io › docs › css › properties › list-style-image
list-style-image · WebPlatform Docs
/* Using an absolute URI to specify an image */ .first-list { list-style-image: url(/docs/w/skins/webplatform/images/logo.svg); } /* Using a relative URI to specify an image */ .second-list { list-style-image: url(favicon.ico); } /* When providing an unavailable image, the marker used will ...
Reality Ripple
udn.realityripple.com › docs › Web › CSS › list-style-image
list-style-image - CSS - UDN Web Docs: MDN Backup
If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. Note: This property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. Because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. /* Keyword values */ list-style-image: none; /* <url> values */ list-style-image: url('starsolid.gif'); /* Global values */ list-style-image: inherit; list-style-image: initial; list-style-image: unset;
TutorialsPoint
tutorialspoint.com › css › css_list-style-image.htm
CSS - list-style-image Property
<!DOCTYPE html> <html> <head> <style> li { font-size: 22px; font-weight: bold; } .unordered1 { color: red; list-style-image: url("/css/images/cursor-zoom-out.png"); list-style-type: circle; } .unordered2 { color: green; list-style-image: url("/css/images/cursor-e-resize.png"); list-style-type: square; } </style> </head> <body> <h2> CSS list-style-image property </h2> <h4> list-style-image: url () </h4> <ul class="unordered1"> <li> Apple </li> <li> Banana </li> <li> Orange </li> <li> Pineapple </li> </ul> <h4> list-style-image: url () </h4> <ul class="unordered2"> <li> Potato </li> <li> Onion <
GeeksforGeeks
geeksforgeeks.org › css › css-list-style-image-property
CSS list-style-image Property - GeeksforGeeks
August 27, 2024 - <!DOCTYPE html> <html> <head> <title> ... Sort</li> </ul> </body> </html> ... Example: In this example, we use list-style-image: url; property....
Tailwind CSS
tailwindcss.com › docs › list-style-image
list-style-image - Typography - Tailwind CSS
Use the list-image-[<value>] syntax to control the marker image for list items:
Base64.Guru
base64.guru › home › developers › css
list-style-image | CSS | Developers | Base64
The same can be achieved by encoding image to Base64 and embedding it using data URI: .base64-data { list-style-image: url("data:image/gif;base64,R0lGODdhBQAFAPABAP////8AACwAAAAABQAFAAACCARihhe9q0wBADs=") }
W3docs
w3docs.com › learn-css › list-style-image.html
CSS list-style-image Property
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> ul { list-style-image: none; } </style> </head> <body> <h2>List-style-image property example</h2> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › list-style
list-style - CSS - MDN Web Docs - Mozilla
The list-style CSS shorthand property allows you to set all the list style properties at once. ... <section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all" id="example-element"> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ul> </div> </section>
HTML Dog
htmldog.com › references › css › properties › list-style-image
CSS Property: list-style-image | HTML Dog
An image to be used as a list item marker. Applies to boxes set to display: list-item (of which li HTML elements are by default). List style image can also be specified as part of the list-style shorthand property.
Front-end Reference
frontendreference.com › css › list-style-image.html
How to Use the list-style-image Property in CSS
January 12, 2024 - The image can be in various formats, such as PNG, JPEG, or GIF. ... In this example, the list-style-image: url('path/to/image.png'); rule sets the image located at 'path/to/image.png' as the marker for unordered lists (<ul>).
W3Schools
w3schools.com › jsref › prop_style_liststyleimage.asp
HTML DOM Style listStyleImage Property
❮ Previous ❮ Style Object Reference Next ❯ · Specify an image as the list-item marker in a list: document.getElementById("myList").style.listStyleImage = "url('sqorange.gif')";Try it Yourself » · The listStyleImage property sets or returns an image as the list-item marker.
Top answer 1 of 4
1
li {
list-style-image: url('D:\HTML and CSS\imgs\plus.png');
}
The reason the list-style-image does NOT work is because the BACKWARD Slash in the URL.
So BACKWARD Slash should be replace with FORWARD slash as following:
li {
list-style-image: url('D:/HTML and CSS/imgs/plus.png');
}
2 of 4
1
Try to replace spaces with %20 in the D:\HTML and CSS\ part of the path.
Example:
list-style-image: url('D:\HTML%20and%20CSS\imgs\plus.png');
W3Schools
w3schools.com › css › tryit.asp
The list-style-image Property
August 25, 2023 - The W3Schools online code editor allows you to edit code and view the result in your browser