How to Make a Facebook Icon Using Only CSS & HTML (no images)
Let’s say you want to include a Facebook icon on your web page, so everyone can share the sheer awesomeness that it is. The only thing is, you’re really concerned about forcing users to download images, or maybe you don’t want to upset the almighty Google Pagespeed by adding anything to the page at all that might slow things down.
Well it just so happens that I’ve come up with a way to create the Facebook icon without any images at all, using just one HTML element and around 500 bytes of CSS (ie, not that much).
You can follow the link above to grab the HTML & CSS all for yourself, but I’ll provide a little writeup of what we’re doing here. It’s all basic CSS, but might be a good primer for beginners.
The HTML
<p class="logo">Facebook</p>
Keeping our HTML simple is all the rage these days. We could have perhaps done this more easily with more tags, but did you know that with pseudo elements in CSS, one tag actually becomes three usable blocks?
That moves us on to our CSS…
The CSS
As mentioned above, using .logo:before and .logo:after CSS means we’ve got three different tags to work with instead of just one. When I look at Facebook’s icon, I see essentially three boxes, as per the sketch below:
The blue background (outlined in red) is the containing box, the stem of the “F” is another (green), and the cross bar of the “F” is the final (yellow).Firstly, we create the main blue box, give it a little roundness to the edges, and make sure nothing that drifts outside of that box will be shown. Here’s the code I used with some inline comments to clarify exactly what’s going on:
.logo {
background: #4661b0; /* make it "Facebook blue" */
text-indent: -999em; /* Back the actual text in the paragraph tag out of the element */
width: 100px; /* Make it nice and big */
height: 110px; /* The tag is 10px larger because of how we're handling the borders below */
border-radius: 3px; /* for that oh so important modern look */
position: relative; /* so we can position our other elements absolutely */
overflow: hidden; /* so we can hide any overflow those elements will have */
border: 15px solid #4661b0; /* so we can make it look like the F is not butting up against the right side of the box */
border-bottom: 0; /* removing the border here though, because the F does touch the bottom of the box */
}Now lets move on to the “F” itself, which is created using both of our pseudo elements. First, the main trunk of the letter:
.logo:before {
content: "/20"; /* Psuedo elements need something for content, this means a blank space */
position: absolute; /* So we can position it exactly where we want it */
background: #4661b0; /* make the box the same Facebook blue */
width: 40px; /* setup the right width, which actually extends the box outside of the containing element (along with our positioning below) */
height: 90px; /* this also extends the trunk outside of the main box */
bottom: -30px; /* as mentioned above, we pull the box we're using to create the trunk of the F down to hide some of it, because it will have rounded corners on all sides */
right: -37px; /* similar to what we're doing with bottom above */
border: 20px solid white; /* make the remaining visible border white and thick enough to look right */
border-radius: 25px; /* now give the top right visible corner the necessary curve */
}All we need now is the crossing bar to complete the “F”.
.after {
content: "/20"; /* again, pseudo elements need content to be visible */
position: absolute; /* and we're going to want to position absolutely */
width: 55px; /* the desired width of the box to make the bar long enough */
top: 50px; /* set it in the proper location */
height: 20px; /* make it thick enough */
background: white; /* and the right color */
right: 5px; /* then back it up from the edge of the containing block a bit */
}Voila! There you have it.
Enjoy. 🙂
Up Next: Google's Search Results Explained