CSS-Icons
CSS Icons
- CSS icons are created and styled using Cascading Style Sheets
- They are often used in web design to add decorative or functional icons to a website without the need for image files.
- CSS icons have several advantages, including scalability, easy customization, and reduced page load times.
Icon libraries in CSS:
- Bootstrap icons
- Font Awesome icons
- Google icons
It is not necessary to install the libraries
Font Awesome icons
- Font Awesome is one of the most well-known and widely used icon libraries.
- It provides a collection of scalable vector icons that can be easily customized and styled using CSS classes. Icons are available in both free and paid versions.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https:
//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
text-align: center;
background-color: lightblue;
}
.fa {
color: red;
font-size: 50px;
margin: 10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Font Awesome Library</h1>
<i class="fa fa-cloud"></i>
<i class="fa fa-file"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"< /i>
</body>
</html>
Output:
Bootstrap icons
- Similar to the font awesome library, we can add the bootstrap icons in our HTML page using the link given below in the <head></head> section.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
text-align: center;
background-color: lightblue;
}
.glyphicon {
color: red;
font-size: 50px;
margin: 10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Bootstrap icons</h1>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-file"></i>
<i class="glyphicon glyphicon-heart"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-envelope"></i>
</body>
</html>
Output:
Google icons
- Similar to the above libraries, we can add it to our HTML page simply by adding the link given below in the <head></head> section.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Icons</title>
<link rel="stylesheet" href="https: //fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
text-align: center;
background-color: lightblue;
}
.material-icons {
color: red;
font-size: 50px;
margin: 10px;
}
</style>
</head>
<body style="text-align:center">
<h1>Google icons</h1>
<i class="material-icons">cloud</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">favorite</i>
<i class="material-icons">traffic</i>
</body>
</html>
Output: