Learn CSS Icon:(font awesome ,bootstrap font awesome icons)

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

Download
<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

Download
<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

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com