If you have a look at my sidebar, you see that my menu options have little dots (or images) to the left. Thanks to CSS, Cascading Style Sheets, you have many options to style your list, ranging from no style to one of the many default styles. You are even able to use an image of your choice!
So how do you edit and style your list?
Of course you are able to use almost any of the available CSS properties, like borders, background, font and so on.
A list without icons
Let’s assume you want to use the list to create a menu, but you don’t want to have the default list icons added by the browser, because it would break with the design. How do you remove the icons? With a tiny bit of CSS of course:
ul, ol {
list-style:none;
}
This code will remove any list style, leaving you a list without the list icons. It works for both types of lists, order and unordered. If you prefer using in-line editing, just add a style="list-style:none;" to the „ul“ or „ol“ tag and you are set.
A list with one of the default icons
Now let’s have a look at how we can use one of the many default icons. Please keep in mind that some of those icons are show different in different browsers. I recommend testing them before you use them.
Before we can set an icon, we need to know which icons exist. I took the time and compiled you a list:
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- lower-greek
- lower-latin
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
And before you start yelling at me „How does those icons look like“ just have a look at my example and try them all.
To add one of the icons you can use this code:
ul, ol {
list-style-type:liststyle;
}
Replace the liststyle with the name of the icon you want to use. Of course you can also use the in-line style style="list-style-type:liststyle".
Easy so far, isn’t it?
A list with an icon/image of your choice
Now let’s go a step further. I believe you can imagine that the default icons limit you in your design efforts. Fortunately CSS enables you to use an own image by using the code:
list-style-image:url(path-to-image);
Replace the path-to-image with the url to your image. For the image I use in my example the path would be:
http://www.ruelicke.net/wp-content/themes/ruelicke/images/feed-icon.png
You can use any kind of image, but depending on it’s size you need to play with the padding and font size to make it fit with the list.
Wrap up
Congratulation, you are now able to adjust the list style icon to your needs. You no longer need to use the default icon.
If you like it fancy, you could style the list as I did although I would never use that design. Of course I would never use that one on a site, but I think it is always good to play around with the CSS to get an idea about how it works.
Any questions left?