Font Awesome is a really useful tool that provides developers with free access to hundreds of different icons and symbols to use in the projects in place of images and pngs. The great thing about using Font Awesome icons is that because they’re technically characters instead of images, the colors and sizes of the characters can easily be customized using CSS style rules. You can even really easily add hover effects and styling for active and visited states by using the CSS pseudo elements (:hover, :active, :visited).
One really great way to take advantage of these Font Awesome icons is by using them to create social media icons — you know, those buttons you’ll find on almost every site that links to a site’s social media presences. Usually these are created in photoshop and uploaded to a server, but if you’re planning on creating simple or basic social media buttons, Font Awesome is a great, lightweight option to create them easily without having to use images. Keep reading to check out how it’s done.
Get Font Awesome Library
You can download the Font Awesome library and place it onto your server to link to, but if you want an even more lightweight option, you can simply link to their library in the <head> section of your HTML files or at the top of your StyleSheet using the @import rule. See the code you can use to link to the Font Awesome library below:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
The HTML
For this example, let’s create icons for Twitter, Facebook, and Instagram. To see a list of ALL the Font Awesome icons and their accompanying code, head over to this page. Here’s the HTML you’ll need to get started:
<i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i>
The results of the HTML above should look something like this:
The CSS
To really make these icons unique we need to add some styling. Let’s turn them into rounded icons, and let’s add some colors to reflect the brands of each social media network. Take a look at the CSS below to see how it’s done.
i.fa.fa-facebook, i.fa.fa-twitter, i.fa.fa-instagram{
border-radius: 100%;
font-size: 28px;
height: 38px;
line-height: 40px;
margin: 5px;
text-align: center;
width: 38px;
}
i.fa.fa-facebook{
border: 1px solid #3B5998;
color: #3B5998;
}
i.fa.fa-twitter{
border: 1px solid #00aced;
color: #00aced;
}
i.fa.fa-instagram{
border: 1px solid #833ab4;
color: #833ab4;
}After applying the CSS above, your social media icons should look similar to this:
Styled beautifully and reflecting the brand identity of each platform!
Extras: Hover Effects
Now that you’ve got your icons styled, adding hover, active, visited, etc effects using pseudo-selectors is really easy. A cool hover effect to add is to change the opacity of the icons when they’re hovered over. To do that, you just need to add the following CSS:
i.fa.fa-facebook:hover, i.fa.fa-twitter:hover, i.fa.fa-instagram:hover{
opacity: .6;
}Compare the icons in the image below with the one above, and you’ll see that the opacity of the Instagram icon is less opaque than the others or than the one in the image above — that’s because it has the hover effect applied to it.
