Social Icons

In this post i am referring to dcspecialevents.net

To the youtube, facebook twitter icons I want to remove the youtube one and add instagram and snapchat icons then add their respective links without messing up the whole layout.

Also I need the actual Instagram, snapchat icons if you already have them or do I just google/image to find them?

Any docs on how to do all this? If not please explain to me how to do this without me having to hack the thing.

All she want is to let her visitors click on these different social icons so they can visit her accounts on those websites.

Thanks

  • Nastia

    Hello Dave

    I hope you re doing well!

    Would you please clarify, is this regarding Upfront theme? If yes, then Upfront doesn't have icons for snapchat.

    To do this, it will require to add and remove some HTML code from the element.

    First, you can find social icons from iconfinder.com or from any other royalty free sites.

    This one is the closest to the existing social media icons.
    https://www.iconfinder.com/icons/194920/linkedin_outline_social_media_icon#size=128

    You should have two icons with a different colors for each social media. For example, one white and one red. The red icon will be shown on a mouse hover.

    Upload the images to your media library.

    All social icons are loaded through the Code element. So drag and drop the Code element to your site, select "Write custom code" option.

    - You should see HTML - CSS - JS editor at the bottom of the screen

    Please use the following as html:

    <ul class="socials">
      <li><a class="icon instagram" href="http://instagram.com/link/"></a></li>
      <li><a class="icon facebook" href="http://facebook.com/link"></a></li>
      <li><a class="icon twitter" href="http://twitter.com/user/link"></a></li>
       <li><a class="icon snapchat" href="http://snapchatURL/"></a></li>
    </ul>

    Replace the link with the actual link.

    Now add the following in your CSS editor:

    a.instagram{
    background: url(images/in-1.png) !important;
    }
    a.instagram:hover{
    background: url(images/in-2.png) !important;
    }
    a.facebook{
    background: url(images/in-1.png) !important;
    }
    a.facebook{
    background: url(images/in-2.png) !important;
    }
    a.twitter{
    background: url(images/in-1.png) !important;
    }
    a.twitter:hover{
    background: url(images/in-2.png) !important;
    }
    a.snapchat{
    background: url(images/in-1.png) !important;
    }
    a.snapchat:hover{
    background: url(images/in-2.png) !important;
    }

    Replace the images/in-2.png with the actual social meadia image URL .

    And save the changes. Let us know if you require any further assistance here.

    Cheers,
    Nastia

  • Dave

    I am taking this one step-at-a-time.

    So drag and drop the Code element to your site, select "Write custom code" option.

    Drag and drop code element exactly where? Please be more specific. Remember i am new to upfront.

    You should have two icons with a different colors for each social media. For example, one white and one red. The red icon will be shown on a mouse hover.

    I assume those are exact sizes no resizing needed but you threw me off with the red/white thing. The existing ones are white with back mouse over. What am I missing here?

    See attachment. This is where I am adding them. Just to the right of the existing icons.

    Also i cannot replace the link with actual if I don't know what the actual link should look like. Remember I am only dragging and dropping the codes. I am not familiar with the actual link structure.

  • Dave

    To be clear I know that those html links has to go to their respective social media accounts links and that the images in the css has to point to my uploaded social media images (including the hover images) which I linked them to but I still don't see the expected results.

    I assume these will be a new set of social media icons replacing the existing ones there now.

    Either way it is still not working. I left my changes there for you to see. Of course it is not completed.

  • Sajid

    Hi Dave,
    Hope you are doing good today :slight_smile:

    Drag and drop code element exactly where? Please be more specific. Remember i am new to upfront.

    The code element sit right under Draggable Elements section as pointed by Nastia in this screenshot when you launch Upfront editor (to launch upfront editor click on "Upfront" link in admin bar or go to Appearance -> Customize from WordPress dashboard).

    I assume those are exact sizes no resizing needed but you threw me off with the red/white thing. The existing ones are white with back mouse over. What am I missing here?

    You can have those images in any color combination or even don't use the hover image at all. Its up-to you.

    I visited your site that took me to a coming soon page (which is good for site under construction) but could you please enable support staff access so we can see the progress and make some corrections if needed.

    To grant access go to WPMU DEV -> Support -> Support Access -> Grant Access or see this manual.

    Also, I suggest you to read the Upfront manual to make your self familiar with Upfront framework:
    https://premium.wpmudev.org/manuals/upfront-elements-and-presets/

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • Dave

    Drag and Drop Code Element to what portion of the page? You only said to drop it to the site. That need to be more specific.

    Anyway I granted support access.

    Here is what I really rather do. Add an entire new set of icons if possible in the footer to include Twitter, Facebook, Snapchat and Instagram. Those are the only ones I need and they will simply link to the customer's account. Nothing more nothing less. And of course I will get her account links from her once I add the icons.

    If that is not possible then I need to replace them with the existing social icons there now but the only problem is there will be more menu links added to the right of CONTACTS and hopefully won't break anything. Probably just one or two more links may be added.

    I also want to style the icons a bit and not make them look so plain.

    Thanks for help

  • Sajid

    Hi Dave,
    Hope you are doing good today :slight_smile:

    Drag and Drop Code Element to what portion of the page? You only said to drop it to the site. That need to be more specific.

    Any where on the page! Yeah, literally, you can you drag and drop any element of Upfront anywhere on the page while you have the Upfront editor open, like MS Word or PhotoShop.

    I will still recommend you to play with upfront theme to get yourself familiar with it.
    https://premium.wpmudev.org/manuals/upfront-structure/

    Right now thanks for granting support staff access. I went ahead and replaced the existing icons with a new set of icons from iconfinder.com. This is the end results of the icons.

    Just go to Upfront editor, edit this element and replace the links of social media profiles, save changes and you are done.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid

  • Dave

    Wow thanks for the help. Looks nice in your image but for some reason I cannot see your changes on my end. Not on my pc but I imagine I need to use the mobile editor for it to show on my phone?

    See attached images

    Working two jobs maybe i should not have joined too soon but it was only to help out this one lady with her website.

    Don't mean to be a crutch believe me. I respect your time. I am already reading up on Upfront what I can till I can dig in more and trust me I will.

    Thanks

  • Dave

    I went ahead and replaced the existing icons with a new set of icons from iconfinder.com. This is the end results of the icons.

    To be clear the existing icons were not replaced. I went ahead and replaced them no problem. I was just baffled that you said they were replaced. Again no problem I replaced them.

    Just go to Upfront editor, edit this element and replace the links of social media profiles, save changes and you are done.

    I did not want to touch that portion until I had the icons in place. This is something I have to get from the client anyway.

    And i won't be using hover feature.

    Thanks for your help and have a nice day!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.