Docs

[jrhager84]

I’m just looking to replace my social icons in the footer (pinterest, dribbble, github) with (tripadvisor, yelp, mailchimp) respectively. It doesn’t seem as though X’s shortcodes include 4.2 FA icons, so I also need help on how to get those to show as well. Thanks!

http://www.steveslanding.com

[Rue Nel]

Hello There,

Thanks for writing in! You can setup the social icons in the customizer, Appearance > Customize > Social. Regretfully TripAdvisor, Yelp and Mailchimp is not part of it. You need to have a custom social icons functions and display the mentioned icons. To do so, please insert this following code in your child theme’s functions.php file.

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' );

    $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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" 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="" 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="" aria-hidden="true"></i></a>'; endif;

      //
      // Add your custom icons here 
      //

      // Trip Advisor
      $tripadvisor  = 'your-link-here';
      if ( $tripadvisor )  : $output .= '<a href="' . $tripadvisor  . '" class="tripadvisor" title="Trip Advisor" target="_blank"><i class="x-icon-tripadvisor" data-x-icon="" aria-hidden="true"></i></a>'; endif;

      // Yelp
      $yelp  = 'your-link-here';
      if ( $yelp )  : $output .= '<a href="' . $yelp  . '" class="yelp" title="Yelp" target="_blank"><i class="x-icon-yelp" data-x-icon="" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

}

Please copy the raw code here (http://pastebin.com/sq5Gukrk) to preserve the unicode html entities or data-x-icon values.

Please also keep in mind that MailChimp is not part of Font awesome icons. You can find all the latest icons from here:
http://fontawesome.io/icons/

Hope this helps.

[jrhager84]

If I wanted to use the mailchimp logo, how would I display it? I’ve uploaded it to my site – http://www.steveslanding.com/site_uploads/2016/08/mailchimp.png. I have copied the code changing the variable and all to make it ‘mailchimp’ I think all I’m missing is the appropriate use of the icon location. Thanks!

[jrhager84]

Even in customizer, I cannot for the life of me get to edit the footer since editing the child theme’s php to add custom social icons. How do I fix this? Even the code in Global CSS doesn’t take the background, or the footer content color. Thanks!

[Christopher]

Hi there,

Please add this line of code :

 $custom-social  = 'your-link-here';
      if ( $custom-social )  : $output .= '<a href="' . $yelp  . '" class="mailchimp" title="mailchimp" target="_blank"><img src="http://www.steveslanding.com/site_uploads/2016/08/mailchimp.png"></a>'; endif;

Your CSS code is working fine, please see the attachment.

I cannot for the life of me get to edit the footer since editing the child theme’s php to add custom social icons

Please provide us with more information about what you’re trying to achieve.

Hope it helps.

[jrhager84]

I have a background image in the footer, and it’s not there anymore. I also can’t change the font color on the footer content.

Also – How do I size the icon to match the FA icons? I can’t find default sizes anywhere. Also – How do I adopt the same color overlay and whatnot? Thanks!

[jrhager84]

One more thing — The shortcodes don’t work for icons in the php file. Where are you finding the x-data paths at? I’ve searched everywhere…

[Rad]

Hi there,

Please change your CSS’s comments from this

// Footer Background

to this

/* Footer Background */

Please change all of them, CSS comments are wrapped with /* */. The // is only working on javascript.

As for the icon, instead of this (FA icon)

<i class="fa fa-users" aria-hidden="true"></i>

please add this (X Icon)

<i class="x-icon x-icon-users" data-x-icon="&#xf0c0;" aria-hidden="true"></i>

The  is the icon code that can be found here http://fontawesome.io/cheatsheet/

Hope these helps.

Thanks!

[jrhager84]

Perfect. I was trying to find those codes. I guess I’m just not sure where the fa code goes within the x theme code. Still confused. hahaha

[Nico]

No worries, you can always feel free to ask us again in case something is cofusing.

Have a great day! 🙂

[Author]

Posts