Facebook Symbol Using HTML5 and CSS3 VS Code

Salow
January 2, 2022
CSS, Symbol

Social media icons are used to share our pages and links in our website. How to create them using CSS and HTML in VSCode. We can learn them in this Tutorial.

Following is the CSS Class for Facebook Symbol.

.facebook {
  background: blue;
  text-indent: -999em;
  width: 100px;
  height: 110px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 15px solid blue;
  border-bottom: 0;
}
.facebook:before {
  content: "/20";
  position: absolute;
  background: blue;
  width: 40px;
  height: 90px;
  bottom: -30px;
  right: -37px;
  border: 20px solid #eee;
  border-radius: 25px;
}
.facebook:after {
  content: "/20";
  position: absolute;
  width: 55px;
  top: 50px;
  height: 20px;
  background: #eee;
  right: 5px;
}

Here is the output

You can find the complete coding tutorial in the following YouTube Video

Here is the complete code creating Facebook Symbol using HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .facebook {
        background: blue;
        text-indent: -999em;
        width: 100px;
        height: 110px;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        border: 15px solid blue;
        border-bottom: 0;
      }
      .facebook:before {
        content: "/20";
        position: absolute;
        background: blue;
        width: 40px;
        height: 90px;
        bottom: -30px;
        right: -37px;
        border: 20px solid #eee;
        border-radius: 25px;
      }
      .facebook:after {
        content: "/20";
        position: absolute;
        width: 55px;
        top: 50px;
        height: 20px;
        background: #eee;
        right: 5px;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <!-- <div class="content-center"> -->
    <h1 class="h1">Facebook Symbol</h1>
    <div class="facebook"></div>
    <!-- </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!