How to Add Social Media Icons to Your Website

Table of Contents

• Ways to add social media icons to the website
  • As images
  • As icon fonts
  • As WP widget
  • Using WP plugin
• Adding social icons as images (PNG, SVG, EPS, etc.)
  • Vecteezy
  • Flaticons
• Adding social icons as icon fonts
  • FontAwesome
  • Socicon
• Implementing icons using WP widget
• Adding social media icons with WP plugin

How the icons can be added to your website

There are multiple ways to add social media icons to your website:

• Add icons as images in the desired format - .png, .svg or .eps.
• Add them using icon fonts - FontAwesome, Glyphicons etc.
• Implement icons using WP widget.
• Add social media icons through WP plugin.

You can choose the one most suitable for you or try all of them.

Adding social icons as images (PNG, SVG, EPS, etc.)

If you are a designer, you can create or customize the icons yourself. But if you’re not, or just want to save some time, you can use many services where you’re able to choose the icon packs and download them. The most popular are:

Vecteezy

Choose the icon pack which is most relevant to your requirements and download it.

Then upload the files to your media library and add them in the following way (for HTML websites):

<ul class="social-icons">
    <li><a href="http://www.facebook.com"><img src='path_to_your_image' /></a></li>
    <li><a href="http://www.twitter.com"><img src='path_to_your_image' /></a></li>
    <li><a href="http://www.youtube.com"><img src='path_to_your_image' /></a></li>
</ul>

And add some style to adjust the size and position of the icons:

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

Flaticon

Add the icons to your collection, download them and incorporate them into your code in the same way as the previous case.

IconFinder

There’s a way to apply social icons as SVG images. Just look at the following examples to see how you can customize them:

Adding social icons as icon fonts

FontAwesome

FontAwesome is probably the most popular icon font nowadays. It’s super easy to implement and use. Let’s look at an example.

1. Add this code to your HTML:
   

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <div class="wrapper">
      <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-google-plus"></i></a>
      <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-facebook-square"></i></a>
      <a target="_blank" href="your_url_here"><i class="fa fa-3x fa-twitter-square"></i>
   </div></a>
   
2. Add the styles to your style.css file (you can add your own, or use this example):
   

   body {
     text-align: center;
   }
   .wrapper {
     display: inline-flex;
     justify-content: center;
   }
   .wrapper i {
     padding: 10px;
     text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
     transition: all ease-in-out 150ms;
   }
   .wrapper a:nth-child(1) {
     color: #dd4b39;
   }
   .wrapper a:nth-child(2) {
     color: #4867AA;
   }
   .wrapper a:nth-child(3) {
     color: #1DA1F2;
   }
   .wrapper i:hover {
     margin-top: -3px;
     text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
   }
   
3. And this is how it works:
   

Examples of implementation:

Socicon

Another way is using Socicon icon font

1. Go to the website:
   
   
2. Choose the icons you need, and add the HTML code as in the following example:
   

    
   <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8">    
   <ul class="socicons-list">
       <li>
         <a href='your_url_here' target='_blank'><span class="socicon-facebook"></span></a> 
       </li>
         <li>
         <a href='your_url_here' target='_blank'><span class="socicon-instagram"></span></a> 
       </li> 
       <li>
         <a href='your_url_here' target='_blank'><span class="socicon-twitter"></span></a> 
       </li>
       <li>
         <a href='your_url_here' target='_blank'><span class="socicon-googleplus"></span></a> 
       </li>   
       <li>
         <a href='your_url_here' target='_blank'><span class="socicon-behance"></span></a> 
       </li>   
   </ul>
   
3. And apply some styles like the following:

   .socicons-list {
    list-style: none;
    display: flex;
    justify-content: center;
   }
   .socicons-list li {
    margin: 30px 10px;
   }
   .socicons-list li a {
    text-decoration: none;
    padding: 30px;
    font-size: 30px;
    border-radius: 50%;
    color: #fff;
    background-color: #f1f1f1;
    transition: all ease-in-out 150ms;
   }
   .socicons-list li a:hover {
    text-shadow: 0 5px 10px #212121;
   }
   .socicons-list li:nth-child(1) a {
    background-color: #3e5b98;
   }
   .socicons-list li:nth-child(2) a {
    background-color: #c13584;
   }
   .socicons-list li:nth-child(3) a {
    background-color: #4da7de;
   }
   .socicons-list li:nth-child(4) a {
    background-color: #dd4b39;
   }
   .socicons-list li:nth-child(5) a {
    background-color: #1769ff;
   }
   
4. Click the demo to see it in use:
   

Implementing icons using WP widget

If your website is built on WordPress, there’s a great way to add a block with social icons using a WordPress widget. To cut a long story short, just watch this tutorial:

Adding social media icons with WP plugin

You can look through different plugins which could be useful in adding social accounts to your page here - WordPress Plugins for adding Social Media Icons.

Pay attention to Social Media Flying Icons | Floating Social Media Icon plugin by Accurax, the tool which saves you lot of time when adding the icon set to your website:

I hope this article was useful to you, and feel free to leave your comments concerning different ways of adding social icons!

Related Posts

5 Mistakes Every SEO Expert Must Avoid in Social Media Integration

How to Build Brand on Social Media?

Eliminate Your Fears and Doubts About Social Media

How Do I Build An Audience On Social Media? [Free eBook]

5 Secrets to Leverage Social Media for SEO

P.S. Just to make sure you will get design studio templates in the right place.