Hello team!
I was wondering if it was possible to have more social media icons in the footer than in the sidebar.
The sidebar is narrower and so it can accommodate fewer icons in the same line as compared to the footer (I’m happy with the size and space they have right now).
At the moment I’m displaying Facebook, Twitter, Instagram, Google+, Pinterest and Bloglovin’. I would like to add Snapchat, Linkedin and Stumbleupon to my footer. Please help.
My site: http://www.lipstickalchemist.com/
Hello there,
I hope you are doing well today.
It would be possible with the aid of a third party plugin, please have a look at the following options:
Best Regards,
Support
Thank you for that, but as always, I try and avoid extra plugins wherever possible.
I was wondering if there was a new menu I could create and place in the footer/sidebar and if yes, how do I achieve that?
Use your current social menu for footer and remove the social widget from your site sidebar.
Then just create another social menu but doesn’t set it as social menu in the menus screen and use it in your sidebar using Custom Menu widget.
This is what I was looking for! It almost works, except that instead of icons, it displays all social media items in a vertical list. What CSS Classes and/or code should I use to get it looking like the original social menu? Please help! 
(I wanna have icons for facebook, twitter, instagram, google+, pinterest and bloglovin in the new custom-menu of sidebar)
You have to develop custom CSS code by referring below theme CSS code.
/* =Social icons
----------------------------------------------- */
#secondary .widget .social-icons a {
margin-right: 20px;
}
.social-icons {
position: relative;
margin-bottom: 20px;
text-align: center;
}
#secondary .widget .social-icons {
text-align: left;
}
#social a {
color: #696969;
display: inline-block;
font-size: 18px;
list-style: none;
text-align: center;
}
.header-search-icon {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#social a:hover {
color: #a161bf;
}
.header-search-icon {
background: transparent;
color: #696969;
}
.header-search-icon:hover {
background: transparent;
color: #a161bf;
}
#social li a span {
display: none;
}
#footer-area #social a {
margin: 0 15px;
}
@media (max-width: 992px) {
.site-branding {
text-align: center;
}
.main-content-inner {
margin-bottom: 30px;
}
}
#social li{
display: inline-block;
}
#social li,
#social ul {
border: 0!important;
list-style: none;
padding-left: 0;
text-align: center;
}
#social li a[href*="twitter.com"] .fa:before,
.fa-twitter:before {
content: "\f099"
}
#social li a[href*="facebook.com"] .fa:before,
.fa-facebook-f:before,
.fa-facebook:before {
content: "\f09a"
}
#social li a[href*="github.com"] .fa:before,
.fa-github:before {
content: "\f09b"
}
#social li a[href*="/feed"] .fa:before,
.fa-rss:before {
content: "\f09e"
}
#social li a[href*="pinterest.com"] .fa:before,
.fa-pinterest:before {
content: "\f0d2"
}
#social li a[href*="plus.google.com"] .fa:before,
.fa-google-plus:before {
content: "\f0d5"
}
#social li a[href*="linkedin.com"] .fa:before,
.fa-linkedin:before {
content: "\f0e1"
}
#social li a[href*="youtube.com"] .fa:before,
.fa-youtube:before {
content: "\f167"
}
#social li a[href*="instagram.com"] .fa:before,
.fa-instagram:before {
content: "\f16d"
}
#social li a[href*="flickr.com"] .fa:before,
.fa-flickr:before {
content: "\f16e"
}
#social li a[href*="tumblr.com"] .fa:before,
.fa-tumblr:before {
content: "\f173"
}
#social li a[href*="dribbble.com"] .fa:before,
.fa-dribbble:before {
content: "\f17d"
}
#social li a[href*="skype.com"] .fa:before,
.fa-skype:before {
content: "\f17e"
}
#social li a[href*="foursquare.com"] .fa:before,
.fa-foursquare:before {
content: "\f180"
}
#social li a[href*="vimeo.com"] .fa:before,
.fa-vimeo-square:before {
content: "\f194"
}
#social li a[href*="weheartit.com"] .fa:before,
.fa-heart:before {
content: "\f004"
}
#social li a[href*="spotify.com"] .fa:before,
.fa-spotify:before {
content: "\f1bc"
}
#social li a[href*="soundcloud.com"] .fa:before,
.fa-soundcloud:before {
content: "\f1be"
}
Thank you for this! I tried using the codes in my CSS editor, but to no avail. Dunno what I’m missing/doing wrong. I was hoping you could show me how to do one and I’ll manage the rest myself.
I created a custom menu called sidebar social. Then added some social media to it. Then I add matching CSS in the customizer.
For twitter I added: #social li a[href*=“twitter.com”] .fa:before,.fa-twitter:before{content:"\f099"}
But that didn’t work so I tried: #social li.twitter a .fa:before,.fa-twitter:before{content:"\f099"}
Even that didn’t work. I tried adding css class in menu (added twittersm) and then used: #menu-sidebar-social li.twitter a .fa:before,.fa-twitter:before{content:"\f099"}
Still nothing.
What do I do exactly? Please help!
Please display social menu using custom menu widget in your sidebar so that i can help you accordingly.
Thank you so much for taking the time to help with this!
I’ve displayed it at the bottom of this page only for now.
There is no additional CSS or CSS class that I have added. Just URL and Navigation Labels. Thanks again!
You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Appearance -> Customize -> Additional CSS
#menu-sidebar-social {
overflow: hidden;
}
#menu-sidebar-social li{
margin: 0;
padding: 0 15px 0 0;
border: 0;
float: left;
}
#menu-sidebar-social li a{
font-size: 0;
}
#menu-sidebar-social li a:before{
font: normal normal normal 18px/1 FontAwesome;
}
#menu-sidebar-social li a[href*="twitter.com"]:before,
.fa-twitter:before {
content: "\f099"
}
#menu-sidebar-social li a[href*="facebook.com"]:before,
.fa-facebook-f:before,
.fa-facebook:before {
content: "\f09a"
}
#menu-sidebar-social li a[href*="github.com"]:before,
.fa-github:before {
content: "\f09b"
}
#menu-sidebar-social li a[href*="/feed"]:before,
.fa-rss:before {
content: "\f09e"
}
#menu-sidebar-social li a[href*="pinterest.com"]:before,
.fa-pinterest:before {
content: "\f0d2"
}
#menu-sidebar-social li a[href*="plus.google.com"]:before,
.fa-google-plus:before {
content: "\f0d5"
}
#menu-sidebar-social li a[href*="linkedin.com"]:before,
.fa-linkedin:before {
content: "\f0e1"
}
#menu-sidebar-social li a[href*="youtube.com"]:before,
.fa-youtube:before {
content: "\f167"
}
#menu-sidebar-social li a[href*="instagram.com"]:before,
.fa-instagram:before {
content: "\f16d"
}
#menu-sidebar-social li a[href*="flickr.com"]:before,
.fa-flickr:before {
content: "\f16e"
}
#menu-sidebar-social li a[href*="tumblr.com"]:before,
.fa-tumblr:before {
content: "\f173"
}
#menu-sidebar-social li a[href*="dribbble.com"]:before,
.fa-dribbble:before {
content: "\f17d"
}
#menu-sidebar-social li a[href*="skype.com"]:before,
.fa-skype:before {
content: "\f17e"
}
#menu-sidebar-social li a[href*="foursquare.com"]:before,
.fa-foursquare:before {
content: "\f180"
}
#menu-sidebar-social li a[href*="vimeo.com"]:before,
.fa-vimeo-square:before {
content: "\f194"
}
#menu-sidebar-social li a[href*="weheartit.com"]:before,
.fa-heart:before {
content: "\f004"
}
#menu-sidebar-social li a[href*="spotify.com"]:before,
.fa-spotify:before {
content: "\f1bc"
}
#menu-sidebar-social li a[href*="soundcloud.com"]:before,
.fa-soundcloud:before {
content: "\f1be"
}
OMG YAAASSSSSSS! Thank you so much for that! It’s perfect now
How do I align it to the center? Right now it’s aligned left coz of the float:left part.
To centre align it please change float: left to display: inline-block in the above shared code and also use the following custom CSS code.
#menu-sidebar-social {
text-align: center;
}
Yup! It’s absolute perfection! Thanks again!
You are always welcome here
Hello,
I wanted to add other items to my social menu in the Footer. Currently, I am using the default Social Links Menu as the Social Menu and I have added it to the Footer; however, it only has a few items like Twitter etc. For instance, I wanted to add Youtube with an icon. Please know that I am still using the default template with minimal changes and I was wondering where I can add the above code for it to work with the current Social Links Menu? Can this be added to Admin Area → Appearance → Customize → Additional CSS as the sidebar code shown below but modified for footer? If so, how can I modify it? Thanks for your help!
Hi there
@needhelpwithsite please start your own ticket I will help you 
This is very outdated ticket
Done. I have a new ticket and the page address is: Add More Icons to the Footer Social Links Menu
Thanks for the help. I look forward to hearing from you!
Thanks, I will check it