Adding Goodreads icon

I need to add a Goodreads icon to the TopBar, and Footer. I’ve found several ways to do it, but none seem to be working properly.

You can see the site here:

http://robincovingtonromance.novelwebsitedesignprivacy.com/

I’ve added the Icon, but can’t get it to resize dynamically, nor have proper coloring.

What am I missing?

Thanks in advance!

-W

Hi there,

The way you added the logo is not correct. You need to add the icon to the top section by overriding the file below to your Child Theme:

ORIGINAL: wp-content/themes/x/framework/functions/global/social.php
CHILD THEME: wp-content/themes/x-child/framework/functions/global/social.php

You will need to create folders as above on your child theme. Then you can add your code at the end of line 60 something like this:

$output .= '<a href="URL OF THE BUTTON" class="goodreads" title="Good Reads" target="_blank"><i class="x-icon-rss-square" data-x-icon="g" aria-hidden="true"></i></a>';

Then you can use a Custom CSS code to style things around. Kindly read the article below regarding the best practices of the customization:

Thank you.

I’ve added the social.php to my Child theme, and then added line 60-ish, as above, changing the URL to be where the button should take you.

But, there is no GoodReads icon showing in the TopBar, nor the Footer.

What did I miss?

Thanks, W

Hello There,

Thanks for updating in! Since GoodRead is not part of the Font Awesome icons, it will not display. You will need to supply the icons image image. Like for example, have this code added:

$output .= '<a href="URL OF THE BUTTON" class="goodreads" title="Good Reads" target="_blank"><img src="path-of-the-goodreads-image-here" alt="GoodReads icon"></a>';

Hope this helps.

Thanks for the code update. I’ve updated it, and am including a link to an .svg file for the icon itself, but I’m still not seeing the icon in the TopBar or Footer.

I can’t seem to send the code itself. But, what else might I be missing?

Thanks,

W

Hi @walt,

I’m sorry we missed this before, but because that’s a function it will need to go in functions.php of your child theme. You’ll want to copy the function x_social_global from wp-content/themes/x/framework/functions/global/social.php into functions.php of the child theme. Here’s a sample you can copy directly from this thread and modify to include your image.

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 .= '<a href="URL OF THE BUTTON" class="goodreads" title="Good Reads" target="_blank"><img src="path-of-the-goodreads-image-here" alt="GoodReads icon"></a>';

    $output .= '</div>';

    echo $output;

  }
endif;

Woohoo! We’re getting SOOOO close. That last bit worked (!!!), and I’ve got a GoodReads icon in the TopBar and Footer. I had to massage the CSS a little to get it lined up properly, and sized correctly, but it’s there!

However…the color doesn’t match. Can that be done dynamically, or do I need to do it in Photoshop, or something?

And, while I’m asking, how would I dynamically size/resize this icon?

Huge thanks!

-W

Hi There,

As it is an image, you need to edit the color on Photoshop or similar software.

I am not sure what you mean by changing the size dynamically, at this moment the image has the correct size, but if you would like to change the size you can add the following code to Theme Options CSS

.x-social-global img {
width: 30px; }

Hope it helps!

Cool! That works! Thanks for the help!

-W

Glad that we could be of a help.