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

[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! 🙂

[Tom]

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Yannick]

Thank you so much!! You are the best, can’t say different 😀

[Tom]

You’re very welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

Give this CSS a try:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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 😀

[Tom]

Just updated the code above – can you give it a try? 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Yannick]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Yannick]

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

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Yannick]

Perfect, Thank you!! 🙂

[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”

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts