šŸ”Ž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

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!