Try it Live

<!DOCTYPE html>
<html>
 <head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <style>
 #icon {
	 font-size: 50px; 
	 margin:10px 20px; 
	 color: teal;
 }
 
 h2 {
	 text-align:center;
	 font-family: georgia;
	 }
 </style>
 </head>
 <body>
 <h2>Bootstrap Icons</h2>
 - Home Icon 
 - Phone Icon 
 - Music Icon 
 - Trash Icon 
 - Book Icon 
 - Camera Icon 
 - Apple Icon 
 - Education Icon 
 - Zoom-in Icon 
 - Zoom-out Icon
 </body>
</html>

​x
 
<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
   <style>
     #icon {
      font-size: 50px; 
      margin:10px 20px; 
      color: teal;
     }
     
     h2 {
      text-align:center;
      font-family: georgia;
     }
    </style>
  </head>
  <body>
    <h2>Bootstrap Icons</h2>
      <i class="glyphicon glyphicon-home"  id="icon"></i> - Home Icon<br>
      <i class="glyphicon glyphicon-phone" id="icon"></i> - Phone Icon<br>
      <i class="glyphicon glyphicon-music" id="icon"></i> - Music Icon<br>
      <i class="glyphicon glyphicon-trash" id="icon"></i> - Trash Icon<br>
      <i class="glyphicon glyphicon-book" id="icon"></i> - Book Icon<br>
      <i class="glyphicon glyphicon-camera" id="icon"></i> - Camera Icon<br>
      <i class="glyphicon glyphicon-apple" id="icon"></i> - Apple Icon<br>
      <i class="glyphicon glyphicon-education" id="icon"></i> - Education Icon<br>
      <i class="glyphicon glyphicon-zoom-in" id="icon"></i> - Zoom-in Icon<br>
      <i class="glyphicon glyphicon-zoom-out" id="icon"></i> - Zoom-out Icon
  </body>
</html>
​