Have you ever wondered how to create your own social media icons that link out to your social media accounts?
You might think that you have to create images for each social media accounts using a tool like Photoshop.
But did you know that it’s possible to create social media icons using icon fonts?
Icon fonts are fonts, but instead of containing letters and numbers, they contain symbols. Think Wingdings, but 100% better!
There are a variety of icon font libraries out there, but my favourite one is called Font Awesome. Font Awesome has a fantastic collection of icons (hundreds of which are free), including the logos of many social media platforms like Facebook, Twitter, Instagram, etc.
We can use these icons to easily create social media icons on our website, meaning you don’t need to create the icon images yourself or source them from elsewhere. And best of all, using icon fonts allows you to completely customise their appearance using CSS.
In this post, I’m going to show you how to set up and utilise icons from Font Awesome, turn them into links, and then style them.
This post was last updated on 25th October 2018.
How to install Font Awesome
Firstly, we need to install Font Awesome, so head over to the How to Use page on their website. It should look a little something like this:
Here you will see a piece of code (as highlighted above). You will need to copy this code and paste it in-between the <head> </head> tags in your HTML file. Save and upload your file, and that’s it! The Font Awesome library is now installed on your website.
If you are using WordPress…
If you are using WordPress, you should enqueue this stylesheet correctly via the functions.php folder. Your code might look a little something like this…
<?php
function theme_files(){
wp_enqueue_style('font-awesome', '//use.fontawesome.com/releases/v5.4.1/css/all.css');
}
add_action( 'wp_enqueue_scripts', 'theme_files' );
?>
How to display Font Awesome icons
Now that Font Awesome is installed on your website, you can start making your icon links. So, let’s begin with Twitter.
Go to the Icons page on the Font Awesome website. Here you will see a list of icons available to use. Any icons that are a grey colour are actually a part of the premium package, so you would need to upgrade to use these.
You don’t need to scroll through all the icons on this page to find the one you want to use. You can instead use the search at the top of this page to search for a specific icon. So, for instance, I’m going to search for Twitter to find the Twitter icon.
You will see that this search narrows it down to two Twitter icons, and both aren’t greyed out so they’re both available to use. It’s entirely up to you which icon you choose, but I’m going to pick the first one.
Click on the icon you wish to use, and you will see a page that looks like this:
Don’t be surprised if the colour of this page is different to mine!
At the top of the page, you will see a spinet of HTML. Notice that it is an opening and closing <i> tag with two classes assigned to it. It is these class that tells the browser which icon we want it to show. This will, of course, vary for each icon in the Font Awesome library.
Copy this code and that paste it into your HTML code, and you should then see the icon on your website.
Sure, it’s tiny! But don’t worry because I’ll show you how to make it larger later on in this post.
Right now, the most important thing is that this icon is showing on your website, and the Font Awesome library is working as expected.
I’m now going to add some more of these icons to my site. I’m going to add an icon for each of my social media accounts, including Facebook, Pinterest, Instagram and Google+. I did this by searching for each of the social media platforms on Font Awesome and then copying and pasting the code into my file.
How to make the icon a link
You may have noticed when you copied the code for the icon from the Font Awesome website that there was a class wrapped in <i> </i> tags. This is fine if we just want a static icon, but we want to make this icon a link.
So let’s start by swapping those <i> tags for <a> tags.
<a class="fab fa-twitter"></a> <a class="fab fa-facebook-f"></a> <a class="fab fa-pinterest"></a> <a class="fab fa-instagram"></a> <a class="fab fa-google-plus-g"></a>
Okay, that’s great, but they’re still not links as they don’t contain the href attribute. So let’s add in a href attribute (href=” “) and add in a URL.
<a href="https://twitter.com" class="fab fa-twitter"></a> <a href="https://facebook.com" class="fab fa-facebook-f"></a> <a href="https://pinterest.com" class="fab fa-pinterest"></a> <a href="https://instagram.com" class="fab fa-instagram"></a> <a href="https://plus.google.com" class="fab fa-google-plus-g"></a>
Now let’s go a step further and add a target attribute to ensure these links open in a new tab or window (target=”_blank”).
<a href="https://twitter.com" class="fab fa-twitter" target="_blank"></a> <a href="https://facebook.com" class="fab fa-facebook-f" target="_blank"></a> <a href="https://pinterest.com" class="fab fa-pinterest" target="_blank"></a> <a href="https://instagram.com" class="fab fa-instagram" target="_blank"></a> <a href="https://plus.google.com" class="fab fa-google-plus-g" target="_blank"></a>
Now our icons will look like this…
Obviously, these links aren’t very attractive, so let’s use some CSS to style them.
How to style icons
I’m going to start by wrapping my icons and links in a div and then I will give this div a class of “socialMediaLinks”. This is just so that I can target the links easily without targeting every link on my website.
<div class="socialMediaLinks">
<a href="https://twitter.com" class="fab fa-twitter"></a>
<a href="https://facebook.com" class="fab fa-facebook-f"></a>
<a href="https://pinterest.com" class="fab fa-pinterest"></a>
<a href="https://instagram.com" class="fab fa-instagram"></a>
<a href="https://plus.google.com" class="fab fa-google-plus-g"></a>
</div>
Now I can target the links within this div to style this. So I’m going to go to my stylesheet and add a new selector:
.socialMediaLinks a {
}
I’m going to start my making my social media icons larger (font-size: 26px;), add some space between each of them (margin: 0 10px 0 0;), removed the underline (text-decoration: none;), and then change the colour of them (color: #000000;)…
.socialMediaLinks a {
font-size: 26px;
margin: 0 10px 0 0;
color: #000000;
text-decoration: none;
}
Great! They’re already looking better! Now I’m going to going to update the styling so that the icons change colour on hover.
.socialMediaLinks a:hover {
color: #673ab7;
}
We can also style our icons individually by using the Font Awesome classes to target each one. So say, for example, you can to use different colours for each link:
.socialMediaLinks a.fa-twitter {
color: #00aced;
}
.socialMediaLinks a.fa-facebook-f {
color: #3b5998;
}
.socialMediaLinks a.fa-pinterest {
color: #C92228;
}
.socialMediaLinks a.fa-instagram {
color: #8a3ab9;
}
.socialMediaLinks a.fa-google-plus-g {
color: #d34836;
}
How to make square icons
Right, let’s do some fancier styling!
Let’s use the same styling we used before, but add in some extra bits of styling to make each link a square. We’ll start by giving it a background colour (background-color: #b7b6b6;) and then giving this some padding (padding: 10px;). Now I’ll set the width of the icon (width: 50px;) and set the icons to align to the centre (text-align: center;)
.socialMediaLinks a {
font-size: 26px;
margin: 0 10px 0 0;
color: #000000;
text-decoration: none;
background: #b7b6b6;
padding: 10px;
box-sizing: border-box;
width: 50px;
text-align: center;
}
Again we can change what the icon looks like when you hover over it. As well as changing the icon colour, you can also change the background colour like this:
.socialMediaLinks a:hover {
background-color: #36d6c8;
}
How to make round icons
Maybe squares aren’t your thing. Maybe you’d like round icons instead.
Again, let’s start with the original styling we used to for our links and make some amends.
So, I’m happy with the size of the icons, space between them, the colour and the removal of the underline.
As we did for the square icons, let’s add a background colour, some padding, a width (to be the same as the font size) and set the icon to be aligned in the centre.
Finally, I’m going to set the border-radius to be 50% to make the icon a circle.
.socialMediaLinks a {
font-size: 26px;
margin: 0 10px 0 0;
color: #000000;
text-decoration: none;
background: #b7b6b6;
padding: 15px;
width: 26px;
text-align: center;
border-radius: 50%;
}
Have you ever used Font Awesome before? Or do you prefer a different icon font library?
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
