Creating ordered and unordered lists with HTML alone is somewhat limited. Like all HTML elements, lists require CSS to get prettied up. The options for bullets in unordered lists <ul> only include disc, circle, square, and none. The options for symbols in ordered lists <ol> is also sparse, offering only Arabic numbers, Roman numbers (upper and lower), and letters (upper and lower). Basically, plain HTML lists look like this (shown below).
This HTML:
<p>Unordered HTML list</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Ordered HTML list</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Renders this result:
Unordered HTML list
- Coffee
- Tea
- Milk
Ordered HTML list
- Coffee
- Tea
- Milk
Using CSS (Cascading Style Sheets), lists can be implemented with some very aesthetically pleasing bullets and numbers.This can done with font-end packages such as Font Awesome or by using a complete front-end library like Bootstrap. They both have free packages which I use in various places on this website. I like free! The reason these solutions work so well for icon usage is they use vector graphics, which are very scalable, as opposed to bitmapped images which are not.
I’d like to discuss another method which does not require any package downloads and does not require you to have a font or icon library installed on your server. This method uses Unicode, which is an international encoding standard for use with different languages and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs. The Unicode Consortium is an ongoing project that is constantly updated. It is great for displaying unusual characters that are not available on your keyboard. The actual charts are located here.
According to the Unicode website:
Q: What is Unicode?
A: Unicode is the universal character encoding, maintained by the Unicode Consortium. This encoding standard provides the basis for processing, storage and interchange of text data in any language in all modern software and information technology protocols.
Q: What is the scope of Unicode?
A: Unicode covers all the characters for all the writing systems of the world, modern and ancient. It also includes technical symbols, punctuation, and many other characters used in writing text. The Unicode Standard is intended to support the needs of all types of users, whether in business or academia, using mainstream or minority scripts.
It would be a good idea to read the consortium copyright and terms of use page before using unicode. https://www.unicode.org/copyright.html
Let’s start out with one method of CSS that does the job and see how we can make our lists look, if not prettier, at least more interesting. We’ll take a look at unordered lists first, since they all use the same character and ordered lists later. Here is the CSS and and I have included a comment on each line that explains what the code does. Just look this over for now. We’ll be using it in a moment.
<style>
ul {
list-style: none; /*removes the default bullet*/
margin-left: 3%; /*gives the bullet a small left margin*/
padding-left: 1.2em; /*sets the list text to the right*/
text-indent: -1.2em; /*indents the list text*/
}
li:before { /*puts the Unicode before the text*/
content: "\27a5"; /*designate the Unicode character's number*/
font-size: large; /*control the bullet size*/
color: #d9534f; /*control the symbol color*/
margin-right: .5em; /*give a small margin to the Unicode*/
}
li {
padding: .2em; /*space between the Unicode and the text*/
}
</style>
You can go to the Unicode Consortium charts page, here and look over the charts. Here are links to a couple of my favorites. They open in PDF:
Geometric Shapes
Dingbats
Supplemental Symbols and Pictographs
Chess Symbols
At the bottom of this page I have included a “Try It Yourself” window where you can use the code we are discussing here. If you want to keep it simple, here are a few to play with
➠ 27a0 | ➢ 27a2 | ➥ 27a5 | ➪ 27aa | ➯ 27af | ➲ 27b2 |
✎ 270e | ✔ 2714 | ✘ 2718 | ✭ 272d | ✸ 2738 | ❂ 2742 |
♚ 265A | ♛ 265b | ♜ 265c | ♝ 265d | ♞ 265e | ♟ 265f |
𝄞 1d11e | 𝅗𝅥 1D15E | 𝅘𝅥 1D15f | 🂡 1F0A1 | 🂽 1F0BD | 🂿 1F0BF |
☠ 2620 | ☕ 2615 | ☎ 260E | ⛈ 26C8 | ⛽ 26FD | ♻ 267B |