Social Media

Shapely
1

Is there a way to add social media buttons? I just want the icons in a circle for Facebook, Twitter, etc. I tried adding a text area in the footer widget with "

"

But it didn’t work. Thanks!

2

Hi @bzsim8,

Thank you for your another question.

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 -> Shapely Options -> Other

.widget_nav_menu li a{
  font-family: fontawesome;
  font-size: 0;
  line-height: 40px;
  list-style: none;
  display: inline-block;
  text-align: center;
  height: 40px;
  width: 40px;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
  background-color: #000;
  -webkit-transition: background-color  0.5s;
  -moz-transition: background-color  0.5s;
  -o-transition: background-color  0.5s;
  transition: background-color  0.5s;
  color: #fff;
  padding: 2px 0 0 9px;
}
.widget_nav_menu li{
    border: none;
    display: inline-block;
    margin: 0;
}
.widget_nav_menu li a:before{
  font-size: 18px;
}
.widget_nav_menu li a[href*="twitter.com"]:before{content:"\f099"}
.widget_nav_menu li a[href*="xing.com"]:before{content:"\f168"}
.widget_nav_menu li a[href*="facebook.com"]:before{content:"\f09a"}
.widget_nav_menu li a[href*="github.com"]:before{content:"\f09b"}
.widget_nav_menu li a[href*="/feed"]:before{content:"\f09e"}
.widget_nav_menu li a[href*="dribbble.com"]:before{content: "\f17d"}
.widget_nav_menu li a[href*="skype.com"]:before{content: "\f17e"}
.widget_nav_menu li a[href*="foursquare.com"]:before{content: "\f180"}
.widget_nav_menu li a[href*="spotify.com"]:before{content: "\f1bc"}
.widget_nav_menu li a[href*="soundcloud.com"]:before{content: "\f1be"}
.widget_nav_menu li a[href*="vimeo.com"]:before{content: "\f194"}
.widget_nav_menu li a[href*="youtube.com"]:before{content: "\f167"}
.widget_nav_menu li a[href*="instagram.com"]:before{content: "\f16d"}
.widget_nav_menu li a[href*="flickr.com"]:before{content: "\f16e"}
.widget_nav_menu li a[href*="tumblr.com"]:before{content: "\f173"}
.widget_nav_menu li a[href*="pinterest.com"]:before{content: "\f0d2"}
.widget_nav_menu li a[href*="plus.google.com"]:before{content: "\f0d5"}
.widget_nav_menu li a[href*="linkedin.com"]:before{content: "\f0e1"}
.widget_nav_menu li a[href*="mailto"]:before{content: "\f003"}

To create social icons follow the below steps :

  1. Create a menu like any other menu in the admin area of your site under Appearance -> Menus .
  2. Use the correct urls in the menu items, so for twitter it must be twitter.com for facebook it must be facebook.com. Otherwise URLs won’t get recognized and you will get squares without icons.
  3. Set theme location for this menu as “Social Menu”
  4. Use this menu in the Custom Menu widget

Best Regards,
Movin

3

Hi Movin,
I tried to do this on my page, but the font awesome is applied to all four footer widgets and my two links for Privacy policy and T&C’s change to squares. How can I apply the docial icons to only one of the footer widgets?
Thanks

4

@woman To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.