Custom Social Icons In Footer

Prasant · May 14, 2018, 5:54pm

Thanks for asking.

You can use background image property to set custom social icon images. I suggest you to please take a look at following thread:

Let us know how it goes

Thanks.

rotation · May 14, 2018, 6:29pm

The links go no where

mldarshana · May 14, 2018, 7:26pm

Hi There,

Please try following this link (https://theme.co/apex/forum/t/custom-social-icon/31742/4?u=mldarshana).

Thanks!

rotation · May 14, 2018, 10:02pm

what file type should I use ? I need vector quality icons

friech · May 15, 2018, 1:36am

Hi Rotation,

You’re looking for SVG file type, please read the following article for more details and basis

Choosing Between SVG, JPEG, and PNG

Hope that helps,
Cheers!

rotation · May 18, 2018, 7:54pm

I want to add a circle icon not square or just any image that is svg file ill save and upload to the media center. how can I do that ?

Thanks

jade · May 18, 2018, 9:06pm

Hi there,

If you are either trying to replace the default social icons that are in the Theme Options or trying to add new social icons, it would be easier if you do the changes in the code that displays the social icons.

You will have to install the child theme first then add this code in the functions.php which you can find in wp-content/themes/x-child:

https://theme.co/apex/child-themes

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' );
    $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="&#xf082;" 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="&#xf081;" 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="&#xf0d4;" 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="&#xf08c;" 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="&#xf169;" 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="&#xf180;" 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="&#xf166;" 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="&#xf194;" 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="&#xf16d;" 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="&#xf0d3;" 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="&#xf17d;" 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="&#xf16e;" 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="&#xf092;" 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="&#xf1b5;" 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="&#xf174;" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="&#xf232;" 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="&#xf1be;" 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="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

You can them make the modification in the code provided above.

If you aim to use your custom FB icon or any icon that is in X by default, you can make changes to lines like this:

 if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="&#xf082;" aria-hidden="true"></i></a>'; endif;

to this:

 if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank">YOUR SVG HERE</a>'; endif;

Notice that in the code <i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i> should be replaced by the SVG code that you want to use . So you will have to change YOUR SVG HERE to the SVG code that is either the <svg> tag or the <img> tag.

You can find more information on how to embed an SVG here:

If you want to add new icons, you can do so by add few lines of code before $output .= '</div>';. So after 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;, you could have:

$output .= '<a href="https://example.com"><img src="example.svg" alt="The new social link" /></a>';

Notice that the code above is making use of the <img> tag to embed the svg on the page.

Hope this helps you get started.

rotation · May 19, 2018, 5:33pm

So I can embed in the same place as the default social icons are now ?

I did try to upload svg files I got an error. Do I need to ad something to the functions.php file?

christopher · May 20, 2018, 6:07am

Hi @rotation,

Wordpress does not allow to upload an SVG image to the media section by default. You will need to install a Child Theme and add the PHP code below to functions.php file of the Child theme:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Thank you.

rotation · May 25, 2018, 2:27am

so I added all the code above successfully in child theme php functions file, I was able to add the svg files to the media center also successfully . but the images are way to large and it gave some warnings message, the little icons are png files I was testing. How can I fix this? Maybe I missed a step ? How can I make the svg image smaller ? did I save it too large?

friech · May 25, 2018, 3:11am

Hi There,

Lets apply a max-width property on those icons so they don’t get a lot bigger. Please add this to Theme Options > CSS

.x-colophon.top .widget_media_image {
	max-width: 56px !important;
}

I think the .png should be fine, since these are only social icon links and does not really need to be so big.

Hope it helps,
Cheers!

rotation · May 31, 2018, 10:18am

I add that code and it gave me a similar warning as before, I would like to use svg images, how can I do this ? do I still need that code?

Thanks

rad · May 31, 2018, 11:38am

Hi @rotatio,

I’m not sure if that’s going to work with SVG. Please check this https://stackoverflow.com/questions/6532261/how-do-you-get-the-width-and-height-of-an-svg-picture-in-php. It will still get that warning or probably error since it doesn’t have width or height since it’s a vector.

And CSS may fail setting dimension to an SVG rendering. Please use PNG or JPG instead.

Thanks!

rotation · June 1, 2018, 6:38pm

The issue is I want super clean images so its not blurry if you zoom in For example if you zoom in to this forum site the apex logo never is blurry its super clean, is that a vector image is it a png.?

ruenel · June 1, 2018, 10:08pm

Hey There,

The APEX logo is using SVG and this was custom coded. Using .png will able you to get the sharpest image you can get as close as an SVG image. SVG is only good if you have more controls over the element and that you are doing it via custom code.

Hope this helps.

rotation · June 2, 2018, 12:26am

if you look at the beginning of the this I asked if there was a way and the reply was yes with some code, but it didn’t work . Can I put this in the site am I close to making this real? seems now its some secret custom code? Im confused on the last reply

ruenel · June 2, 2018, 3:11am

Hello There,

Do you have a staging area where we can apply the code? Please provide us the WP credentials of the staging area in the following manner:

WP staging url
WP username
WP password

Thank you.

rotation · June 2, 2018, 4:48am

I replied in secure note

thai · June 2, 2018, 10:46am

Hi There,

Please try with this code instead. The code below should be added under functions.php file locates in your child theme:

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"><img src="https://totoyama.rotationmedia.net/wp-content/uploads/2018/05/Facebook-Icon.svg" /></a>'; endif;
	if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="&#xf081;" aria-hidden="true"></i></a>'; endif;
	if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><img src="https://totoyama.rotationmedia.net/wp-content/uploads/2018/05/Google-Icon.svg" /></a>'; endif;
	if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="&#xf08c;" 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="&#xf169;" 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="&#xf180;" 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="&#xf166;" 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="&#xf194;" aria-hidden="true"></i></a>'; endif;
	if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><img src="https://totoyama.rotationmedia.net/wp-content/uploads/2018/05/Instagram-Icon-01-01.svg" /></a>'; endif;
	if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="&#xf0d3;" 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="&#xf17d;" 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="&#xf16e;" 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="&#xf092;" 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="&#xf1b5;" 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="&#xf174;" 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="&#xf232;" 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="&#xf1be;" 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="&#xf143;" aria-hidden="true"></i></a>'; endif;

	$output .= '<a href="#"><img src="https://totoyama.rotationmedia.net/wp-content/uploads/2018/05/Yelp-Icon.svg" /></a>';

  $output .= '</div>';

  echo $output;

}

After that add this custom CSS under Theme Options > CSS:

.x-topbar .x-social-global a {
    width: 21px;
}

Let us know how it goes!

system · June 12, 2018, 10:47am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.