Charming social media icons with Font Awesome and CSS3
Charming social media icons with Font Awesome and CSS3
Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
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 with one icon – think Microsoft Windows Wingdings fonts. The 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.
Update: I heard that there 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 use it?
The 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 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.
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;
}
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Published at DZone with permission of Mikko Ohtamaa , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}