Hi

 

I might be missing something completely obvious but at the moment I cant see it......

 

I'm trying to use css to input an image as a bullet point within a list but it doesn't seem to work, can anyone help me???

 

the css code im using is:

 

li {list-style-image: url("images/icon-plus.png");}

 

the picture is in the 'images' folder within the folder for my html file

 

Thanks in advance.... Joe

 

ul {
list-style-image: url(images/icon-plus.png);
}

I'd recommend you make use of psuedo elements and put the image as a background image on each psuedo element. This way you get FAR more control of the placement of the image.

Going further if you are using Icons you should be using SVGs. You can always do an SVG as a background image if you are not familar with spriting SVGs

 

e.g.

ul {
  list style: none;

}
li {
  position: relative;
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url('..pathname');
  content: " ";
}

Edited January 27, 201511 yr by rbrtsmith

guys thank you for your imput

 

Rob, thanks for the pointer towards psuedo elements, thats definitely going to help

 

I figured out the problem, my css folder was inside my root folder, my images folder was also in my root folder and therefore when pointing towards the image via css i didnt use the grandfather route to the folder..... lesson very much learnt

 

Joe