[themouthygorillaParticipant]

Hi, I know there have been a number of threads regarding this and I have modified my functions.php according to the information in them and nothing has worked. Now I am scared of crashing my site.
How can I add a VK button along with my other ones in the same style and all inline with the rest that are working just dandily?
THanks. I’ll send info in next post

[themouthygorillaParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please add this code in the functions.php of your child theme:

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

    $output .= '</div>';

    echo $output;

  }
endif;
// =============================================================================

Please make sure to replace http://your-vkontakte-link/ with the actual link.

Hope this helps.

[themouthygorillaParticipant]

awesome. that worked. just one niggling question. the rest of the social icon buttons are boxes while the vkontakte one up there now is only the logo without a box which looks a little out of place. any way i can get the same style as the others?

[ThaiModerator]

Hi There,

Unfortunately, in the FontAwesome package, there is only one VK icon style:

http://fontawesome.io/icon/vk/

But you can try with the custom icon background, please add the following CSS under Customizer > Custom > Global CSS:

i.x-icon-vkontakte:before {
    opacity: 0;
}
i.x-icon-vkontakte {
    background: url(http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Vk-icon.png) no-repeat center center;
    background-size: 100% 100%;
    opacity: 0.5
}

Hope it helps 🙂

[themouthygorillaParticipant]

Hi Thai,
Gee I hope Im not getting on your nerves. It works, I mean it changed the icon, however, it is in the vkontakte’s branded colours. So it is a colour icon while all the rest are simply white and the background colour. Still looks strange))
Any ideas?

[ChristianModerator]

You’re using an image so you need to change the icon with a version that uses a white background or modify it in an image editing software.

Thanks.

[Author]

Posts