ul{
list-style-image: url(”pictureurl.com”);
}
				
			

Video Summary

Alright, in this section, we’re going to cover less style images. So this is where we can take our own graphics and use those for the bullets. So instead of having numbers or letters or circles, we can have our own custom images use as the bullets. So let’s just hop over into code pen and start playing around and seeing how we can set this up. 

So what we have right here is we have the unordered list and we have three list examples. Just example example example. 

And what I have over here is the and we’ll just delete this. What we have over here as the unordered list, and I have it the font size is 30. And what we want to do is we want to make the list style image as a URL. So what we’re going to do is we’re going to use an image that I put on my website for this example. So that way we can have an actual URL to use. And if we come over here, I made a spade picture. 

That is just basically a spade icon. And I made it 25 By 25 pixels. And here’s the thing too, is when you’re using a image for your bullets, it needs to be a very small image. If it’s if it’s too large, it won’t show up and it will look wonky. So we’re going to come here and I have list style image as a property and I have the URL and what we’re going to do is we’re going to put to the parentheses in those. We’re going to put two quotes. And we’re going to paste this URL image URL in and all of a sudden boom, we are using space for our pit or the speed image for our bullets. It’s pretty straightforward. But if you end up going this route and you’re trying to use your own image, make sure that you can create the image for this URL to be very, very small. So for instance, I made mine 25 by 25 pixels. Now, if we wanted that a little bit smaller, we wouldn’t maybe need to make it maybe 10 pixels by 10 pixels or maybe 15 by 15. The other thing too is if you want to increase the size to match your bullet images, you can always just come back over here and say we’ll try 40 And now it’s more parallel to what the image is. So if this is something that you want to use, by all means it’s a great tool, but more times than not we are going to use icons for these images. And basically, we’re going to use font awesome, and I’m not going to have font awesome set up within the CSS tutorial. I’m going to have its own course that’s included with our WordPress course. But this way you can go in and learn how to use font awesome icons and be able to make them into your list. And the reason why I’m separating the Font Awesome from the CSS is just because the way that font awesome is set up is it’s hard to be able to replicate those results using code pen, just because we have to use HTML, CSS or JavaScript with us and we really need to call into the icon library that font awesome has and with a WordPress we’re able to use that with a plugin, we can just download the word or the WordPress font awesome plugin and upload it to our site and we can call to all these icons. but if you want to use an image or there is a feature on your theme that’s using these and you want to change it, This is the property to do so. So let’s hop over the next section we’ll talk about list style positions.