- This topic has 20 replies, 2 voices, and was last updated 6 years, 2 months ago by
Tom.
-
AuthorPosts
-
October 4, 2016 at 1:17 am #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! π
October 4, 2016 at 9:26 am #232067Tom
Lead DeveloperLead DeveloperYou 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-developmentOctober 4, 2016 at 12:02 pm #232157Yannick
Thank you so much!! You are the best, can’t say different π
October 4, 2016 at 4:10 pm #232247Tom
Lead DeveloperLead DeveloperYou’re very welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 3, 2016 at 6:51 am #241362Yannick
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.comBest wishes,
YannickNovember 3, 2016 at 10:44 am #241430Tom
Lead DeveloperLead DeveloperGive 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-developmentNovember 3, 2016 at 11:51 am #241458Yannick
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 πNovember 3, 2016 at 12:26 pm #241469Tom
Lead DeveloperLead DeveloperJust 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-developmentNovember 3, 2016 at 7:51 pm #241547Yannick
Thank you Tom but the problem is still there. The Facebook link overlays the Instagram link.
November 3, 2016 at 8:02 pm #241548Tom
Lead DeveloperLead DeveloperSeems 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-developmentNovember 3, 2016 at 9:37 pm #241555Yannick
I cleared my browser cache but it’s still there, the right half of the Instagram icon leads me to the Facebook link.
November 4, 2016 at 12:04 am #241563Tom
Lead DeveloperLead DeveloperAh, 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-developmentNovember 4, 2016 at 12:54 am #241571Yannick
Perfect, Thank you!! π
November 4, 2016 at 1:22 am #241575Yannick
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”
November 4, 2016 at 10:36 am #241713Tom
Lead DeveloperLead DeveloperAwesome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.