Adding social media icons to your website is an easy way to make your website look great and help build up your social media following. This is the sixth module in the How to Make Your Own Website Tutorial.
Last time, we introduced CSS and saw how it can be used to style our web pages. We learnt that CSS is a separate language to HTML and how the two go hand-in-hand to allow us to create beautiful looking web pages. In this module, I will show you how to add social media icons to your website and make it stand out even more!
This technique can be used not only for social media icons but indeed any type of icons.
Watch It On YouTube
How To Add Social Media Icons To Your Website
Ionicons is packaged up as a zip file which you can download here. Unzip it and what you need are the css and the fonts directories.
To include social media icons in your website you just need to reference the CSS in your HTML code as you would any other CSS file:
<link href="css/ionicons.min.css" rel="stylesheet">
Once you have referenced it in your HTML file, use the Ionicons website to find the icon you want to use. To use any icon the HTML tag to use is shown below:
<i class="icon name"></i>
Then simply replace “icon name” above with the actual icon you want to use. For example, to use Facebook:
We can add inline style to make it larger:
<i style="font-size: 50px;" class="ion-social-facebook"></i>
Let’s add a Twitter and YouTube too. And let’s add hyperlinks! Note how I applied the style to the div element. In the supporting video I went a step further and split this out to our CSS file.
<div style="font-size:50px;"> <a href="https://www.facebook.com/learntocodelondon/"> <i class="ion-social-facebook"></i> </a>
<a href="https://twitter.com/learncodelondon"> <i class="ion-social-twitter"></i> </a>
<a href="https://www.youtube.com/channel/UCgB1DA8uNnpSWPKHQDWqRWw"> <i class="ion-social-youtube"></i> </a> </div>
Let’s now build on our RetroSkatr example from the previous modules and add social media icons to the bottom! Check out the CodePen below. Take a moment to see how it all fits together.
1. Apply icons to the web page you created as part of the exercises in module 5.
2. Experiment with adding different icons into your web page.
3. Challenge: Try embed Font Awesome Icons in your web page!
That’s the end of “How To Add Social Media Icons To Your Website” module. It was a quick one, but illustrated a key concept of including 3rd party icons in your web pages. Next time we will cover how to organise your website assets to make them easy to manage! This is in preparation to publishing your website online! Oh and by the way don’t forget to follow us on social media using the icons at the bottom of this page! 🙂