How To Add Social Media Icons To Your Website

Share This Post!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

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

The easiest way to add social media icons to your website is to use a free 3rd party library of icons! I highly recommend Ionicons and Font Awesome Icons for this.


Enter your email below and receive everything you need
to get started with coding! ALL 100% FREE!

How To Add Social Media Icons To Your Website
How To Add Social Media Icons To Your Website

Using Ionicons

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:

<i class="ion-social-facebook"></i>

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.

See the Pen EWPvww by Learn To Code London (@learntocodelondon) on CodePen.

How To Add Social Media Icons To Your Website
RetroSkatr With Social Media Icons
Exercises
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!

Summary

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! 🙂


Next: Website Structure Explained

If you have any questions or comments please use the form below!

Share This Post!
Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

2 Replies to “How To Add Social Media Icons To Your Website”

Comments are closed.