Learn HTML
CSS Introduction
CSS Basic Syntax
CSS Selector
CSS Units
CSS Text
CSS Border
CSS Outline
CSS Padding
CSS Margin
CSS Height & Width
CSS Overflow
CSS Resize
CSS Background
CSS Box Sizing
CSS Position
CSS Float
CSS Clear
CSS Clip Path & Shape Outside
CSS Display
CSS Media Queries
CSS Pseudo Classes & Elements
CSS Filter
CSS Transition
CSS Transform
CSS Animation
CSS List Style
CSS Table
CSS Scrollbar Styling
CSS Icon
CSS Cursor
CSS Variable & Calc
CSS User Select
CSS Flexbox
Learn Javascript
Learn Django
Everything about css icon
We see different icon in a webpage. You can also add icons in your webpage. It is very easy and simple.
How to add icon in a webpage?
Look there are lot of websites which have font gallery. Most used icon gallery website is font awesome.com.
Here we will use icons from this website. You can use any website.
step:1
Create an account in font awesome website.
Step:2
Now write the given cdn path inside head tag.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
you can also get this cdn path in the font awesome website.
Step:3
Now go to icon section of the website and search which one you want.
Step:4
Now click on the icon that you want.
After clicking you will see this:
Now copy the code from green marked area and paste in the HTML page where you want the icon. The work is done.
<html>
<head>
<title> </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<i class="ffa fa-home myIcon"></i>
</body>
</html>
How change css of icon?
The process is easy. Use a class name inside i tag and using the class name write css
<html>
<head>
<title> </title>
<style>
.myIcon{
background-color:green;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<i class="fa fa-home myIcon"></i>
</body>
</html>