Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style icon color, size, and shadow by using CSS
Icons are an essential part of any website or application, as they give us a quick and easy way for users to understand and interact with the content. However, using default icons can make a website look generic and unappealing. Using CSS, we can style icon color, size, and shadow to create a unique and visually appealing user experience.
In this article, we will learn how to style icon color, size, and shadow using CSS. We will learn the different methods to style the icons in CSS.
Different Methods to Style Icons in CSS
Method 1: Using Font Awesome Icons
The first method to style icons will be using the font awesome icons which is a popular icon font that provides a library of scalable vector icons which are customizable using CSS. Font Awesome icons can be used with different colors, sizes, and shadows to match with the design of the website.
The usage of Font Awesome icons is very easy. First we need to include the Font Awesome stylesheet in our HTML document by adding the following code in the head section −
<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Once you have included the Font Awesome stylesheet, we can now use any of the Font Awesome icons in our HTML document using the i tag with the relevant class. See the following syntax for more details −
Syntax
The below syntax defines the color and text-shadow to an i element. The <i> element consists of the class that represents the HTML icon.
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
Example
In the below example, we have changed the color of the HTML5, CSS3, and Github icon to red, blue, and black respectively. Along with this, the size of all icons is set to 10em, and the text shadow of orange, skyblue, and gray respectively in each icon.
<html>
<head>
<title>Font Awesome icons styling using CSS</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-1 {
color: red;
text-shadow: 2px 2px 2px orange;
}
.icon-2 {
color: blue;
text-shadow: 2px 2px 2px skyblue;
}
.icon-3 {
color: black;
text-shadow: 2px 2px 2px gray;
}
.fa { font-size: 10em;}
</style>
</head>
<body>
<h2>Styling Font Awesome Icons using CSS</h2>
<div class="icon-1">
<i class="fa fa-html5" aria-hidden="true"></i>
</div>
<div class="icon-2">
<i class="fa fa-css3" aria-hidden="true"></i>
</div>
<div class="icon-3">
<i class="fa fa-github" aria-hidden="true"></i>
</div>
</body>
</html>
Method 2: Using CSS Icons
CSS icons are another way to add icons to your website. CSS icons are created using CSS properties like border-radius, box-shadow, and gradients to create shapes that resemble icons. CSS icons are lightweight, easy to customize, and can be scaled to any size.
Syntax
The below syntax demonstrates how to create a CSS icon, and win this we use the before or after pseudo-elements and add the relevant CSS properties.
.icon {
position: relative;
width: 50px;
height: 40px;
background-color: lightgreen;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 30px;
background-color: green;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
<div class="icon"></div>
Example
In the below example, we have added three different icons of different shape, size, and color. The color of the CSS icon is set to lightblue, lightred, and lightgreen. We have also defined the size of the icons and a box shadow with different colors.
<html>
<head>
<title>CSS icons styling using CSS</title>
<style>
.container {
display: flex;
gap: 10px;
align-items: center
}
.icon-1 {
position: relative;
width: 50px;
height: 50px;
background-color: lightblue;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-1:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
background-color: blue;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-2 {
position: relative;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: lightgreen;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-2:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 40px;
border-radius: 50px;
background-color: green;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-3 {
position: relative;
width: 50px;
height: 40px;
background-color: lightred;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.icon-3:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 40px;
height: 30px;
background-color: red;
box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h2>CSS icons styling using CSS</h2>
<div class="container">
<div class="icon-1"></div>
<div class="icon-2"></div>
<div class="icon-3"></div>
</div>
</body>
</html>
Method 3: Using SVG Icons
SVG (Scalable Vector Graphics) icons are another popular way to add icons to your website. SVG icons are vector-based, which means they can be scaled to any size without losing quality. They can be customized using CSS to change their color, size, and shadow.
To add an SVG icon to your website, you first need to find an SVG icon that you want to use. You can find SVG icons on websites like Font Awesome or make your own using vector editing software like Adobe Illustrator or Inkscape.
Syntax
The below syntax defines the fill, height & width and filter to an svg element. We have defined the different color, size, and drop-shadow to the svg icon.
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>
Example
In the below example, we have used inline SVG code to display the search icon and used CSS to style its color, size, and shadow. Here, the fill property is used to change the color of the icon to red, the width and height properties are used to increase the size of the icon to 50px, and the filter property is used to add a drop shadow to the icon.
<html>
<head>
<title>SVG Icon styling using CSS</title>
<style>
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
</style>
</head>
<body>
<h2>SVG Icon styling using CSS</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16.007 4c-3.308 0-6 2.692-6 6 0 .463.052.912.142 1.346l-7.264 7.264a1.5 1.5 0 0 0 2.122 2.122l7.264-7.264A5.933 5.933 0 0 0 16.007 16c3.308 0 6-2.692 6-6s-2.692-6-6-6zm0 10a3.999 3.999 0 0 1-3.998-3.98c0-2.209 1.79-3.998 3.998-3.998s3.998 1.79 3.998 3.998c0 2.209-1.79 3.98-3.998 3.98z"/>
</svg>
</body>
</html>
Conclusion
Styling icon color, size, and shadow using CSS is a very simple method to have a custom look for our website or application. We can use either the Font Awesome, SVG icons, or CSS icons, with which we can create unique and visually appealing icons that match the design of our website.
2K+ Views
