comment 0

Facebook logo icon with css3

Fiddle with live working example.



Facebook logo icon with css3 only. Without use of any image.

HTML

<div class="facebook-logo-icon">
</div>

CSS

.facebook-logo-icon {
    background: #46629E;
    text-indent: -666em;
    width: 80px;
    height: 90px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    border: 15px solid #46629E;
    border-bottom: 0;
    margin: 0 auto;
}
.facebook-logo-icon::before {
    background: #46629E;
    content:"/20";
    position: absolute;    
    width: 15px;
    height: 70px;
    bottom: -30px;
    right: -17px;
    border: 15px solid #fff;
    border-radius: 20px;
}
.facebook-logo-icon::after {
    background: #fff;
    position: absolute;
    top: 50px;
    content:"/20";    
    width: 45px;    
    height: 15px;  
    right: -5px;
}