Add Social Profile Icons Without Plugin on Wordpress

without-plugin

#1

Here is the Awesome Social profile Icons Widget for Wordpress :100:

msk-slicn4

Requirements

  • Font Awesome Icons
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Add Social Media Icons to Wordpress Without a Plugin

1 - Add this Below CSS on your Wordpress site
2 - Goto Appearance > Customize
3 - Open Additional CSS
4 - Copy and Paste this Below CSS on Custom CSS BOX & Click Publish

/* Social icons */
.widgetheading h3 {
    font-size: 24px;
    font-weight: 700;
    padding: 7px 0 7px 0;
    color: #222222;
    text-align: center;
}
.widgetheading p {
    font-size: 16px;
    color: #222222;
    font-weight: 400;
    padding: 3px 0 0;
    text-align: center;
}
.rssicon {
    color: #f89839;
    font-size: 24px;
    margin: 0 18px 0 5px;
}
.twittericon {
    color: #55acee;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.fbicon {
    color: #3b5998;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.gplusicon {
    color: #d34836;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.instagramicon {
    color: #e4405f;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.linkedinicon {
    color: #0077B5;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.youtubeicon {
    color: #cd201f;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.redditicon {
    color: #ff5700;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.stumbleuponicon {
    color: #eb4924;
    font-size: 24px;
    margin: 0 18px 0 0px;
}
.emailicon {
    color: #9a9a9a;
    font-size: 24px;
}
  • Next Goto Widgets
  • Create New Widget
  • Choose Custom HTML
  • Copy and Paste the HTML Code into Custom HTML Widget Box & save it

msk-slicn2

<div class="widgetheading">
<h3>Over 50,000+ Readers</h3>
<p>Get fresh content from HBB</p>
</div>
<br/>
<center>
<div class="socialicons">
<a href="#" class="rssicon" title="RSS Feed" target="_blank" rel="nofollow noopener"><i class="fa fa-rss" aria-hidden="true"></i></a>
<a href="#" class="twittericon" title="Follow us on Twitter" target="_blank" rel="nofollow noopener"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="fbicon" title="Follow us on Facebook" target="_blank" rel="nofollow noopener"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="instagramicon" title="Follow Us on Instagram" target="_blank" rel="nofollow noopener"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="linkedinicon" title="Follow US on Linkedin" target="_blank" rel="nofollow noopener"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" class="gplusicon" title="Follow Us on Google+" target="_blank" rel="nofollow noopener"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="youtubeicon" title="Subscribe to Our Channel" target="_blank" rel="nofollow noopener"><i class="fa fa-youtube" aria-hidden="true"></i></a>
<a href="#" class="redditicon" title="Follow Us on Reddit" target="_blank" rel="nofollow noopener"><i class="fa fa-reddit-alien" aria-hidden="true"></i></a>
<a href="#" class="stumbleuponicon" title="Follow Us on Stumbleupon" target="_blank" rel="nofollow noopener"><i class="fa fa-stumbleupon" aria-hidden="true"></i></a>
<a href="#" class="emailicon" title="Subscribe us" target="_blank" rel="nofollow noopener"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</center>

msk-slicn3

  • That’s all Done :slight_smile:

you can this Use Widget on Blogger blogs & Static sites too

Trending Topics