DBrown

Software

DBrown Software's Blog

August 20, 2012
Styling a list with a dingbat font

I wanted a more attractive bullet for a list item than the standard CSS bullets but I did not want to use a image.  Dingbat fonts are an easy way to get graphics into your website  without adding the overhead of a graphic image.  After some searching on font sites, I found this dingbat font called Square Things 2, http://www.fontspace.com/fonts-n-things/square-things-2.  There are many geometric shapes in this font which make nice bullets.

I then used the font face generator at fontsquirrel.com to add the font to my style sheet. Since this font has no letters, I decided to use the dingbat font for bullet only.  The ul’s font family is the dingbat font.  Then the li’s style type is set to none. Next, ul li:before
content is set to the hex value of the character I chose from the font.  Finally, I set the ul li a to a non dingbat font.

Here is the css to do it:

.custom-list ul {

font-family: ‘square_things_2normal’;
font-size: 1em;
color:#45413b;
}

.custom-list ul li {
list-style-type: none;
}

.custom-list ul li:before {
content: “\0041 \0020”;
}

.custom-list ul li a {
font-style:normal;
font-family: FuturaBT-Light;
font-size: 1.1em;
color:#45413b;
}

These two blog posts gave me the information I needed:

http://www.alistapart.com/articles/taminglists/

http://demo.marcofolio.net/css_lists/

 

 

 

 

15