This will be a quick tutorial for those who know how to create documents using HTML and CSS programming language. For those who do not and wish to learn, head over to W3schools to start for free, forever and always!

Back to the tutorial; social media buttons or icons are placed within a web page to encourage a handful of goals. For example, if you are starting an online store but you would like to give customers a chance to follow you on other platforms and exclusive offers, you can use your other forms as your pawns!

Have you ever seen these icons before on a website? Well here they are! Now lets figure out how to create them, where they come from and how to use them successfully.

How to add icons

In order to insert an icon(s), you first need to add the name of the icon class to any inline HTML element. The elements used most are the <i> and <span>.

The Walk-through

Step 1: Add HTML

To add the buttons/icons, you first need to add the icon library using the html “link” tag. In this tutorial, I will be using the Font Awesome library.

Example:

Next we need to now add in the icons from the Font Awesome library we used above:

With step 1 now complete, we cannot forget to correctly style our new icons to be sure they fit perfectly. We style the icons using CSS.

Step 2: Add CSS

Example:

/* add your css */ / STYLE ALL YOUR ICONS */
 .fa {
     padding: 20px;
     font-size: 30px;
     width: 50px;
     text-align: center;
     text-decoration: none;
 }

/* add a hover effect optional */
.fa:hover  {
  opacity: 0.8;
}

/* Set a color for each icon */
.fa-facebook  {
  background: #3C5998;
  color: white;
}

Summary

This tutorial covered adding social media icons to your web page, where to get them, and how to style your icons. Hopefully you find this information well and useful as much as I did. If you have any requests please be sure to send an email for future tutorials!

Free Icon Libraries:

Font Awesome 5 Icons: fontawesome.com sign up to get a free code to use in your web pages. (NO DOWNLOADING/INSTALL REQUIRED)

Google Icons: Google Icons (No download/install required)

Full list of icons read the icons references page.