Topic: Add new social media icons | Themeco Community

← 1 2

Author

Posts

October 15, 2015 at 5:20 pm #627200

Moderator

Hi there,

Please add this in the functions.php in the 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', '' );
    $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="amazom URL here" class="amazon" target="_blank"><i class="fa fa-amazon"></i></a>';

    $output .= '</div>';

    echo $output;

  }
endif;

October 26, 2015 at 10:10 am #640061

gellis

Participant

This reply has been marked as private.

October 26, 2015 at 12:45 pm #640256

Jade

Moderator

Hi there,

Please try to use this code instead of the previous one:

// 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;
     
      //
      // You can insert your custom icons here
      //
 
      // Amazon
      $amazon = 'http://your-amazon-link/';
      if ( $amazon )  : $output .= '<a href="' . $amazon  . '" class="amazon" title="Amazon" target="_blank"><i class="x-icon-amazon" data-x-icon=""></i></a>'; endif;
 
 
 
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;
 
    $output .= '</div>';
 
    echo $output;
 
  }
endif;
// =============================================================================

Please copy the raw code here (http://pastebin.com/FC0RZnG0) to preserve the Unicode HTML entity (data-x-icon). And please do not forget to insert your Amazon profile links.

And then add this CSS in the Customizer or the style.css in the child theme:

.x-social-global a i {
    color: #fff !important;
}

.x-social-global a:hover {
    background-color: #FF9900 !important;
}

We would loved to know if this has work for you. Thank you.

October 26, 2015 at 1:23 pm #640308

gellis

Participant

This reply has been marked as private.

October 26, 2015 at 2:23 pm #640385

Jade

Moderator

Hi there,

Try to add this in functions.php

add_action( 'wp_head', 'load_fontawesome', 99999 );

function load_fontawesome() {	
?>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<?php
}

And add this in the style.css in the child theme

.x-icon-amazon:before {
    content: "\f270" !important;
}

Hope this helps.

October 26, 2015 at 2:27 pm #640393

gellis

Participant

That’s it! It did not work with the added CSS but it does work without it. Thanks so much!

October 26, 2015 at 3:20 pm #640470

Jade

Moderator

You’re most welcome. Cheers!

January 18, 2016 at 9:41 am #751300

Gringo418

Participant

Hi!

I’m trying to do the same, but it doesn’t work…

Here’s the site: http://www.aninvigoratedlife.com

I’ve tried this :

(function($){ 
	$('.bottom .x-social-global').append('<a href="http://www.tastespotting.com/profile/aninvigoratedlife/submissions/1" title="TasteSpotting" target="_blank"><i class="x-icon x-icon-tags"></i></a>');
})(jQuery)

Can you help me please?

Thanks!

January 18, 2016 at 10:40 am #751384

Thai

Moderator

Hi @gringo418,

Please update your code a bit:

(function($){ 
		$('.bottom .x-social-global').append('<a href="http://www.tastespotting.com/profile/aninvigoratedlife/submissions/1" title="TasteSpotting" target="_blank"><i class="x-icon x-icon-tags" data-x-icon="" aria-hidden="true"></i></a>');
	})(jQuery);

Hope it helps 🙂

January 18, 2016 at 10:43 am #751388

Gringo418

Participant

Thank you very much!

Works like a charm!

Very good support!

January 18, 2016 at 11:37 am #751489

Thai

Moderator

You’re very welcome 🙂

If you need anything else, please let us know.

January 18, 2016 at 1:15 pm #751647

Gringo418

Participant

There’s still a little bug. I have change to icon to Cutlery in the code, and it’s still the TAGS one showing. I’ve tried to empty the cache, to clear the code, but it’s still showing TAGS icon. Here’s the code :

(function($){
`$(‘.bottom .x-social-global’).append(‘<a href=”http://www.tastespotting.com/profile/aninvigoratedlife/submissions/1″ title=”TasteSpotting” target=”_blank”><i class=”x-icon x-icon-cutlery” data-x-icon=”” aria-hidden=”true”></i></a>’);
})(jQuery);`

The website address : http://www.aninvigoratedlife.com

Thanks again!

January 18, 2016 at 5:53 pm #751996

Jade

Moderator

Hi there,

Please use this code instead:

(function($){ 
    $('.bottom .x-social-global').append('<a href="http://www.tastespotting.com/profile/aninvigoratedlife/submissions/1" title="TasteSpotting" target="_blank"><i class="x-icon x-icon-cutlery" data-x-icon="" aria-hidden="true"></i></a>');
})(jQuery);

Hope this helps.

January 18, 2016 at 6:38 pm #752043

Gringo418

Participant

Works perfectly! Thanks!

Have a good day!

January 18, 2016 at 10:54 pm #752326

Zeshan

Member

You’re most welcome! 🙂

Author

Posts

← 1 2