This article is all about how to add social follow buttons to a WordPress website or you can say how to add social icons in a WordPress website without plugins.
Contents In The Article
hide
<div class="web-insights"> <p class="fttl">Follow Us</p> <p class="ffttl">Stay updated via social media</p> <ul> <li><a href="#" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-paper-plane" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li> </ul> </div>
/* Webinsights Follow Buttons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
.web-insights {
text-align: center;
display: table;
border: 1px solid #ddd;
padding: 10px 10px 5px;
border-radius: 10px;
width:100%;
margin:0;
}
.web-insights .fttl {
font-size: 18px;
font-weight:600;
letter-spacing: 1px;
color:black;border-bottom: 1px solid #ddd;
padding-bottom:12px;
}
.web-insights .ffttl {
font-size: 16px;
letter-spacing: 0.5px;
color:black;border-bottom: 1px solid #ddd;
padding-bottom:15px;
margin-top:-15px;
}
.web-insights ul{
padding: 0px;
margin: 0px;
margin-left:15px;
}
.web-insights li {
float: left;
list-style: none;
font-size: 20px;
text-align: center;
margin-right:8px;
}
.web-insights li a i {
background-color: #f1f1f1;
color: #fff;
border-radius: 100%;
height: 40px;
width: 40px;
line-height: 43px !important;
}
.web-insights li a i:hover{
opacity: 0.8;
}
.web-insights li a i.fa.fa-facebook {
background-color: #3b5997;
}
.web-insights li a i.fa.fa-whatsapp {
background-color: #25D366;
}
.web-insights li a i.fa.fa-instagram {
background-color: #3e729a;
}
.web-insights li a i.fa.fa-paper-plane {
background-color: #1DA1F2;
}
.web-insights li a i.fa.fa-youtube-play {
background-color: #c42f2b;
}
.web-insights li a i.fa.fa-twitter {
background-color: #57aced;
}
.web-insights li a i.fa.fa-pinterest-p {
background-color: #cb2026;
}
/* End of Webinsights Follow Buttons */
Hello, Sir, I Love Your Work. Please Muja app ki kuch help chaya thi. Muja app ke Social Icons jo Top Right sidebar mai hai uska Code chaya tha. or Search Box Jo Sidebar mai he hai uska be Code chaya tha. Please Sir Reply Zarror kerna. i,m Waiting for your Reply. and Thank youuuuu so much for Everything.
go to inspect mode and search it you can get it
please make one video for this all right side slider search, social icon pls
aap blog ke liye image kisme banate hai.
Hi Aapne Blog Ke Liye Thumbnail Image Ko Kaise Banaye Hai Mujhe Bhi Bataiye
I Use Adobe Photoshop To Design My Thumbnails!
primary nevigation bar ko aur footer menu ke kaise customize kare like you????????
You will get a video about the same topic.
Hello sir,
One more thing about my website.
Meri niche Apk hy aur kia main generate press ki setting moddriod.co jaisi kar sakta hon?? Homepage ki setting
Sir, when I added your html code and css in generate press theme.
It is not showing any icons in my site
Can you help me please
same problem here
if I update the theme will this code remains or I need paste the code again
I created a website with a GeneratePress theme to look like you…
Check my website to see if there are any problems infotechbot dotcom
Seems you really need to watch my videos!
Bhai
when I added your html code and css in generate press theme.
It is not showing any icons in my site
Can you help me please
Add Font Awesome CDN in your header.
Sir, kaunsi option pe jaake header select krke font change krna h?
agar aap thoda details me bata denge to boht help hoga
Sir I have implemented same as per guide but button show nai ho re
I have followed your all steps it worked perfectly but after 10 days social icon is not showing why? I did not change anything in HTML and css.