So einfach können die Symbole als der FontAwesome Bibliothek als Listenpunkte in Listenelementen benutzen.

Die Symbole von verschiedenen WebFont Libraries, beispielsweise FontAwesome, lassen sich auch wunderbar als Listenpunkte benutzen. Das kann ganz einfach mit einem kleinen Trick – nämlich dem :before Pseudo-Element erreichen. So sieht das ganze direkt in CSS aus:

CSS:

.checkboxes {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.checkboxes li {
    display: block;
    padding-left: 20px;
    position: relative;
}
.checkboxes li:before {
    color: #008000;
    content: "\f00c";
    font-family: FontAwesome;
    left: 0;
    position: absolute;
    top: 0;
}

SASS/Compass

In Sass ist das etwas übersichtlicher.

.checkboxes{

  display: block;
  margin: 0;
  padding:0;
  list-style-type: none;

  li{

    display: block;
    position: relative;
    padding-left: 20px;

    &:before{

      position: absolute;
      top:0px;
      left: 0px;
      content: "\f00c";
      font-family: FontAwesome;
      color: green;

    }

  }

}

SASS/Compass mixins

Wer im Projekt verschiedene Listentypen braucht, kann diese mit folgendem Mixin schnell erzeugen:

@mixin awesome_list($symbol, $padding, $color) {

  display: block;
  margin: 0;
  padding:0;
  list-style-type: none;

  li{

    display: block;
    position: relative;
    padding-left: $padding;

    &:before{

      position: absolute;
      top:0px;
      left: 0px;
      content: $symbol;
      font-family: FontAwesome;
      color: $color;

    }

  }

}

.checkboxes{

  @include awesome_list("\f00c", 20px, green);

}