CSS Icons
CSS Icons are icons that are created using CSS rather than traditional image files. They can be created using a combination of CSS properties such as borders, gradients, and shadows. Because they are created using code rather than images, they can be easily customized and scaled without losing quality.
How Do CSS Icons Work
CSS Icons work by using a combination of CSS properties to create shapes and designs. The most common properties used to create CSS icons are border-radius, box-shadow, gradients, and transform. By using these properties in combination, designers can create complex and unique shapes that can be used as icons.
One of the benefits of using CSS icon is that they are lightweight and don’t require additional HTTP requests to load. This means that web pages can load faster and be more efficient. Additionally, because they are created using code, they can be easily customized to match the branding or design of a website.
Here is how Icons looks like:
How to Add CSS Icons
The simple and easy way to add Icons on your HTML page is by using an icon library. There are many CSS icon libraries available that provide pre-built CSS icon that can be easily customized and used on your website. Some popular libraries include Font Awesome and Material Icons.
In order to add an icon, we have to add the name of the specified icon class to any inline HTML element (like <i>).
Font Awesome Icons
To use the Font Awesome icons, go to fontawesome, sign up, and get a code. Then add that code in the <head> section of your HTML page. Like this:
<head>
<script src="https://kit.fontawesome.com/3cbf19079b.js" crossorigin="anonymous"></script>
</head>In an example below, let’s write a code to see how you can use CSS Icon on your HTML page:
Example
<!DOCTYPE html> <html> <head> <title>CSS Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/3cbf19079b.js" crossorigin="anonymous"> </script> <!--Get your own code at fontawesome.com--> </head> <body> <h1>Some Font Awesome icons:</h1> <i class="fas fa-code"></i> <i class="fas fa-user"></i> <i class="fas fa-car"></i> <i class="fas fa-heart"></i> <i class="fas fa-cloud"></i> </body> </html>
We can also change the color and size of our font awesome Icons.
Example
<!DOCTYPE html> <html> <head> <title>CSS Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/3cbf19079b.js" crossorigin="anonymous"> </script> </head> <body> <h1>Styled Font Awesome icons:</h1> <i class="fas fa-code" style="font-size:28px; color:powderblue;"></i> <i class="fas fa-user" style="font-size:20px; color:black;"></i> <i class="fas fa-car" style="font-size:35px; color:crimson;"></i> <i class="fas fa-heart" style="font-size:24px; color:red;"></i> <i class="fas fa-cloud" style="font-size:30px; color:lightblue;"></i> </body> </html>
Bootstrap Icons
To use the Bootstrap glyphicons, we have to add the following line of code inside the <head> section of our HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Here is how we can use Bootstrap Icons in our HTML Page.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <h1>CSS Bootstrap Icons:</h1> <i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-thumbs-up"></i> <i class="glyphicon glyphicon-heart"></i> <i class="glyphicon glyphicon-envelope"></i> <i class="glyphicon glyphicon-cloud"></i> </body> </html>
Share This Post!
