Site icon MonstersPost

How to Add Social Media Icons in HTML

Helen Marshall

Adding social media icons to your website is a good way to make connections with your customers via social networks, get their feedback in an informal way and involve them in your company’s life.

Need some cool data visualization ideas? PPT presentation slides will get the job done.

How to add social media icons in HTML

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

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):

See the Pen
SMIcons5 by Helen (@CF-251)
on CodePen.

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

You can find many free social icon packs here, too. Just find the style which is more to your liking, add them to your social block and enjoy increased popularity in social networks!

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

See the Pen
SMIcons5 by Helen (@CF-251)
on CodePen.

See the Pen
SMicons6 by Helen (@CF-251)
on CodePen.

Adding social icons as icon fonts | html social media buttons

FontAwesome

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

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>

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); 
}

And this is how it works:

See the Pen
SMIcons7 by Helen (@CF-251)
on CodePen.

By the way, you can find all the other icons in the FontAwesome Cheatsheet.

Examples of implementation:

See the Pen
SMIcons1 by Helen (@CF-251)
on CodePen.

See the Pen
SMIcons2 by Helen (@CF-251)
on CodePen.

See the Pen
SMIcons3 by Helen (@CF-251)
on CodePen.

Socicon

Another way is using Socicon icon font.

Go to the website:

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

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;}

Click the demo to see it in use:

See the Pen
SMIcons4 by Helen (@CF-251)
on CodePen.

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 Share Buttons Popup & Pop Up Social Sharing Icons plugin by UltimatelySocial, the tool which saves you a 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!

Premium Social Media Icons

750 Business Management Icon Set

Download | MonsterONE

Web App Icons Set

Download | MonsterONE

Black Circled Social Media Icon Set

Download

Website Use Icon Set

Download | MonsterONE

50 Social Network Icon Set

Download | MonsterONE

50 Women Flat Long Shadow Icon Set

Download | MonsterONE

Unoline Iconset template

Download | MonsterONE

45 Digital Web Line Filled Iconset

Download | MonsterONE

Round Application Icon Set

Download | MonsterONE

8 - Digital Web Line Two Colors Icon Set

Download | MonsterONE

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

FAQ: html social media buttons

Why do I need social media icons on my website?

Social media could be very helpful in promoting and advertising your website. If your brand has social media accounts it would be wise to give the website visitors an opportunity to join them and share your posts in their timelines.

What is an icon font?

It is a font that consists only of icons. Those icons can be used to add social media buttons to your page.

What social media accounts I should add to the website?

When choosing social media to set an account of your brand you have to think who will be your audience? In most cases, a Facebook page, Instagram account, LinedIn, and Twitter will be quite enough.

Read Also: html social media buttons