• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
CSS Basic
0/1
What is CSS?
00:00
Ways To Add CSS
0/4
Introduction
00:00
Inline CSS
00:00
Internal CSS
00:00
External CSS
00:00
CSS Colors
0/6
Named Colors
00:00
Hexadecimal Colors
00:00
RGB Colors
00:00
RGBA Colors
00:00
HSL Colors
00:00
HSLA Colors
00:00
CSS Selectors
0/1
Introduction
00:00
CSS Comments
0/1
Introduction
CSS Text Formatting
0/1
Various types of Text Formatting
00:00
CSS Backgrounds
0/1
Introduction
00:00
CSS Borders
0/1
Introduction
CSS Outline
0/1
Introduction
00:00
CSS Fonts
0/1
Font Family
00:00
CSS Height and Width
0/1
Introduction
00:00
CSS Margins and Paddings
0/2
CSS Margin
00:00
CSS Padding
00:00
CSS Box Models
0/1
What is CSS Box Model?
00:00
CSS Align
0/5
Text Alignment (text-align)
00:00
Horizontal Centering (margin and auto)
00:00
Vertical Alignment
00:00
Grid Centering
00:00
Table Cell Alignment (vertical-align for table cells)
00:00
CSS Icons
0/1
Introduction
00:00
CSS Links
0/1
Introduction
00:00
CSS Lists
0/1
Introduction
00:00
CSS Tables
0/1
Introduction
00:00
CSS Gradient
0/4
How to use CSS Gradients and its Types
00:00
Linear Gradients
00:00
Radial Gradients
00:00
Conic Gradients
00:00
CSS Display Properties
0/1
Introduction
00:00
CSS Max-Width Property
0/1
Introduction
00:00
CSS Positioning Elements
0/1
Introduction
00:00
CSS Z-Index Property
0/1
Introduction
00:00
CSS Overflow
0/1
Introduction
00:00
CSS Float
0/1
Introduction
00:00
CSS Opacity
0/1
Introduction
00:00
CSS Pseudo-classes
0/1
Various Types of Pseudo-classes
00:00
CSS Pseudo-Elements
0/1
Various Types of Pseudo-Elements
00:00
CSS Forms
0/1
Introduction
00:00
CSS Flexbox
0/3
Introduction
00:00
Container Properties
00:00
Item Properties
00:00
CSS Nav
0/2
How to create Vertical Navbar using CSS?
00:00
How to create Horizontal Navbar using CSS?
00:00
CSS Dropdowns
0/1
Dropdown Creation
00:00
CSS Buttons
0/1
Introduction
00:00
CSS Cards
0/1
How to create Cards using CSS?
00:00
CSS Image Gallery
0/1
How create an image Gallery using css?
00:00
CSS Media Queries
0/1
Introduction
00:00
CSS Variables
0/1
What is CSS Variables
00:00
CSS 2D Transforms
0/1
Various types of 2D Transforms
00:00
CSS 3D Transforms
0/1
Various types of 3D Transforms
00:00
CSS Transition
0/1
Types of CSS Transition
00:00
CSS Animation
0/8
What are CSS Animations
00:00
The @keyframes Rule
00:00
Animation Duration
00:00
Animation Delay
00:00
Animation Iteration Count
00:00
Animation Direction
00:00
Animation Timing Function
00:00
Animation Shorthand property
00:00
Math Functions and Masking
0/4
calc() Function in CSS
00:00
max() Function in CSS:
00:00
min() Function in CSS
00:00
Masking in CSS
00:00
CSS
About Lesson

We can Add icons to our HTML Page by using Icon Library. https://fontawesome.com is one of the famous library used to add icons in HTML & CSS.

Steps to Add Icons using Font Awesome Icons:

Before Adding Icon kits you need to create a free Icons kit in Font Awesome Icons by login in https://fontawesome.com

  1. Add a Font Awesome Kit using just one line of javascript.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
      <meta charset=”UTF-8″>
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
        <script src=”https://kit.fontawesome.com/ee7f5a487f.js” crossorigin=”anonymous”></script>
      <title>Font Awesome Example</title>
    </head>
    <body>
      <!– Your content goes here –>
    </body>
    </html>

    In this step, we include the Font Awesome CSS file in the <head> of our HTML document using a CDN. This file contains styles for all the Font Awesome icon

  2. Add Font Awesome Icon to HTML

     
    <body>
        <div class=”icon-container”>
            <i class=”fas fa-heart”></i>
            <span>Like</span>
        </div>
        <br>
        <br>
        <i class=”fa-solid fa-gift” id=”gift”></i>
        <br>
        <br>

        <i class=”fa-solid fa-tree” id=”tree”></i>
    </body>

    Here, we’ve added  different icons like heart icon, gift icon, tree icon inside the body.

  3. Style the Icon Container (Optional)

     
     

        <style>
            .icon-container {
                color: red;
                font-size: 50px;
                text-align: center;
            }

            #gift {
                color: blueviolet;
                font-size: 80px;

            }
            #tree{
                color: green;
                font-size: 80px;

            }
        </style>
     

    You can style the icons using CSS to control its appearance. In this example, we’ve used text-align to align center or we can change the color of icons also.

 

Output:

Previous
Next