Page Title

It's Time to learn with Pude!

Hello! It's time to learn with Pude (that's me😁). Today, we are going to learn how to insert icons into our code. A lot of people ask me this question, so I have decided to code the answer.

INTRODUCTION

CSS Icons

Adding Icons to our HTML page is easy. We just have to use some Icon Libraries such as Font Awesome, Bootstrap Icons and Material Icons by Google to acheive that.
To add icons to our page, we should use HTML inline elements such as  or  tag. Please make sure you have internet connection when dealing with icons.

FONT AWESOME ICONS

Inserting Font-Awesome Icons to code

To use Font Awesome Icons, we first of all need to include the library to our HTML page using the <link> tag together with the href attribute which will contain the <url> of the library.
This is the Library URL for Font-Awesome Icons: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
Please note, the <link> tag should be nested in the <head> element.


           <!DOCTYPE html>
           

            <html>
            

             <head>
             

              <title>Example</title>
               

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
                

                
                 </head>
                 

                 </html>

The next step is to visit www.fontawesome.com. Copy the icon name and paste it in your code. But that's not all. You have to put the icon name in an HTML Inline element such as  followed by the class attribute, then comes the icon name. If you are using Font Awesome Icons, you'd probably want to put this before your icon name👉: fa fa-

Example:


                 <!DOCTYPE html>
           

            <html>
            

             <head>
             

              <title>Example</title>
               

                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
                

                
                 </head>
                 
                 

                   <body>
                   

                     <i class="fa fa-android"></i>
                     

                    <i class="fa fa-save"></i>  
                   
  <i  class="fa fa-heart"></i>
                     

                      </body>
</html>

Output: output

BOOTSTRAP ICONS

Inserting Bootstrap Icons to code

To use Bootstrap Icons, we first of all need to include the library to our HTML page using the <link> tag together with the href attribute which will contain the <url> of the library.
This is the Library URL for Bootstrap Icons: "https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.7/css/bootstrap.min.css"
Please note, the <link> tag should be nested in the <head> element.


           <!DOCTYPE html>
           

            <html>
            

             <head>
             

              <title>Example</title>
               

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
                

                
                 </head>
                 

                 </html>

The next step is to visit www.bootstrapicons.com. Copy the icon name and paste it in your code. But that's not all. You have to put the icon name in an HTML Inline element such as  followed by the class attribute, then comes the icon name. If you are using Bootstrap Icons, you'd probably want to put this before your icon name👉: glyphicon glyphicon-

Example:


                 <!DOCTYPE html>
           

            <html>
            

             <head>
             

              <title>Example</title>
               

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
                

                
                 </head>
                 
                 

                   <body>
                   

                     <i class="glyphicon glyphicon-arrow-left"></i>
                     

                    <i class="glyphicon glyphicon-ok"></i>  
                   
  <i  class="glyphicon glyphicon-eye-close"></i>
                     

                      </body>
</html>

Output: output

MATERIAL ICONS

Inserting Material Icons to code

To use Material Icons, we first of all need to include the library to our HTML page using the <link> tag together with the href attribute which will contain the <url> of the library.
This is the Library URL for Material Icons: "https://fonts.googleapis.com/icon?family=Material+Icons"
Please note, the <link> tag should be nested in the <head> element.


           <!DOCTYPE html>
           

            <html>
            

             <head>
             

              <title>Example</title>
               

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

                
                 </head>
                 

                 </html>

The next step is to visit www.materialicons.com. Copy the icon name and paste it in your code. Create an HTML Inline element such as  followed by the class attribute, then comes the icon name. If you are using Material Icons, the icon name does not go inside the  tag, it is nested outside the tag, that is, in between the opening and closing  tag. But this goes inside the  tag👉: material-icons

Example:


                 <!DOCTYPE html>
           

            <html>
            

             <head>
             

              <title>Example</title>
               

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

                
                 </head>
                 
                 

                   <body>
                   

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

                    <i class="material-icons">face</i>  
                   
  <i  class="material-icons">favorite</i>
                     

                      </body>
</html>

Output: output

💞Easy | How to Insert CSS Icons into your code