• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Installing Social Icons in a Menu

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Installing Social Icons in a Menu

This topic is: resolved

Tagged: inserting social icons in menu

  • This topic has 8 replies, 2 voices, and was last updated 8 years, 8 months ago by Critter.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 30, 2014 at 10:17 am #121893
    Critter
    Participant

    Guys. I've done this before with an older theme. I think my problem is selector versus class attributes.

    Phase 1
    I've FTP'd my social icons into my WordPress files

    Phase 2
    I've inserted the following code in my style sheet:

    /* Social Media Icons
    ------------------------------------------------------------ */

    #header ul li.social-facebook,
    #header ul li.social-linkedin,
    #header ul li.social-youtube,
    #header ul li.social-rss,
    #header ul li.social-email {
    float: left;
    }

    #header ul li.social-facebook a,
    #header ul li.social-facebook a:hover,
    #header ul li.social-linkedin a,
    #header ul li.social-linkedin a:hover,
    #header ul li.social-youtube a,
    #header ul li.social-youtube a:hover,
    #header ul li.social-email a,
    #header ul li.social-email a:hover,
    #header ul li.social-rss a,
    #header ul li.social-rss a:hover {
    display: block;
    height: 32px;
    margin: 0 0 0 10px;
    padding: 0;
    text-indent: -9999px;
    width: 32px;
    }

    #header ul li.social-facebook a {
    background: #5bb1f9 url(images/32X32_facebook.png);
    }

    #header ul li.social-facebook a:hover {
    background: #B7F46E url(images/32X32_facebook.png);
    }

    #header ul li.social-linkedin a {
    background: #3D2D84 url(images/32X32_linkedin.png);
    }

    #header ul li.social-linkedin a:hover {
    background: #B7F46E url(images/32X32_linkedin.png);
    }

    #header ul li.social-youtube a {
    background: #A0000F url(images/32X32_youtube.png);
    }

    #header ul li.social-youtube a:hover {
    background: #B7F46E url(images/32X32_youtube.png);
    }

    #header ul li.social-rss a {
    background: #FF9500 url(images/32X32_rss.png);
    }

    #header ul li.social-rss a:hover {
    background: #B7F46E url(images/32X32_rss.png);
    }

    #header ul li.social-email a {
    background: #FFCE00 url(images/32X32_email.png);
    }

    #header ul li.social-email a:hover {
    background: #B7F46E url(images/32X32_email.png);
    }

    Commentary

    * I'm not too sure that I need hashtags with the word header in my code
    * I want to insert my icons after my menu links (Real Talk Articles, How To Videos, Ebooks, About)
    * I wanted to my menu to mock the the Copyblogger site to a certain degree
    * As far as inserting the icons in the menu goes, does this sound like a good idea? Seemed appropriate to me.

    Any ideas on what I'm doing wrong and can you give me a couple suggestions that will make this idea work?

    If you didn't know, the icons won't appear using my current the set up.

    Thank!


    Clay Moseley

    http://claysplans.com
    August 30, 2014 at 12:04 pm #121899
    Brad Dalton
    Participant

    Create a new widget in the nav menu


    Tutorials for StudioPress Themes & WooCommerce.

    August 30, 2014 at 2:32 pm #121929
    Critter
    Participant

    About to try this Brad. Thanks as always. But does this mean I should go ahead and use the simple social icons plugin to drop in the widget? If so, that's awesome.

    I'm assuming that once I add that code to my PHP a new widget will be registered. Correct me if I'm wrong.


    Clay Moseley

    August 30, 2014 at 9:58 pm #121977
    Brad Dalton
    Participant

    That's right, then you can add anything you like into the widget.

    Be aware that you may need to use CSS to position the widget correctly in the theme as all themes are coded differently i haven't provided all the CSS for this.


    Tutorials for StudioPress Themes & WooCommerce.

    August 31, 2014 at 7:26 pm #122144
    Critter
    Participant

    Brad-

    I left a message on your site. I'm still playing around with it. The widget is registered, I just don't know how to set up the CSS to get the icons to appear. When I drop the simple social icon widget I get nothing. If you can provide a couple more nudges that would be awesome. Thank you for your help so far.


    Clay Moseley

    September 1, 2014 at 1:21 am #122186
    Brad Dalton
    Participant

    Hey Clay

    The code on my site generates exactly what you see in the screenshots on my site.

    Happy to answer any question about the code on my site, in the comments on my site. Thanks


    Tutorials for StudioPress Themes & WooCommerce.

    September 1, 2014 at 2:21 am #122189
    Brad Dalton
    Participant

    You will need to configure the social widgets settings and add your URL's to get the buttons to display.


    Tutorials for StudioPress Themes & WooCommerce.

    September 9, 2014 at 3:50 pm #123649
    Critter
    Participant

    Sorry man. Been away. I'm gonna see what I can do. Thanks for the reply.


    Clay Moseley

    September 9, 2014 at 3:54 pm #123650
    Critter
    Participant

    Closing this thread Brad. I'll reply on your site for now on.


    Clay Moseley

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble