CSS und FontAwesome: FontAwesome als Symbole in Listen benutzen
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); }
Mitdiskutieren