CSS Icon

The CSS icon can be added inside any HTML web page easily by placing CDN link inside <head> section of the project. This CDN link is provided by different icon providers namely font awesome, google icon, bootstrap icon, etc.

Font Awesome Icons

Font Awesome icon can be easily used inside any project. Basically, just go to font awesome official site and sign in & get a code and then add it in the head section of the HTML page.

Statement
    <script src="https://kit.fontawesome.com/{yourcode}.js" crossorigin="anonymous"></script>   
Statement
       <i class="fas fa-cloud"></i>   

The CSS icon can be inserted inside the project very easily. Followings are the popular icon provider like google icon, bootstrap icon & font-awesome.

Let us understand font awesome icon statement.

General Syntax

     <i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
    

Source Code

      
         <i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>      
  

Code Explanation

Note:To insert font awesome inside the project, you have to place a font-awesome js script inside the <head> section of the web page.

Google Icons

Add google icon cdn link inside <head> section of the HTML page.

Statement
   
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">	
   

General Syntax

     <i class="material-icons">cloud</i>
    

Source Code

      
         <i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>      
  

Code Explanation

Note:In this example,google icon cdn link is placed inside the <head> section.

Online Test / Quiz

Our Tutorials

CSS Icon
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS