Customize Social Media Icons

[onehipcat]

I would like to customize my social media icons like this (see attached). How can I do this? Right now, my icons are black and when you hover over them they light up. I guess I just want them to stay solid.

I would also like to place the text/links that say “Find People | Events Calendar” on top of my icons rather than underneath like they are now.

Thanks so much.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi

Add the code below to your custom css option.

ul.social-icons li.twitter a {
  background-color: #00aced!important;
  color: #fff!important;
}

ul.social-icons li.facebook a {
  background-color: #3b5998!important;
  color: #fff!important;
}

ul.social-icons li.pinterest a {
  background-color: #cb2027!important;
  color: #fff!important;
}

the other things you asked are only possible through code customization that is more complex than we can support in our support scope. Hope you understand.

-Rui

[onehipcat]

Thank you so much. How can I get the social media icons spaced out? They are all right next to each other. (see snapshot)

Also, what code do I need to adjust the size of the icons? I would like to make them smaller.

Thanks!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this:

ul.social-icons li {
  margin-left: 5px;
}
ul.social-icons li:not(.sf-love) a {
  font-size: 14px;
}
ul.social-icons li:not(.sf-love) a {
  font-size: 14px;
  height: 32px;
  line-height: 34px;
  overflow: hidden;
  padding: 8px;
  width: 34px;
}

– Kyle

[Aquamarine]

Dear Swift Ideas Support, is there a way to remove the Pinterest social media icon, but leave the rest? If so, can you please advise the CSS code?

Thank you,
Betsy Dahl

[Kyle – SUPPORT]

Sure, add this:

ul.social-icons li.pinterest {
  display:none;
}

– Kyle

[onehipcat]

Thanks so much! I have placed [social] icons on the bottom of my footer as well. However, they are not functioning the same as the top ones. The top ones do not have an animation (which I like) and the bottom ones do. Can you tell me what to do so I can have both sets of icons consistent as well as the spacing? Thanks!

[Kyle – SUPPORT]

Add this to your custom css:

ul.social-icons li a:hover i {
  top: 0;
}

– Kyle