[threeotenParticipant]

I want to be able to add my own custom icon to the footer and possibly elsewhere. I also want it to have a before & hover state like the other icons and be the same size as the rest. I see several different solutions when I search, but some of them are out of date, using old icon classes and whatnot. What is the best, up to date way to do this? Site: http://www.quailsprings.org

Thanks

[FriechModerator]

Hi There,

Thank you for writing in! Was it a fontAwesome icon or an image icon? If it is an image icon you can place an image with <img> tag (e.g. <img src="ICON URL HERE" />) on a text widget.

Please clarify what hover effect you want it to have.

Thanks.

[threeotenParticipant]

For now I especially want the custom icon to appear in the footer. I tried to use the pintrest icon by pasting the custom link into the pintrest field in customizer > social. But I don’t know how to get the icon to change from pintrest to my custom icon and be the correct size and also have the same hover link effect that the other footer social buttons do. I don’t even know if this is the best way to accomplish this.

[FriechModerator]

Hi There,

Sorry, I am not entirely certain of the issue, can you add back the Pinterest on the footer and provide us the custom icon you want to use so we can take a look?

Thanks.

[threeotenParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Yup replacing it would work, but I don’t recommend that. Lets add the custom icons as image. Please edit your child theme’s functions.php file and add the code below.

// =============================================================================
// Social Icons + custom 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', '' );
    $quailsprings       = 'YOUR CUSTOM 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="' . $quailsprings        . '" class="icon-quailsprings" title="Quailsprings" target="_blank"><img src="http://www.quailsprings.org/wp-content/uploads/2017/03/numundo-logo1.png" /></a>';
      
    $output .= '</div>';

    echo $output;

  }
endif;

Replace the YOUR CUSTOM URL HERE with the actual URL to where you want to link that icon.

Add this on custom CSS for the hover effect.

.icon-quailsprings:hover {
	background-color: lightblue;
}

Hope it helps, Cheers!

[threeotenParticipant]

I had to add the following CSS to get things to look right:

.icon-numundo {
  vertical-align:4px;
  width:25.8px;
}

.icon-numundo:hover {
  background-color:#967b6c;
  width:25.8px;
}

Except for the hover, because the custom one is a .png and not a font icon, the hover isn’t working. “background-color” makes the whole background behind the logo change color on hover, not the icon itself (see attachment). Is there a way I can make it change color on hover like the other icons?

[FriechModerator]

Hi There,

Please update this:

.icon-numundo:hover {
  background-color:#967b6c;
  width:25.8px;
}

to this:

.icon-numundo:hover img {
    background-color: #967b6c;
    width: 25.8px;
    border-radius: 20px;
}

Cheers!

[Author]

Posts