CSS Icons
CSS Icons
CSS icons are specified like a symbol or image used inside a computer interface assign to any element. CSS icons are the graphical depiction of any program or file that supports users to recognize the file type quickly.
It is a comfortable way of inserting icons to any HTML page by using an icon library. It is feasible to format an icon library with the use of CSS. We may customize any icon based on their size, shadow, and color.
Here we are mentioning some of the essential icon libraries like Google icons, Font Awesome icons, and Bootstrap icons that may be used efficiently inside the CSS. We don’t need to download or install these icon libraries.
Description of the above libraries is as follows:
Font Awesome icons
We have to insert a link to use font awesome icons library. This link will be defined in the <head> section, which is mentioned below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Let’s take an example below:
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: lime; } .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
Similarly, we have to insert a link inside the HTML page to use this icons library. This link will be defined in the <head> section which is mentioned below:
<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: lime; } .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
Same as the above mentioned libraries, we have to insert a link inside the HTML page to use this icon library. This link will be defined in the <head> section which is mentioned below:
<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: lime; } .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: