Home > Article > Web Front-end > How to style icon color, size, and shadow using CSS
How to style icon color, size, and shadow using CSS
- 王林forward
- 2023-09-15 21:53:02817browse
Icons are an important part of any website or application because they provide us with 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 unattractive. 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'll learn different ways to style icons in CSS.
Different approaches to icon styling in CSS
Method 1: Using Font Awesome Icons
The first way to style your icons is to use font Awesome Icons, a popular icon font that provides an extensible library of vector icons that can be customized using CSS. Font Awesome icons can come in different colors, sizes, and shades to match the design of your website.
Font Awesome icons are very easy to use. 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">
After including the Font Awesome stylesheet, we can now use any Font Awesome icon in an HTML document using the i tag with the associated class. See the following syntax -
for more detailsgrammar
The following syntax defines the color and text shadow of the i element. The element consists of classes representing HTML icons.
.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 example below, we change the colors of HTML5, CSS3, and Github icons to red, blue, and black respectively. At the same time, the size of all icons is set to 10em, and the text shadows in each icon are orange, sky blue, and gray respectively.
<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 such as border radius, box shadow, and gradient to create an icon-like shape. CSS icons are lightweight, easy to customize, and can be scaled to any size.
grammar
The syntax below demonstrates how to create a CSS icon using a before or after pseudo-element and adding 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 example below, we have added three different icons of different shapes, sizes, and colors. The CSS icon colors are set to light blue, light red, and light green. We also define the size of the icon and the different colors of the box shadow.
<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. It can be customized using CSS to change its color, size, and shadow.
To add SVG icons to your website, you first need to find the SVG icon you want to use. You can find SVG icons on sites like Font Awesome, or you can make your own using vector editing software like Adobe Illustrator or Inkscape.
grammar
The following syntax defines the padding, height and width, and filters of the svg element. We define different colors, sizes and shadows for svg icons.
svg {
fill: green;
width: 50px;
height: 50px;
filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>
Example
In the example below, we use inline SVG code to display the search icon, and CSS to style its color, size, and shadow. Here, the fill attribute is used to change the color of the icon to red, the width and height attributes are used to increase the size of the icon to 50px, and the filter attribute is used to add a 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>
in conclusion
Designing icon colors, sizes and shadows using CSS is a very simple way to give our website or application a custom look. We can use Font Awesome, SVG icons or CSS icons through which we can create unique and visually appealing icons that match the design of our website.
The above is the detailed content of How to style icon color, size, and shadow using CSS. For more information, please follow other related articles on the PHP Chinese website!