Topic: Add new social media icons

1 2 →

Author

Posts

November 23, 2014 at 7:53 am #150981

Participant

Hey, I love the social section in customiser, is there a way to add new icons to the list and also is there a way to style the icons if we wanted to replace them.

Many thanks

November 23, 2014 at 11:06 pm #151276

Christian

Moderator

Hey Steve,

There is no option to add icons but we can utilize social channels that are available but you’ll not be using. You can either choose icons from http://fortawesome.github.io/Font-Awesome/icons/ or 24px png image. Please give us the URL of your site so we could see your current setup and so we could give you a tailored solution.

Thanks.

November 24, 2014 at 6:33 am #151524

Steve Woody

Participant

This reply has been marked as private.

November 24, 2014 at 9:34 am #151698

Zeshan

Member

Hi Steve,

Thank you for writing in!

Please add following 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', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $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"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square"></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"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-soundcloud"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

Hope this helps. 🙂

Thank you.

December 2, 2014 at 5:13 pm #157024

Steve Woody

Participant

I dont see sound cloud in that file you sent ?

Thanks for sending it but is it right ?

December 3, 2014 at 2:10 am #157209

Christopher

Moderator

Hi there,

Please change your code to this 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', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $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"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square"></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"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-soundcloud"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square"></i></a>'; endif;
$output .= '<a href="soundcloud URL here" class="soundcloud" target="_blank"><i class="fa fa-soundcloud"></i></a>';

    $output .= '</div>';

    echo $output;

  }
endif;

Hope it helps.

December 8, 2014 at 7:31 am #160334

uncleshneerson

Participant

Hi!
How i can add VK (http://fortawesome.github.io/Font-Awesome/icon/vk/) and SoundCloud (http://fortawesome.github.io/Font-Awesome/icon/soundcloud/) links in the footer social button? i update functions.php file, but it didn’t help

upd
<i class="fa fa-vk"></i> – isn’t displayed, when i change it on <i class="x-icon-sign-in"></i> (exemple) – all works

sorry for my english

December 8, 2014 at 7:45 am #160348

Kosher K

Member

Hi There,

You can try adding this code below in Customizer > Custom > Javascript,

(function($){ 
	$('.bottom .x-social-global').append('<a href="#social-link" class="souncloud" title="SoundCloud" target="_blank"><i class="x-icon x-icon-soundcloud"></i></a><a href="#social-link" class="vk" title="VK" target="_blank"><i class="x-icon x-icon-vk"></i></a>');
})(jQuery)

Hope that helps,

have a great day

December 8, 2014 at 8:14 am #160377

uncleshneerson

Participant

All works

Big thanks!

December 8, 2014 at 9:17 am #160424

Christopher

Moderator

You’re welcome.

December 11, 2014 at 4:54 am #162575

Steve Woody

Participant

That last code is perfect, just need to be aware that if you want it in the top bar you need to remove .bottom from the code. Love it and much easier than the previous reply thank you

December 11, 2014 at 11:24 am #162800

Zeshan

Member

You’re most welcome Steve! And thank you for the suggestion! 🙂

May 25, 2015 at 1:36 pm #281416

WPC

Participant

This reply has been marked as private.

May 25, 2015 at 3:18 pm #281469

Nabeel A

Moderator

Hi Andy,

To add a Weibo icon with other social icons, just add the following jQuery script via Appearance > Customize > Custom > Javascript

(function($){ 
	$('.x-social-global').append('<a href="#social-link" class="weibo" title="weibo" target="_blank"><i class="x-icon x-icon-weibo"></i></a>');
})(jQuery)

Replace the #social-link with actual URL. Don’t forget to clear your browser’s cache after adding the code.

Let us know how this goes!

October 15, 2015 at 3:45 pm #627062

gellis

Participant

This reply has been marked as private.

Author

Posts

1 2 →