...

Web Technologies - CSS

Back to Course

Lesson Description


Lession - #191 CSS Icons


Icons from Google

As with the previous libraries, we can include it in our HTML page by simply including the link provided below in the <head></head> section.
        
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
        
    
Let's understand it with an Example.

<!DOCTYPE html>   
<html>   
        
<head>   
<title>CSS Icons</title>  
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
<style>  
body{  
text-align:center;  
background-color:lightblue;  
}  
.material-icons{  
color:red;  
font-size:50px;  
margin:10px;  
}  
</style>  
</head>   
<body style="text-align:center">   
<h1>Google icons</h1>  
      <span class="material-icons">
account_circle
</span> 
    <span class="material-icons">
touch_app
</span> 
 <span class="material-icons">
flight_takeoff
</span>
   <span class="material-icons">
rocket_launch
</span> 
      <i class="material-icons">traffic</i>     
</body>   
</html>    




Output:
Sorry cannot be displayed
Try it here

Icons for Bootstrap

As with the font awesome library, we can include the bootstrap icons in our HTML page by including the link below in the <head></head> section.
        
<link rel="stylesheet"   
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
        
    
Let's understand it with an Example.

<!DOCTYPE html>   
<html>   
        
<head>   
<title>CSS Icons</title>  
<link rel="stylesheet"   
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<style>  
body{  
text-align:center;  

}  
.glyphicon{  
color:#9400d3;  
font-size:50px;  
margin:10px;  
}  
</style>  
</head>   
<body style="text-align:center">   
<h1>Bootstrap icons</h1>  
      <i class="glyphicon glyphicon-calendar"></i>   
      <i class="glyphicon glyphicon-camera"></i>   
      <i class="glyphicon glyphicon-education"></i>   
      <i class="glyphicon glyphicon-tags"></i>   <br>
      <i class="glyphicon glyphicon-tree-conifer"></i>   
      <i class="glyphicon glyphicon-picture"></i>  
      <i class="glyphicon glyphicon-music"></i>   
    <i class="glyphicon glyphicon-music"></i>
</body>   
</html> 




Output:
Sorry cannot be displayed
Try it here