[Resolved] use my self-made social icons and change their size

Home Forums Support [Resolved] use my self-made social icons and change their size

Home Forums Support use my self-made social icons and change their size

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #231878
    Yannick

    Hi Tom,
    I would like to use my own social icons which I have uploaded in my media library, add them to the navigation bar on the right side and make them a bit bigger than the rest of the menu links.
    With FontAwesome I have html code, but with my own icons I only have an url or a filename.

    Is this possible?

    Thank you! πŸ™‚

    #232067
    Tom
    Lead Developer
    Lead Developer

    You should just be able to add the image HTML to a custom link:

    <img src="URL TO YOUR ICON" alt="" />

    #232157
    Yannick

    Thank you so much!! You are the best, can’t say different πŸ˜€

    #232247
    Tom
    Lead Developer
    Lead Developer

    You’re very welcome πŸ™‚

    #241362
    Yannick

    Hi,
    One more question to this topic.When I hover over my FB-social icon it creates a white field around which is overlaying my other social icons, also the “link-field” is overlaying the link of the other social media icon, how can I reduce the “field size” of the icons so they are not interfering with each other?
    http://www.amuddyroad.com

    Best wishes,
    Yannick

    #241430
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a try:

    .main-navigation .main-nav li.facebook-icon a {
        background: transparent !important;
    }
    #241458
    Yannick

    Thank you Tom!
    This solves already the “white field” but when I click on the right side of the Insta icon it opens Facebook. There’s still a “field” left. Now it’s transparent but the Facebook link is still overlaying the Instagram link. Sorry, don’t know how to name my problem better.. hope you understand me πŸ˜€

    #241469
    Tom
    Lead Developer
    Lead Developer

    Just updated the code above – can you give it a try? πŸ™‚

    #241547
    Yannick

    Thank you Tom but the problem is still there. The Facebook link overlays the Instagram link.

    #241548
    Tom
    Lead Developer
    Lead Developer

    Seems fixed on this side – try clearing your browser cache.

    #241555
    Yannick

    I cleared my browser cache but it’s still there, the right half of the Instagram icon leads me to the Facebook link.

    #241563
    Tom
    Lead Developer
    Lead Developer

    Ah, that’s happening because of this CSS you have:

    .facebook-icon {
        padding-top: 30px;
        margin-left: -30px;
    }
    
    .insta-icon {
        padding-top: 30px;
        margin-right: -30px;
    }

    Instead, try something like this:

    .main-navigation .main-nav li.facebook-icon a,
    .main-navigation .main-nav li.insta-icon a {
        padding: 0;
    }
    #241571
    Yannick

    Perfect, Thank you!! πŸ™‚

    #241575
    Yannick

    Now I adjusted everything in the way I like it

    /*social-icons*/
    .main-navigation .main-nav li.facebook-icon a {
        background: transparent !important;
        padding-right: 20px !important; /*Icon right side*/
    }
    
    .main-navigation .main-nav li.insta-icon a {
        background: transparent !important;
        padding-left: 40px !important; /*Icon left side*/
    }
    
    .main-navigation .main-nav li.facebook-icon a,
    .main-navigation .main-nav li.insta-icon a {
        padding: 0;
        padding-top: 20px !important;
    }

    now the social media icons in the mobile menu are also “padded”

    #241713
    Tom
    Lead Developer
    Lead Developer

    Awesome πŸ™‚

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.