Strangely enough, I did this and it did not work?
I did what you guys said and it still did not work.
Hello, I have my social icons already as you mentioned, but they have a very light pink color and I don’t know how to change it. I thought I could treat them as links and they would change like my settings for the links, but this doesn’t change the social icons. Could you help please?
What if I want to change the sequence of the social media icons? Is there a way to control that, possibly with css?
Hi There,
You can add the following CSS rule into your Customizer, Custom > Edit Global CSS area to change the colors.
.x-topbar .x-social-global a {
color: #4682b4;
}
.x-topbar .x-social-global a:hover {
color: #008080;
}
If you want to change the sequence, copy the following function into your child theme’s functions.php file and then set the order.
function x_social_global() {
$facebook = x_get_option( 'x_social_facebook' );
$twitter = x_get_option( 'x_social_twitter' );
$google_plus = x_get_option( 'x_social_googleplus' );
$linkedin = x_get_option( 'x_social_linkedin' );
$xing = x_get_option( 'x_social_xing' );
$foursquare = x_get_option( 'x_social_foursquare' );
$youtube = x_get_option( 'x_social_youtube' );
$vimeo = x_get_option( 'x_social_vimeo' );
$instagram = x_get_option( 'x_social_instagram' );
$pinterest = x_get_option( 'x_social_pinterest' );
$dribbble = x_get_option( 'x_social_dribbble' );
$flickr = x_get_option( 'x_social_flickr' );
$github = x_get_option( 'x_social_github' );
$behance = x_get_option( 'x_social_behance' );
$tumblr = x_get_option( 'x_social_tumblr' );
$whatsapp = x_get_option( 'x_social_whatsapp' );
$soundcloud = x_get_option( 'x_social_soundcloud' );
$rss = x_get_option( 'x_social_rss' );
$output = '<div class="x-social-global">';
if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $twitter ) : $output .= '<a href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $linkedin ) : $output .= '<a href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $xing ) : $output .= '<a href="' . $xing . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $foursquare ) : $output .= '<a href="' . $foursquare . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $youtube ) : $output .= '<a href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $vimeo ) : $output .= '<a href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $instagram ) : $output .= '<a href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $dribbble ) : $output .= '<a href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $flickr ) : $output .= '<a href="' . $flickr . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $github ) : $output .= '<a href="' . $github . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $behance ) : $output .= '<a href="' . $behance . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $tumblr ) : $output .= '<a href="' . $tumblr . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $soundcloud ) : $output .= '<a href="' . $soundcloud . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $rss ) : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
$output .= '</div>';
echo $output;
}
If you don’t have a child theme, please refer to this guide first (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57).
Hope that helps.
Thanks it worked perfect!
Glad we were able to help 
And can you please tell me how to change the color on hoover for the footer social icons?
I tried this code but didn’t make any change:
.x-colophon.bottom .x-colophon-content p , .x-colophon.bottom .x-social-global a:hoover {
color: white;
}
Hi There,
Could you please try adding the following CSS rule.
.x-colophon.bottom .x-social-global a:hover {
color: #40e0d0;
}
Hope that helps.
Worked great, many thanks for the good and fast reply 
On behalf of my colleague, you’re welcome. Cheers!
What if I want it in the menu instead of the top bar?
Hi @kbosland,
Thanks for writing around! Please follow https://theme.co/apex/forum/t/social-icons-in-header-inline-with-menu/8249/6 or https://theme.co/apex/forum/t/add-icons-to-menu/345/4 to achieve this.
Cheers!
Hi,
Thanks for the great info!
I have in some way deleted the social media header. I cannot find the way to add it again
Can you help me?
I cannot see that I have a top header option…
Hi There,
You need to go to X > Theme Options > Header > Activate topbar.
Hope it helps
Thank you for the responds. I don¨t have a “activate topbar”… Only a “Header Widget Areas”…
Any other position I can try?
Thanks!
Hi,
Please check in X > Launch > Options > Header > MISCELLANEOUS
I just wanted to point out that this code is now different with an update.
Below is the up to date version of the code:
// Social Output
// =============================================================================
if ( ! function_exists( 'x_social_global' ) ) :
function x_social_global() {
$facebook = x_get_option( 'x_social_facebook' );
$twitter = x_get_option( 'x_social_twitter' );
$google_plus = x_get_option( 'x_social_googleplus' );
$linkedin = x_get_option( 'x_social_linkedin' );
$xing = x_get_option( 'x_social_xing' );
$foursquare = x_get_option( 'x_social_foursquare' );
$youtube = x_get_option( 'x_social_youtube' );
$vimeo = x_get_option( 'x_social_vimeo' );
$instagram = x_get_option( 'x_social_instagram' );
$pinterest = x_get_option( 'x_social_pinterest' );
$dribbble = x_get_option( 'x_social_dribbble' );
$flickr = x_get_option( 'x_social_flickr' );
$github = x_get_option( 'x_social_github' );
$behance = x_get_option( 'x_social_behance' );
$tumblr = x_get_option( 'x_social_tumblr' );
$whatsapp = x_get_option( 'x_social_whatsapp' );
$soundcloud = x_get_option( 'x_social_soundcloud' );
$rss = x_get_option( 'x_social_rss' );
$output = '<div class="x-social-global">';
if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $twitter ) : $output .= '<a href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $linkedin ) : $output .= '<a href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $xing ) : $output .= '<a href="' . $xing . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $foursquare ) : $output .= '<a href="' . $foursquare . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $youtube ) : $output .= '<a href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $vimeo ) : $output .= '<a href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $instagram ) : $output .= '<a href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $dribbble ) : $output .= '<a href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $flickr ) : $output .= '<a href="' . $flickr . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $github ) : $output .= '<a href="' . $github . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $behance ) : $output .= '<a href="' . $behance . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $tumblr ) : $output .= '<a href="' . $tumblr . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $soundcloud ) : $output .= '<a href="' . $soundcloud . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $rss ) : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon-s="" aria-hidden="true"></i></a>'; endif;
$output .= '</div>';
echo $output;
}
endif;
2 Likes