Hello there,
I have the Integrity stack set - is it possible to use the alternative social media icons that come with the Brands font set?
For example, Integrity uses ‘facebook-square’ whereas we would like to use ‘facebook-f’.
They are in the Brands cheatsheet: https://fontawesome.com/cheatsheet/free/brands
Is this possible within the theme settings or shall I force this with CSS?
Cheers!
Spencer
Hi Spencer,
If you are using X theme, those are already set on the stacks CSS. You need to force it with CSS.
In case you are using Pro, you have the flexibility to add Social Icon v2 element and adjust as you need.
So the answer to your question is, it depends on which theme you are using: Pro or X theme.
Hope this helps.
Hi @Lely
Thanks for getting back to me - I’m using X.
Yes, I can see the icon variations, I just wasn’t sure if there was a way to switch these in the theme settings itself.
Cheers!
Spencer
Hello Spencer,
By default, we are using square icons for the social networking profiles in the theme. This applies to all stacks that you can use in the theme. If you need to change it to another icon, you will have to modify the social icon functions within the theme. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// 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' );
$target_blank = x_output_target_blank( false );
$output = '<div class="x-social-global">';
$output = apply_filters( 'x_social_global_before', $output );
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 = apply_filters( 'x_social_global_after', $output );
$output .= '</div>';
echo apply_filters( 'x_social_global', $output);
}
endif;
// =============================================================================
In the code above, you will have to change the following:
class="x-icon-facebook-square" into class="x-icon-facebook-f"
data-x-icon-b="" into data-x-icon-b="".We would love to know if this has worked for you. Thank you.
Hi @RueNel
Thanks for getting back to me - I have fixed this using CSS, but will try your suggestion for the sake of best practise and getting to know the theme better. We are starting to us it a lot for different projects, so these tips will be invaluable.
Regards,
Spencer
You are most welcome Spencer!
Happy Holidays!!!
Thanks Spencer!