Create a Facebook Icon in CSS

The first thing that we will do is set up or div to create a facebook icon in CSS.

[code]<div id="facebook"></div>[/code]

Next we will style the css.

[code]<style>
#facebook {
background: blue;
text-indent: -999em;
width: 100px;
height: 110px;
border-radius: 5px;
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 #fff;
border-radius: 25px;
}
#facebook::after {
content: "/20";
position: absolute;
width: 55px;
top: 50px;
height: 20px;
background: #fff;
right: 5px;
}
</style>[/code]