Create a Facebook Icon in CSS

Message from Maximus

Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

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

<div id="facebook"></div>

Next we will style the css.

<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>