td-icon-font td-icon-facebook
td-icon-font td-icon-instagram
td-icon-font td-icon-twitter
td-icon-font td-icon-youtube
These are the used classes in the footer. I just need to make the social icon background to be #F6A815
Thanks in advance.
Hi firetoss,
Please try the code below in Theme panel->Custom Css area, like this: http://screencast.com/t/LMc7Vc2Krqi
.td-footer-wrapper .td-icon-font {
background-color: #F6A815;
}
The result should see here: http://screencast.com/t/JqjDTvhzNQ
Thanks!
Thanks, exactly what I wanted.
Please in the next version of the theme allow us to change the background color of EACH and EVERY Icon. Want to make facebook icon blue, pinterest red etc.. Social Icons need to POP with color. They all can’t be the same color.
Thank you so much
I gave it a try and only got the facebook icon to work, do i not have the right id names? is my css correct?
.td-footer-wrapper .td-icon-facebook {
background-color: #3b5998;
}
.td-footer-wrapper .td-icon-font td-icon-flickr {
background-color: #ff0084;
}
.td-footer-wrapper .td-icon-font td-icon-googleplus {
background-color: #dd4b39;
}
.td-footer-wrapper .td-icon-font td-icon-instagram {
background-color: #517fa4;
}
.td-footer-wrapper .td-icon-font td-icon-pinterest {
background-color: #cb2027;
}
.td-footer-wrapper .td-icon-font td-icon-twitter {
background-color: #00aced;
}
.td-footer-wrapper .td-icon-font td-icon-youtube {
background-color: #bb0000;
}
CSS definitions for more icons at: http://ksloan.net/css-color-definitions-for-font-awesome-social-icons/
Hi mboydnv,
Please try the code below and place it in Theme panel->Custom Css area, like this: http://screencast.com/t/oTNuYm7Gl
.td-footer-wrapper .td-icon-facebook {
background-color: #3b5998;
border-radius:20px;
}
.td-footer-wrapper .td-icon-flickr {
background-color: #ff0084;
border-radius:20px;
}
.td-footer-wrapper .td-icon-googleplus {
background-color: #dd4b39;
border-radius:20px;
}
.td-footer-wrapper .td-icon-instagram {
background-color: #517fa4;
border-radius:20px;
}
.td-footer-wrapper .td-icon-pinterest {
background-color: #cb2027;
border-radius:20px;
}
.td-footer-wrapper .td-icon-twitter {
background-color: #00aced;
border-radius:20px;
}
.td-footer-wrapper .td-icon-youtube {
background-color: #bb0000;
border-radius:20px;
}
The result you should see, here: http://screencast.com/t/PdwkooGQc84
With border-radius condition, your social icons corner will be a circle. You can adjust this value as you wish.
If is not what you mean, please provide more details about this.
Thanks!
Thanks Catalin
Having trouble with the hover now. It’s not hovering the entire circle just the font icon, and ideas please
please have a look at the icons in the footer at (no spaces in domain)
p a r a d i s e f o u n d t o u r s . c o m
was thinking about a hover like this:
If that’s too hard, maybe just the circle hovers and not the icon? like in the footer of this site below:
Also is it possible to make the social icon font size bigger like the link above?
Thanks so much
Hi mboydnv,
Please try the code below in your Theme panel->Custom Css area. I gave you a solution similar to the second example of your.
.td-social-icon-wrap i.td-icon-facebook:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-flickr:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-googleplus:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-instagram:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-pinterest:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-twitter:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-youtube:hover {
opacity: .5;
color:white;
}
The result you should see here: http://screencast.com/t/zPvvt6hYIhQ
Thank you!
Thank you the following css looks good, would you know the best way to increase the icons (font) size within the circle? Thank you so much.
.td-footer-wrapper .td-icon-facebook {
background-color: #3b5998;
border-radius:20px;
}
.td-footer-wrapper .td-icon-flickr {
background-color: #ff0084;
border-radius:20px;
}
.td-footer-wrapper .td-icon-googleplus {
background-color: #dd4b39;
border-radius:20px;
}
.td-footer-wrapper .td-icon-instagram {
background-color: #517fa4;
border-radius:20px;
}
.td-footer-wrapper .td-icon-pinterest {
background-color: #cb2027;
border-radius:20px;
}
.td-footer-wrapper .td-icon-twitter {
background-color: #00aced;
border-radius:20px;
}
.td-footer-wrapper .td-icon-youtube {
background-color: #bb0000;
border-radius:20px;
}
.td-social-icon-wrap i.td-icon-facebook:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-flickr:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-googleplus:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-instagram:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-pinterest:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-twitter:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-youtube:hover {
opacity: .5;
color:white;
}
Hi mboydnv,
If you want to change the icons font size, it is necessary to increase the font-size parameter. Please try the code below and solve the problem. Place it in Theme panel->Custom Css area:
.td-footer-wrapper .td-icon-facebook {
background-color: #3b5998;
border-radius:20px;
font-size: 23px;
}
.td-footer-wrapper .td-icon-flickr {
background-color: #ff0084;
border-radius:20px;
font-size: 23px;
}
.td-footer-wrapper .td-icon-googleplus {
background-color: #dd4b39;
border-radius:20px;
font-size: 23px;
}
.td-footer-wrapper .td-icon-instagram {
background-color: #517fa4;
border-radius:20px;
font-size: 23px;
}
.td-footer-wrapper .td-icon-pinterest {
background-color: #cb2027;
border-radius:20px;
font-size: 23px;
}
.td-footer-wrapper .td-icon-twitter {
background-color: #00aced;
border-radius:20px;
font-size: 23px;
}
.td-footer-wrapper .td-icon-youtube {
background-color: #bb0000;
border-radius:20px;
font-size: 23px;
}
.td-social-icon-wrap i.td-icon-facebook:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-flickr:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-googleplus:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-instagram:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-pinterest:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-twitter:hover {
opacity: .5;
color:white;
}
.td-social-icon-wrap i.td-icon-youtube:hover {
opacity: .5;
color:white;
}
The result you should see here: http://screencast.com/t/X9hluJutBhmI
Hope this helps and let us know how it goes!
Thank you!
