To add social icons, you can use Social Block.
However, you will not be able to insert icons for many of the same accounts, for example, you cannot insert icons for 2 Instagram accounts, 2 Facebook accounts…
and in this way, I will share how to Add Social Icons for many Social Accounts.
1. Add Code Block
<ul class="t-social"> <li> <a href="https://linkedin.com"> <i class="fa fa-linkedin-square"></i> </a> </li> <li> <a href="https://twitter.com"> <i class="fa fa-twitter"></i> </a> </li> <li> <a href="https://pinterest.com"> <i class="fa fa-pinterest"></i> </a> </li> <li> <a href="https://facebook.com"> <i class="fa fa-facebook"></i> </a> </li> <li> <a href="https://instagram.com"> <i class="fa fa-instagram"></i> </a> </li> <li> <a href="https://skype.com"> <i class="fa fa-skype"></i></a> </li> <li> <a href="https://dribble.com"> <i class="fa fa-dribble"></i> </a> </li> </ul> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> /* code block padding top bottom */ .code-block { padding-top: 0; padding-bottom: 0; } /* social icons code */ .t-social { display: block; margin: 0 auto; padding-top: 5px; text-align: center; padding-left: 0; } .t-social li { display: inline-block; margin: 0; line-height: 100%!important; } /* Icon color size */ .t-social .fa { font-size: 26px; margin: 0 8px; color: #8d8d8d; } /* icon hover color */ .t-social .fa:hover {color:#4285f4;} </style>
You will have
2. Customize Icons
2.1. Change Icons & Links
In above code, you will see
<li>
<a href=”https://linkedin.com”>
<i class=”fa fa-linkedin-square”></i>
</a>
</li>
href=”…” is Social Link
<i class=”fa fa-linkedin-square”></i> is Icon Syntax.
Find all icons syntax here. https://fontawesome.com/v4.7.0/icons/
2.2. Icon Color
You will see this code
.t-social .fa { font-size: 26px; margin: 0 8px; color: #8d8d8d; } .t-social .fa:hover {color:#4285f4;}
It is icon size (font-size: 26px), icon color (color: #8d8d8d) & icon hover color (color: #4285f4).
Featured image by Pixabay.com