Social Icons in Ethos – Themeco Community https://theme.co/archive/forums/topic/social-icons-in-ethos/feed/ Sat, 18 Oct 2025 06:37:49 +0000 https://bbpress.org/?v=2.6.14 en-US https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-178582 <![CDATA[Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-178582 Wed, 07 Jan 2015 17:56:30 +0000 cyberp HAllo,
I would like to make bigger social icons in my Ethos website, now they are very little…
I would like to set them up the same of http://www.360gradisud.it , how can I do?

]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-178583 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-178583 Wed, 07 Jan 2015 17:56:41 +0000 cyberp https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-178772 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-178772 Wed, 07 Jan 2015 22:41:58 +0000 Darshana Hi there,

Thanks for writing in! Please add the following CSS code into your Customizer, Custom > CSS section using the menu Appearance -> Customize and change the values according to your preference. 


.x-topbar .x-social-global a {
    font-size: 3.2rem;
}

.x-colophon.bottom .x-social-global a {
    font-size: 3.2rem;
}

.x-social-global i {
    height: 32px;
    width: 32px;
}

Hope that helps.

]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179085 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179085 Thu, 08 Jan 2015 10:15:29 +0000 cyberp https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179231 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179231 Thu, 08 Jan 2015 15:14:32 +0000 Zeshan Hi there,

In that case, please add following code under Custom > CSS in the Customizer:

.x-colophon .x-social-global{font-weight:400;line-height:1}.x-colophon .x-social-global a{display:inline-block;text-align:center;color:#fff;background-color:rgba(255,255,255,0.125);border-radius:100em}.x-colophon .x-social-global a:hover.facebook{background-color:#3b5998}.x-colophon .x-social-global a:hover.twitter{background-color:#00abf0}.x-colophon .x-social-global a:hover.google-plus{background-color:#d84b35}.x-colophon .x-social-global a:hover.linkedin{background-color:#1a81ad}.x-colophon .x-social-global a:hover.foursquare{background-color:#0f6bb6}.x-colophon .x-social-global a:hover.youtube{background-color:#cc181e}.x-colophon .x-social-global a:hover.vimeo{background-color:#44bbff}.x-colophon .x-social-global a:hover.instagram{background-color:#3f729b}.x-colophon .x-social-global a:hover.pinterest{background-color:#cd1f28}.x-colophon .x-social-global a:hover.dribbble{background-color:#ea4b8b}.x-colophon .x-social-global a:hover.behance{background-color:#1769ff}.x-colophon .x-social-global a:hover.rss{background-color:#fe6e00}.x-colophon .x-social-global a i{display:block} .x-colophon .x-social-global a {background-color: #d7623c; color: #fff !important; } .x-colophon.bottom .x-social-global{margin:20px 0}.x-colophon.bottom .x-social-global a{margin:0 1.25%;width:54px;height:54px;font-size:21px;font-size:2.1rem;line-height:54px;}.x-colophon .x-social-global i {width: auto; height: auto;}

Hope this helps. 🙂

Thank you.

]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179355 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179355 Thu, 08 Jan 2015 18:20:12 +0000 cyberp thank you!
I did it, but they appear just in the footer….the social icons are disappeared from the topbar…

How can I put these new Social Icons also in the topbar, on the right side, as it was before with default icons?

thanks for helping…

]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179586 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-179586 Fri, 09 Jan 2015 03:40:13 +0000 Rad Hi there,

It still there, but as colored white.

Add this css too,

.x-topbar .x-social-global a {
color: #999;
}

Hope this helps.

]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-183659 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-183659 Thu, 15 Jan 2015 14:01:29 +0000 cyberp https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-184114 <![CDATA[Reply To: Social Icons in Ethos]]> https://theme.co/archive/forums/topic/social-icons-in-ethos/#post-184114 Fri, 16 Jan 2015 03:11:30 +0000 Friech Hi there,

Thank you for the details, to have your topbar social icon style same as on the footer please add this css under Custom > CSS in the Customizer.

.x-topbar .x-social-global a {
	background-color: #333333;
	color: #fff;
	width: 54px;
	line-height: 54px;
	border-radius: 100%;
	font-size: 21px;
}
.x-topbar .x-social-global a.facebook:hover {background-color: #3b5998;}
.x-topbar .x-social-global a.twitter:hover {background-color: #00abf0;}
.x-topbar .x-social-global a.youtube:hover {background-color: #cc181e;}

Before doing that make sure you add the closing bracket } on your last line of custom css code. :)

Hope it helps. Cheers!

]]>