Docs

[Choi]

Hi!

Loving the theme so far!

I’m trying to add a WeChat social icon to the footer, but it’s not one of the choices. Is there a way to add it? You have the icon available in the icons list in Cornerstone already.

Also, how can I make a popup image on hover like on the bottom of this website (hover over the WeChat icon, second one): http://veemoment.com

Thanks!

Hanel

[Darshana]

Hi there,

Thanks for writing in! To add custom icons, please refer to the following example (https://community.theme.co/forums/topic/custom-social-icons-in-footer-using-renew/#post-346784).

Hope that helps.

[Choi]

Hi, thanks for the reply!

I tried following step by step but it isn’t working..

Here’s what I did:

1. installed x-child
2. added this code into Functions.php:
// 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’, ” );

// wechat Link
$wechat = ‘http://mynewyorkday.com/wp-content/uploads/2016/06/QR.jpg’;

$output = ‘<div class=”x-social-global”>’;

if ( $facebook ) : $output .= ‘<i class=”x-icon-facebook-square” data-x-icon=””></i>‘; endif;
if ( $twitter ) : $output .= ‘<i class=”x-icon-twitter-square” data-x-icon=””></i>‘; endif;
if ( $google_plus ) : $output .= ‘<i class=”x-icon-google-plus-square” data-x-icon=””></i>‘; endif;
if ( $linkedin ) : $output .= ‘<i class=”x-icon-linkedin-square” data-x-icon=””></i>‘; endif;
if ( $xing ) : $output .= ‘<i class=”x-icon-xing-square” data-x-icon=””></i>‘; endif;
if ( $foursquare ) : $output .= ‘<i class=”x-icon-foursquare” data-x-icon=””></i>‘; endif;

// WeChat
if ( $wechat ) : $output .= ‘<i class=”x-icon-wechat”></i>‘; endif;

if ( $youtube ) : $output .= ‘<i class=”x-icon-youtube-square” data-x-icon=””></i>‘; endif;
if ( $vimeo ) : $output .= ‘<i class=”x-icon-vimeo-square” data-x-icon=””></i>‘; endif;
if ( $instagram ) : $output .= ‘<i class=”x-icon-instagram” data-x-icon=””></i>‘; endif;
if ( $pinterest ) : $output .= ‘<i class=”x-icon-pinterest-square” data-x-icon=””></i>‘; endif;
if ( $dribbble ) : $output .= ‘<i class=”x-icon-dribbble” data-x-icon=””></i>‘; endif;
if ( $flickr ) : $output .= ‘<i class=”x-icon-flickr” data-x-icon=””></i>‘; endif;
if ( $behance ) : $output .= ‘<i class=”x-icon-behance-square” data-x-icon=””></i>‘; endif;
if ( $tumblr ) : $output .= ‘<i class=”x-icon-tumblr-square” data-x-icon=””></i>‘; endif;
if ( $whatsapp ) : $output .= ‘<i class=”x-icon-whatsapp” data-x-icon=””></i>‘; endif;
if ( $soundcloud ) : $output .= ‘<i class=”x-icon-soundcloud” data-x-icon=””></i>‘; endif;
if ( $rss ) : $output .= ‘<i class=”x-icon-rss-square” data-x-icon=””></i>‘; endif;

$output .= ‘</div>’;

echo $output;

}
endif;

3. went to APPEARANCE > CUSTOMIZE > CUSTOM > EDIT GLOBAL CSS and added:
.x-icon-wechat {
width: 32px;
height 32px;
text-indent: -9999px;
display: block;
background-image: url(wp-content/uploads/2016/07/tencent_wechat_163.48186528497px_1188703_easyicon.net_.png);
background-repeat: no-repeat;
}
.x-footer-social-icons.instagram:hover {
background-image: url(wp-content/uploads/2016/06/QR.jpg);
}

Is there something I’m doing wrong..?

Thanks in advance!

Hanel

[Choi]

Sorry, the last part with instagram:hover is incorrect, please disregard.

BTW, I know Cornerstone already has a wechat icon in its icon list. Is there a way I can just use one of the social links (such as XING) by changing which icon it pulls?

Thanks again!

Hanel

[Friech]

Hi Hanel,

Actually that is possible with custom CSS.

.x-social-global .x-icon-xing-square:before {
    content: "\f1d7";
}

You can add this under Custom > CSS in the Customizer.

Keep in mind; if the customizer remove the backslash ( \ ) on save. Double it ( \\ )

Hope it helps, Cheers!

[Choi]

Hi Friech,

That worked perfectly! Thanks so much!

One last question… is there a way to implement a popup image instead of a link when clicked?

Thanks again,

Hanel

[Jade]

Hi Hanel,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer although you can check on the Lightbox as this might help you get started. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Choi]

Hi Jade,

Understood. Thanks anyway and have a good one!

Hanel

[Joao]

Thanks for understanding.

Joao

[Author]

Posts