[Rue NelModerator]

Hey There,

Thanks for updating this thread!

With the release of X 4.0, we made a big change with the icons. Please see the changelog explaining the icon changes here: https://theme.co/changelog/#theme-4-0-0

We have check your other threads and found out you want to add yelp in the social icons. To do that, you will need to set up a child theme. What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once your child theme is ready, please try to add this code in your child theme’s functions.php file

// Custom Social Output
//
// Adding Yelp
// =============================================================================

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

    $yelp        = 'http://your-yelp-link-here/';

    $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;
      if ( $rss )         : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;

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

    $output .= '</div>';

    echo $output;

  }
endif;

Please check out the raw code here: http://pastebin.com/gucYKu3R

We’d love to know if this helped you.

[Chris StovallParticipant]

This worked great. I replaced soundcloud for yelp. That worked.

Are we limited to this amount of icons or can you add new ones in the list?

I’m trying to add or replace WhatsApp with an email icon.

What am I missing in this string. It’s not picking it up.

if ( $email ) : $output .= ‘<i class=”x-icon-envelope-o” data-x-icon=””></i>‘; endif;

I would also consider adding an email option in the theme moving forward.

Thanks!
CDS

[FriechModerator]

Hi There,

Yes, you could add a new social icon, after you add the new icon line.

if ( $emailme ) : $output .= '<a href="mailto:' . $emailme . '" title="Email"><i class="x-icon-email" data-x-icon=""></i></a>'; endif;

Then define your $email variable above with your email

$emailme = 'johndoe@gmail.com';

Hope it helps, Cheers!

[LelyModerator]

To replace Whatsapp with an email icon replace this line:

if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon=""></i></a>'; endif;

With this:

if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-email" data-x-icon=""></i></a>'; endif;

Hope this helps.

[Chris StovallParticipant]

Perfect. Thanks!

[Chris StovallParticipant]

Nope. There’s actually not an “email” icon that I can find on your icons page for integrity.

And the mouseover still reads “Whatsapp.”

Close though?

[ChristopherModerator]

Hi there,

Please provide us with URL and code you are using in functions.php file, I see there are two responses.

Thanks.

[SEVEROParticipant]

Hi there

How do you adjust the height of your custom icon using the code below:

.x-topbar .x-social-global .x-icon-pinterest-square:before {
content: url(http://www.mad-daily.com/wp-content/uploads/2015/12/social-subscribe.jpg);
}

Cheers

[LelyModerator]

Hello Severo,

You can change your CSS to this:

.x-topbar .x-social-global .x-icon-pinterest-square:before {
    background-image: url('http://www.mad-daily.com/wp-content/uploads/2015/12/social-subscribe.jpg');
    color: transparent;
    font-size: 52px; /*Adjust this to height/width of custom icon*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Hope this helps.

[CGROUP2Participant]

Hey I’m wanting to add houzz logo to my top bar. i have tried the previous recommendation but the x-icon still stays the same. Can you help me out with that?

[CGROUP2Participant]

I actually did get the icon to upload however, it doesn’t line up correctly with the other. Here is the web address to see what i’m talking about. – http://peacock.cunninghamadv.com/

[Rue NelModerator]

Hello There,

Thanks for updating this thread! Instead of adding this custom css:

.x-topbar .x-social-global .x-icon-behance-square:before {
    content: url(http://peacock.cunninghamadv.com/wp-content/uploads/2016/03/houzz_logo.png);
}

Please remove this from your customizer and have this code added in your child theme’s style.css. This code will only work in your child theme’s style.css because the customizer removes slash and backward slashes automatically for security purposes.

#top .x-social-global .x-icon-behance-square:before {
    content: "\f27c";
}

This code replaces the behance icon with a houzz icon (http://prntscr.com/adpvpy)

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

[CGROUP2Participant]

Yes. That worked thank you!!!!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Cindy HParticipant]

This worked for me too, but when I hover over the new Houzz icon, the tooltip still says Behance. Is there a quick way to change it to Houzz?
Thanks!
Cindy

[Author]

Posts