Tutorial Tuesdays: How to Customize Bullet Points in a List

Modern philosopher Umberto Eco famously said, “We like lists because we don’t want to die.” While Eco’s statement is a bit sensational, it’s no secret that lists are some of the most important parts of copywriting. Lists help to break up the information about your organization into digestible bits for readers.

Lists can also help a website visitor compartmentalize the benefits of your website. The more visual you can make your copy, the better. Using lists adds visual interest to otherwise static body copy.

Another way to further engage readers with your content includes using logos, emblems, or simple shapes to break up the traditional monotony of lists. These icons can also help further your organization’s branding and enhance your website’s design. For example, if you’re a school, opt for a simple illustration of a crayon or pencil rather than a traditional, solid bullet point.

We use this throughout our own Solodev website. These fun bullet points are associated with the topic on the list while still being related to one another. It helps a visitor better categorize the points we're trying to make about our products. 

And, with this tutorial, you can try out these bullet points for your own website!

Below is the HTML and CSS required:

HTML

A simple list item can be created within an unordered list by using the above markup. You can naturally include various HTML syntax within the list item itself, which is crucial in creating unique/responsive list elements. The key within the above code is the use of the "i" tag. For those familiar with Font Awesome, you can use the font and CSS toolkit to embed hundreds of different icons simply by including the dependency stylesheet and specifying different classes. This icon will thus become the main focal point for a given bullet point.

CSS

The CSS needed to pull this customization off requires, first, making sure your default list items for the given section have their default styling disabled. You can accomplish this with the following CSS:

The above code defines the particular unordered list so that it doesn't use the default list style type. This is important as it allows the customized icon space to be displayed.

With the defaults disabled, we can now begin to customize the list classes. The following icon class does the majority of the visual magic.

By specifying a fixed height and width that is the same size and by settting the border-radius to 100%, we can create a complete circle for the icon. Adding a small border also emphasizes the shape of the object and makes a style connection to bulleted lists.

Lastly, we need some additional CSS to make sure the icon and its accompanying text are aligned vertically. To do this, take advantage of the "display: table-cell" property:

The above code, targeted to both the icon and the text, ensures that both elements are centered vertically amongst one another.

With all off of the above code, you can now create your own unique bulleted icons that better matches the content of your list items. With such flexibility in specifying the content of your icons, you can create a whole suite of custom lists that match the unique design and branding of your individual websites.