Connect with us!
🔎Magnifying Glass Icon Using HTML5 and CSS3
Magnifying-glass icon is usually recognized as a search tool. We will design magnifying glass using CSS which can be implemented in the websites for search feature.
Following is the CSS Class for 🔎Magnifying Glass.
.magnifying-glass {
border: 0.1em solid yellowgreen; /*springgreen salmon sandybrown*/
font-size: 10em;
width: 0.4em;
height: 0.4em;
position: relative;
border-radius: 0.35em;
}
.magnifying-glass::before {
content: "";
background: yellowgreen;
position: absolute;
right: -0.25em;
bottom: -0.1em;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}Following is the output of 🔎Magnifying Glass
You can find the complete coding in Visual Studio Code tutorial in the following YouTube Video.
Here is the complete code for creating 🔎Magnifying Glass Symbol using HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.magnifying-glass {
border: 0.1em solid yellowgreen; /*springgreen salmon sandybrown*/
font-size: 10em;
width: 0.4em;
height: 0.4em;
position: relative;
border-radius: 0.35em;
}
.magnifying-glass::before {
content: "";
background: yellowgreen;
position: absolute;
right: -0.25em;
bottom: -0.1em;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1 class="h1">Magnifying Glass Symbol</h1>
<div class="magnifying-glass"></div>
</body>
</html>Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!
See you in another tutorial!
