Fancy Lists With HTML & CSS

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

  1. Coffee
  2. Tea
  3. 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

Note: You may not be able to modify colors on symbols that have color embedded in them.

The Unicode I have shown in the table above is only a tiny, and I do mean tiny, sampling of the Unicode symbols available on the consortium website. As of this writing the complete list of symbols is over 150,000 and counting. If you want to confirm Unicode's ability to scale due to its vector graphic quality, most browsers will let you magnify this page up to 500% by holding down the control key and scrolling the mouse wheel. Notice how, just like the fonts, the Unicode symbols are sharp and clear even when they are very large. Not so with pixel based image formats.

Let's see what kind of styled list you can make. Use the "Try It Yourself" windows below. I have included the code and a default bullet type.
Remember:
  ✔  Write your code in the Code window.
  ✔  Only modify the three lines just below li:before {.
  ✔  Leave the backslash (\) before the Unicode symbol.
  ✔  Press Run Code.

No worries! If you mess up the code, just refresh the browser to start over.

 
Code
Output

Can you style the lists? Can you use symbols from the Unicode website?

Although my examples are done with internal styles (embedded in this web page), the real value in adding Unicode symbols through your style sheet, lies in the ability to change the look and style of multiple lists across your website by changing only a small portion of code in your site's style sheet. There would certainly be circumstances to use single page styles and even single element or list styles. One possible category is ordered lists.

Since the list items are numbered, they would require a different symbol for each line. You can accomplish this by inserting the symbol numbers directly into your HTML. This is done by using HTML Entities. Entities are characters that are reserved for HTML and require special treatment. Entities start with an & and end with a ;. For instance an ampersand is &amp; and a non breaking space is &nbsp;. Unicode symbols must be treated this way when adding directly to HTML. Example: &#x1F310; produces 🌐. The actual number of this Unicode symbol is 1F310. To render it in HTML you need the opening ampersand, a pound sign or hash mark, which tells HTML this is a number, an x to designate it is Hexadecimal, the symbol number itself, and finally the closing semi-colon. Many web developers use the decimal number which doesn't require the x and is more compatible with older browsers. I don't bother.

Here is a simple way to add numbers to a numbered list by just inserting the Unicode and a single space to give the effect of list styling, but this is straight up HTML. Remember you still need to have a style to remove the HTML default numbering. I added that as an inline style below for demonstration purposes.

This HTML:

<p>Ordered HTML list</p>
<ol style="list-style: none;">
  <li>&#x2776;&nbsp;Coffee</li>
  <li>&#x2777;&nbsp;Tea</li>
  <li>&#x2778;&nbsp;Milk</li>
</ol> 

Renders this result:

Ordered HTML list

  1. ❶ Coffee
  2. ❷ Tea
  3. ❸ Milk

You can play with this code in the "Try It Yourself" window above. There are several sets of number symbols in Unicode. They are usually in sets of ten.

You assignment, should you choose to accept it:
You are designing a flyer for a campus club. The club could center on a hobby, sports, academics, art, or just about any subject that is acceptable and within school policy. It will have both ordered and unordered lists. Style your lists accordingly and submit your flyer as a single HTML page.with an internal style sheet.


Thank you! I hope you enjoyed my article. This subject matter is part of a series of high school lessons on HTML and Web Development. Feel free to leave a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *