Charming social media icons with Font Awesome and CSS3

Posted on by

In this blog post I’ll show you how to create and style social media icons (Facebook, Twitter, Google Plus, etc.) easily for your site using Font Awesome font icons.

Font Awesome provides an iconset as a TrueType font, meaning that you can render and manipulate icons as you would manipulate text with CSS. Each letter corresponds one icon – think Microsoft Windows Wingdings fonts. Icon set is large and the theme is webby, so you’ll find an icon for all your website needs.

Font Awesome goes down well with popular Twitter Bootstrap CSS & JS library as it has  compatible HTML5 markup and icon naming conventions, though it can be used separately too.

Screen Shot 2013-04-22 at 9.53.26 PM

Update: heard that there is might be an issue with Microsoft Windows and Google Chrome to render these icons. I am seeing if there is a workaround for that and what triggers the condition. Font Awesome has subpixel hinting and should be pixel perfect at 14 px. I’ll post more info when I have time to further take a look on this issue.

1. Why to use it?

Approach presented here is simply superior to any other approach.

Pros

  • Colors can be adjusted with CSS3, with gradients and all that bling bling
  • Scalable graphics
  • High DPI (“retina”) compatible
  • Simple HTML markup: just <i class=”icon icon-foo”></i>. No CSS sprite preprocessing or other workflow complications needed.
  • Can be animated with CSS3 transitions
  • Easily match the link text color for monotone icons
  • FontAwesome can be served from CDN – no need to drop any files on your hosting as bootstrapcdn.com content delivery network hosts the files for you
  • Works with legacy browsers (IE7+)

Cons

  • These icons might not be exactly in the line with the brand guidelines of the service. But these guidelines are mostly guidelining, feel free to ignore them like the other 100000+ websites out there do.
  • Pixel pushing artists become sad
  • Does not work outside browser context: email, RSS

2. Example

Below you see a live <iframe> example. The example tries to be straightforward: you could further make icons look better by e.g. fine-tuning border style and using gradients instead of plain color backgrounds.

See source code on Github.

Source code: HTML (for the latest version please see Github)

  <!doctype html>
  <html>

    <head>

        <!-- Load Bootstrap and FontAwesome CDN'ed from bootstrapcdn.com -->
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />

        <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />

        <link href="style.css" rel="stylesheet" />

    </head>
    <body>

        <div class= "container">

            <h1><i></i>FontAwesome and CSS social icons example<i></i></h1>

            <p>Social media icons created FontAwesome and styled with CSS3. Example is 100% image free, scalable and high DPI compatible.</p>

            <div id="social-bar">
                <a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
                    <i></i>
                    <span>Facebook</span>
                </a>
                <a href="https://twitter.com/moo9000">
                    <i></i>
                    <span>Twitter</span>
                </a>
                <a href="https://plus.google.com/103323677227728078543/">
                    <i></i>
                    <span>Google Plus</span>
                </a>
                <a href="http://opensourcehacker.com/">
                    <i></i>
                    <span>Blog</span>
                </a>
            </div>

        </div>

        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    </body>
</html>

Source code: CSS (for the latest version please see Github)

.container {
    width: 620px;
}

h1 {
    font-size: 25px;
}

h1 .icon:first-child {
    margin-right: 0.5em;
}

h1 .icon:last-child {
    margin-left: 0.5em;
}

/* Create square icons, white logo on colored background */

#social-bar .icon {
    color: white;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    min-width: 27px;
    line-height: 27px;
    text-align: center;
}

#social-bar a {
    margin-right: 5px;
    padding: 5px; /* Increase hit rectangle for touch devices */
}

#social-bar a:first-child {
    padding-left: 0;
}

/* Set icon color related to the service */

#social-bar a span {
    margin-left: 5px;
}

#social-bar .icon-rss {
    background: #e5842f;
}

#social-bar .icon-facebook {
    background: #3B5998;
}

#social-bar .icon-twitter {
    background: #00ACED;
}

#social-bar .icon-google-plus {
    background: #E14107;
}

/* Don't underline icon etc. */
#social-bar a:hover {
    text-decoration: none;
}

#social-bar a:hover span {
    text-decoration: underline;
    color: #333333; /* Match icon highlight color */
}

/* Animate mouse hover */
#social-bar a .icon {
   transition: background 0.5s;
}

#social-bar a:hover .icon {
    background: #333333;
    transition: background 0.5s;
}

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

5 thoughts on “Charming social media icons with Font Awesome and CSS3”

  1. Wow… These icons created with font awesome are awesome. I’ll surely use it ASAP 🙂
    Simple markup. Thanks a lot

  5. thank you for information, do you know how to make social icon of tripadvisor, I been looking through the internet but difficult to find the tutorial, your advise will be helpful

Leave a Reply

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