[SmarticleParticipant]

Hi, How can I make these icons perfectly square?

They are in the footer and the header.

https://snag.gy/kaEtsy.jpg

http://gkstrategy.wpengine.com

Thanks

[SmarticleParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

These social media icons look like this, I tried doing some tricks like adding a square background but does not look good since they are transparent in the middle, you will need to switch them for custom icons.

Please refer to the following threads for a possible implementation.
– (https://community.theme.co/forums/topic/custom-social-media-icons-2/)
– (https://community.theme.co/forums/topic/want-to-add-custom-social-media-icons-how-to-do-it/page/2/#post-318884)

Hope that helps.

Joao

[SmarticleParticipant]

Can I have the code to change them to square anyway please?

They never hover over the top of anything so I don’t see the problem. Would also be handing to have the code for future reference.

Thanks

[JoaoModerator]

Hi There,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After that open/edit your child theme’s functions.php file and paste the code below in there.

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', '' );
    $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    . '" title="Facebook" target="_blank"><i class="x-icon-facebook" data-x-icon=""></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" title="Twitter" target="_blank"><i class="x-icon-twitter" data-x-icon=""></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" title="LinkedIn" target="_blank"><i class="x-icon-linkedin" data-x-icon=""></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon=""></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon=""></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" title="YouTube" target="_blank"><i class="x-icon-youtube" data-x-icon=""></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" title="Vimeo" target="_blank"><i class="x-icon-vimeo" data-x-icon=""></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" title="Pinterest" target="_blank"><i class="x-icon-pinterest" data-x-icon=""></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon=""></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon=""></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" title="Behance" target="_blank"><i class="x-icon-behance" data-x-icon=""></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" title="Tumblr" target="_blank"><i class="x-icon-tumblr" data-x-icon=""></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" title="Whatsapp" target="_blank"><i class="x-icon-email" data-x-icon=""></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon=""></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" title="RSS" target="_blank"><i class="x-icon-rss" data-x-icon=""></i></a>'; endif;
     

    $output .= '</div>';

    echo $output;

  }
endif;

Than Add to your Appereance Customizer CSS :

.x-icon-facebook:before ,.x-icon-twitter:before,.x-icon-linkedin:before {
  color: white; }
}
.x-entry-share .x-share {
background: orange;

.x-entry-share .x-share:hoover {
background: yellow;
}

Hope that helps,

Joao

[Author]

Posts