HTML CSS examples for CSS Widget:UL Element
List items line up on ul with fontawesome fonts
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style id="compiled-css" type="text/css"> ul {<!--from w ww . ja v a2 s . c om--> list-style:none; } li { margin-bottom:11px; } li.calendar:before { font-family:'FontAwesome'; content:'\f74'; margin:0 6px 0 -36px; color:Chartreuse; } li.map:before { font-family:'FontAwesome'; content:'\f42'; margin:0 6px 0 -36px; color:yellow; } li.map:before, li.calendar:before { display:inline-block; width:19px; } </style> </head> <body> <div class="container" style="width:100%; margin:0;padding:0;"> <ul class="icon" style="margin-left:10%"> <li class="calendar">Lorem ipsum dolor</li> <li class="map">Lorem ipsum dolor sit </li> </ul> </div> </body> </html>