FontAwesome

by Laurie

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="timeline">
<i class="fa fa-thumbs-o-up fa-5x"></i>
    <i class="fa fa-book fa-5x"></i>
    <i class="fa fa-pencil fa-5x"></i>
    <i class="fa fa-trophy fa-5x"></i>
  
    
</div>



<br/><br/><br/><br/><br/><br/><br/>

<i class="fa fa-circle fa-2x" style="color:#28A628;"></i>

<i class="fa fa-circle fa-2x" style="color:#FFCC00;"></i>

<i class="fa fa-circle fa-2x" style="color:#CF0000;"></i>

<i class="fa fa-check fa-2x" style="color:#1E90FF;"></i>

<br> 
 <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>

<br>
 <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
<br>
    
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
<br>
         <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>

<br>
         <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star-o fa-2x" ></i>

<br>
    
         <i class="fa fa-star fa-2x fa-custom" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
     <i class="fa fa-star fa-2x" ></i>
    
 <br/>
    <i class="fa fa-toggle-on fa-2x" ></i>
    <br/>
    
        <i class="fa fa-toggle-off fa-2x" ></i>

CSS

.timeline{
   background-color:#E9F0F5;
    border:3px #D7E4ED solid;
}

.timeline::before{
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 4px;
  width: 100%;
  background: #d7e4ed;
    top:100px;
}
.timeline i{
		border-radius: 50%;
	margin: 0.15em;
	font-size: 3em;
	background:#1E90FF;
      padding: 0.25em 0.25em;
    border:5px #ffffff solid;
     color:#ffffff;
    font-size:5em;
    box-shadow:0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05)
}


.fa-star-o{
color:#808080
}

.fa-star{
    color:#FFD700
}

.fa-custom{
font-size:5em;

}