Custom Bullet Image for Lists
Most web browsers offer a few options for bullets, such as a square, circle, disc, etc. With CSS it is simple to use your own, custom bullet image.
Let's assume you have created a bullet image called 'newbullet.gif' and it is located at the root of your website.
Use the following CSS to create a custom bullet:
ul { list-style-type: none; }
ul li { padding-left: 15px; background: url(/newbullet.gif) 0px 3px no-repeat; }
Note: You may have to adjust the left padding to approximately the width of your bullet image plus 5 or 6 pixels. Also adjust the '3px' parameter, which is the y-position of the bullet in relation to the <li> item.
Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.