How To Add Google+ Icon to Spirit theme (UpFront Child)

Hi WPMU magnificents!

I need to add a Google+ icon to the floating navbar on the Spirit theme.
Attached is a screenshot pointing to the area in question.

Thanks so much!

  • Adam Czajczyk

    Hello Ruthie,

    I hope you're well today and thank you for your question!

    In order to add a new (e.g. Google+) icon please follow these steps:

    1. Create your icon, preferably using dimensions that would fit the design with no need to resize
    2. Upload that icon to your Media Library and copy its URL
    3. Enter Upfront editor
    4. Click on social icons area and select "Settings" icon (little gray "gear" icon, see below)

    5. An editor will pop out at the bottom of the screen; put following line into the "HTML" tab:

    <li><a class=&quot;social-icon gplus&quot; href=&quot;http://google.com&quot; target=&quot;_blank&quot;></a></li>

    Replace an URL with an URL of your G+ profile; click "Save" in the bottom-right corner of an editor

    6. Switch that editor to "CSS" tab and put following CSS code at the end of existing code (as a last line):

    .gplus {background:url('YOUR_ICON_URL') center center no-repeat;}

    Replace the YOUR_ICON_URL with an URL of your G+ icon; click "Save" in the bottom-right corner of an editor

    7. Now drag the left border of the "social icons" area/element so it became wider and the new icon would "jump in in place". See screenshot below:

    8. Now save Upfront and your new icon should be there, ready to be clicked :slight_smile:

    I used an animated kitten here but that's not a must, you may want to use a proper Google Plus icon instead :wink:

    Have a great day!
    Adam

  • Kaboomski

    Hi there,

    Thanks for your help! Overall this method worked. Admittedly I am wondering if there's going to be standard social icons included for all popular platforms at a later date, such as many other common themes offer. I like the minimalist approach, but think the icons would be useful for a large audience.

    The new icon is visible, but still needs some tweaking since there is no mouse-over effect like the icons that came with the theme. Can I just use CSS to colorize this to gray, or do I need a whole new image rollover?

    Thank you!

  • Dimitris

    Hey there Ruthie,

    hope you're doing good today and don't mind skipping in!

    Thanks for your help! Overall this method worked. Admittedly I am wondering if there's going to be standard social icons included for all popular platforms at a later date, such as many other common themes offer. I like the minimalist approach, but think the icons would be useful for a large audience.

    I'm glad that you made this work! About new features, you can always use our Features&Feedback section. More people agreeing in these additions, more possible for these to be implemented in a future release. :wink:

    The new icon is visible, but still needs some tweaking since there is no mouse-over effect like the icons that came with the theme. Can I just use CSS to colorize this to gray, or do I need a whole new image rollover?

    The on-hover effect actually replaces the image with another grayed-out one. You can also do so for your G+ link. Simply create a second image and use it through CSS like

    #upfront-code_element-object-1452574180088-1304 .googlePlus:hover {
        background: url('YOUR_NEW_ICON_URL') center center no-repeat;
    }

    Hope that helps,
    Dimitris :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.