CSS Icons

CSS icons can be added inside any HTML web page easily by placing the 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 to the head section of the HTML page.

       
    <script src="https://kit.fontawesome.com/{yourcode}.js" crossorigin="anonymous"></script>

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

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>

Try it now

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.

Bootstrap Icons

To add a bootstrap icon, add the following CDN link inside head the section of the HTML page.

To use the Bootstrap glyph icons, add the following line inside the head section of your HTML page:

     
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">

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>

Try it now

Code Explanation

To use bootstrap glyphicon, place the bootstrap glyphicon CDN link inside the <head> section of the web page.

Google Icons

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

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

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>

Try it now

Code Explanation

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

Online Test / Quiz

Question set 1

CSS Icons

Font Awesome Icons

Bootstrap Icons

Google Icons

Online Test / Quiz

Web Tutorials