Using Font Awesome icons as bullets

fontawesome

An awesome Font Awesome. It’s awesome. Screenshot from icnfnt. Did I tell you that it’s awesome?

If there’s a will there’s a way. And there are nice people who answers questions on stackoverflow, and God bless them! I love the fact that the stackoverflow user contributions are criative common wiki license.

Without further ado, (btw, that is correct, not adieu) here is one way to do it:

li {
  padding-left: 1.2em;
  list-style: none;
}
li:before {
  color: #bbb;
  content: "\f15c";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.2em; /*same as padding-left set on li*/
  width: 1.2em; /*same as padding-left set on li*/
}

Also see codepen below.

See the Pen pjyaK by Daigo Fujiwara (@daigofuji) on CodePen

I sort of have an obsessive tendencies and right now this web-based embedable icon “font” thing is my obsession. I absolutely LOVE the Font Awesome, and its idea. It is the smartest ting ever. Especially with the zoomable web browsers and retina display (both are features of iPhone), you just give it a class in html, include a 14kb css file, and have crisp, 58 vector-based icon appear, is brilliant. MIT license, too.

Smart guys at ProPublica developped State Face a typeface of U.S. state shapes to use in web apps — like election maps etc. is also amazing. And it is oppen source, and available to download from github.

Github also did this in-house, and released a beautiful writing/drawing/thought process on how they did it. and their documentation.

Looking at those sources, it looks like they used glyphs. The pro version is $299, but Glyphs Mini, which looks like plenty strong for what I want to do, is 40 euro, and you have to buy it from the Apple App Store.

Stumbled across an awesome blog post: Trello uses an icon font and so can you! Detailed information on how to do it, and I would like to do that!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>