🔎Magnifying Glass Icon Using HTML5 and CSS3

Salow
January 2, 2022
CSS, Symbol

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!