Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing
Sivard.nl
Van idee naar online oplossing

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. fontawesome_listitems

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.

Geplaatst in Blog, Cascading style sheets
Tags: , , ,