Docs

[clarioncreative]

Hi There!
I’ve seen a few posts where you helped some folks customize the social media icons. I tried to follow along and paste in and change for my needs, but sadly I know nothing of css so as you may have guessed… my results were inadequate!

Our client has an Etsy store, but I didn’t find any icons, so I made my own and have uploaded it.

I will create another post with log in credentials, and maybe you all can help me figure it out!
Thanks in advance!
And Happy New Year!

M

[clarioncreative]

Oh shoot – I am realizing now that we are rebuilding the site offline, so you can’t even help me until we launch. Sorry about the post, I’ll have to make another one later I suppose!

[Prasant Rai]

That’s not an issue. Let us know when your website’s live.

Thanks.

[Friech]

Hi There,

Thanks for writing in! Would you mind providing us a little more clarification? Is the social icons that you’re referring to is the one on the topbar (header) and footer? And is this (http://fontawesome.io/icon/etsy/) the Etsy icon that you’re after? If so, add the code below on your child theme’s functions.php file.

// =============================================================================
// Custom Social ICON
// =============================================================================

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', '' );
    $etsy       = 'YOUR ETSY STORE URL 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-email" 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;
                            $output .= '<a href="' . $etsy        . '" class="etsy" title="Etsy" target="_blank"><i class="x-icon-etsy" data-x-icon=""></i></a>';
      
    $output .= '</div>';

    echo $output;

  }
endif;

Replace the YOUR ETSY STORE URL HERE with the actual store URL.

Here’s a thing, since that Etsy icon is only available to the latest version of fontAwesome, and the fontawesome that is come with Cornerstone is not updated yet. You need to add the code below on your functions.php too for the time being.

/**
enqueue_latest_fontawesome
*/
add_action('wp_head','enqueue_latest_fontawesome');
function enqueue_latest_fontawesome () {  ?>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<?php 
}

If this is not what you’re after, please clarify.

Cheers!

[clarioncreative]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in and for providing the information. Before you can add the custom Etsy image icon, you need to have a child theme and also add the custom functions as suggested by @Friech in his last reply. Simply follow his suggestion and the issue should be resolve.

Please let us know how it goes.

[clarioncreative]

Seems as though I have done something wrong – there was no change after making the modifications suggested – please advise.
Thanks!

[clarioncreative]

After rereading and trying again, I’m now getting the following error and am unable to access anything to fix it, please advise.

“Parse error: syntax error, unexpected ‘*’ in /home/nanabygs/public_html/wp-content/themes/x-child/functions.php on line 26”

[clarioncreative]

My wonderful tech guy was able to get the site back working.

[Paul R]

Glad to hear that. Have a great day! 🙂

[Author]

Posts