Title: Need help adding social icon
Last modified: December 7, 2016

---

# Need help adding social icon

 *  [thebigcheese](https://wordpress.org/support/users/thebigcheese/)
 * (@thebigcheese)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/)
 * I’ve been using the Hueman theme on my page at [http://www.noodohs.com](https://www.noodohs.com)
   and I would like to add a new social icon to the social menu that gets displayed
   on the right side and in the footer. I followed [these instructions](http://presscustomizr.com/snippet/add-new-custom-socials-icons/),
   but it doesn’t seem to be working for me. My end goal is to have an icon/link
   to my page on Beam, which is currently being handled by the Twitch icon (not 
   ideal, obviously). To that end, here is my functions.php based on that tutorial:
 *     ```
       <?php
       /* Write your awesome functions below */
   
       add_filter('tc_default_socials', 'add_new_socials', 20);
       function add_new_socials($socials){
           $new_socials = array(
               //tc_yoursocial => array
               'tc_beam' => array(
                   'link_title'    => __( 'Follow me on Beam'), //title displayed on mouse hover
                   'option_label'  => __('Beam profile url'),
                   'default'       => "https://beam.pro" //your social link here
               ),
           );
   
           return array_merge( $socials, $new_socials );
       }
       ```
   
 * And then here is what is in my style.css:
 *     ```
       /*
       Theme Name: Noodohs - Hueman child
       Version: 1.0
       Description: A child theme of Hueman
       Template: hueman
       Author: Nick Glover
       */
       /* Your awesome customization starts here */
   
       /* Beam */ 
       .icon-beam:before {
           content: "";
           width: 18px;
           height: 18px;
           display: inline-block;
           background: url("https://www.noodohs.com/wp-content/uploads/2016/12/beam_ball_white.png") no-repeat;
           background-size: 18px 18px
       }
   
       /* change beam icon size in sidebars*/
       .social-block.widget_social .icon-beam:before {
           width: 14px;
           height: 14px;
           background-size: 14px 14px;
       }
   
       /* change beam icon size in footer */
       #footer.footer .colophon .icon-beam:before {
           width: 16px;
           height: 16px;
           background-size: 16px 16px;
       }
       ```
   
 * What am I doing wrong? I am not super knowledgeable about these things, so maybe
   someone can enlighten me.

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Menaka S.](https://wordpress.org/support/users/menakas/)
 * (@menakas)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8527800)
 * Hi,
    That post is meant for the customizr theme. For the hueman theme, this post
   offers a very simple solution. [https://wordpress.org/support/topic/adding-more-social-icons-1/](https://wordpress.org/support/topic/adding-more-social-icons-1/)
 *  Thread Starter [thebigcheese](https://wordpress.org/support/users/thebigcheese/)
 * (@thebigcheese)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8527823)
 * That post just says “add an icon,” which is not terribly helpful. How would I
   go about adding an icon? That is what I am trying to find out.
 *  [Denzel Chia](https://wordpress.org/support/users/denzel_chia/)
 * (@denzel_chia)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8527879)
 * Hi,
 * > My end goal is to have an icon/link to my page on Beam, which is currently 
   > being handled by the Twitch icon (not ideal, obviously)
 * You can make a feature request for this icon on Hueman Theme’s github.
    [https://github.com/presscustomizr/hueman/issues](https://github.com/presscustomizr/hueman/issues)
 * The theme Author will decide if he wants to include this icon.
 * Thank you
 *  Thread Starter [thebigcheese](https://wordpress.org/support/users/thebigcheese/)
 * (@thebigcheese)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8529420)
 * Attempting to follow the code you linked above, which does seem to allow me to
   replace existing icons, but I don’t understand how to replace it with a graphic
   I have uploaded.
 *  [Menaka S.](https://wordpress.org/support/users/menakas/)
 * (@menakas)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8532531)
 * Hi [@thebigcheese](https://wordpress.org/support/users/thebigcheese/),
    Replace
   the content line with the below one. Change image.jpg suitably.
 * `content: url(image.jpg);`
 *  Thread Starter [thebigcheese](https://wordpress.org/support/users/thebigcheese/)
 * (@thebigcheese)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8532554)
 * So, as it stands, I have this entered in the stylesheet:
 *     ```
       .social-links .fa-Twitch::before {
           content: url(https://www.noodohs.com/wp-content/uploads/2016/12/beam_ball_white.png);
       }
       ```
   
 * But that doesn’t replace the Twitch icon. When I had content: “\f09a”; instead,
   it would basically remove the icon, but that’s it.
 *  [Denzel Chia](https://wordpress.org/support/users/denzel_chia/)
 * (@denzel_chia)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8532751)
 * Hi,
 * You will need to remove the icon and replace with background image.
    Use the 
   following.
 *     ```
       .fa-twitch {
         background: url("https://www.noodohs.com/wp-content/uploads/2016/12/beam_ball_white.png") !important;
         width: 20px !important;
         height: 20px !important;
         background-repeat: no-repeat !important;
         background-size: 20px 20px !important;
       }
       .fa-twitch::before {
         content: none !important;
       }
       ```
   
 * This is how it will look.
    [http://image.prntscr.com/image/fd86798837984dfbb7dcab8f71f0fbe2.png](http://image.prntscr.com/image/fd86798837984dfbb7dcab8f71f0fbe2.png)
   [http://image.prntscr.com/image/1e40f6410b3444118eec4e210e93007d.png](http://image.prntscr.com/image/1e40f6410b3444118eec4e210e93007d.png)
 * By the way, there is no need to use a large image as an icon.
    You should have
   reduced it’s size.
 * Thank you
 *  Thread Starter [thebigcheese](https://wordpress.org/support/users/thebigcheese/)
 * (@thebigcheese)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8534312)
 * Great, thanks! I reduced it to 40×40 now. It’s working as you described, though
   it’s a little ugly having to have all that !important tags in there… Oh well.
   The mouse-over coloring is also not working the same as the others. Maybe it 
   would be better to just petition them to add more icons…
 *  [Denzel Chia](https://wordpress.org/support/users/denzel_chia/)
 * (@denzel_chia)
 * [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8537117)
 * You are welcome.
    Thank you

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Need help adding social icon’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/hueman/3.7.27/screenshot.png)
 * Hueman
 * [Support Threads](https://wordpress.org/support/theme/hueman/)
 * [Active Topics](https://wordpress.org/support/theme/hueman/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/hueman/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/hueman/reviews/)

 * 9 replies
 * 3 participants
 * Last reply from: [Denzel Chia](https://wordpress.org/support/users/denzel_chia/)
 * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/need-help-adding-social-icon/#post-8537117)
 * Status: not resolved