Pimp je listitems via Fontawesome en CSS
Voor het maken van de onderstaande listitems heb je tegenwoordig geen photoshop meer nodig. Alles wat je nodig hebt is fontawesome en beetje css.
- listitem 1
- listitem 2
- listitem 3
Hieronder wordt in een paar stappen beschreven hoe je dit kunt doen.
Stap 1: Laadt Fontawesome in je pagina.
Download de stylesheet of gebruik de CDN link. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Stap 2: Bemachtig de unicode van het icoontje
Ga naar http://fortawesome.github.io/Font-Awesome/icons/ en klik op het gewenste listitems icoontje. Op deze pagina onder de afbeeldingen kun je de unicode van het icoontje verkrijgen. Kopieer deze vervolgens. 
Stap 3: Maak de volgende css aan in je stylesheet.
ul.bullets{
list-style-type: none;
padding:0;
margin:0;
}
ul.bullets li{
padding:5px 10px;
}
ul.bullets li:before {
content: '\[Jouw unicode]';
font-family: 'FontAwesome';
float: left;
color: #ADDF3F;
font-size: 1.2em;
margin-right: 20px;
}
Stap 4: Geef je listing de klasse naam van je stylesheet
In dit geval <ul class="bullets"> <li>listitem 1</li> <li>listitem 2</li> <li>listitem 3</li> </ul>
En je pagina’s zien er weer een stukje beter uit.
