1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5.00 out of 5)

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.

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

Next we will style the css.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
#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;
Create a Facebook Icon in CSS was last modified: May 22nd, 2015 by Maximus Mccullough

Subscribe To My YouTube Channel:

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips


Cool People Share:
Create a Facebook Icon in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.