Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 13, 2025 at 4:54 pm #1491299
    rixi

    Hi,
    i would like to have the normal instagram icon at the same place where it is right now beside the navigation but in the normal colors of it.
    Would you have a code for that? Would be great :)

    Many regards rixi

    November 14, 2025 at 5:28 am #1491317
    Ismael

    Hey rixi,

    Thank you for the inquiry.

    You can try this code in the Enfold > General Styling > Quick CSS field:

    #top #wrap_all .social_bookmarks .social_bookmarks_instagram a {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    Result:

    Screenshot-2025-11-14-at-12-27-32-PM

    Best regards,
    Ismael

    November 14, 2025 at 6:33 am #1491323
    rixi

    Hi Ismael,
    thanks a lot!
    I put the following size inbetween, but nothing changed.

    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;

    Is there a way to make the symbol a little bit bigger?

    Many regards rixi

    November 14, 2025 at 11:06 am #1491327
    Guenni007

    Some thoughts for DEV in private Content.
    The most perfect method would certainly be to upload the original SVG offered by Instagram (Meta) to the media library. However, this is not possible due to its size. I have recalculated it to normal sizes for such icons. So now it is only 20 KB in size, instead of 11 MB. Unfortunately, the graphic implementation of the original is complex.
    see here my svg file:

    November 14, 2025 at 12:12 pm #1491330
    rixi
    This reply has been marked as private.
    November 14, 2025 at 1:38 pm #1491333
    Guenni007

    The problem this inserting it from media-library is – that inside the Original svg of Instagram a clipPath or mask is used. both – mask and clip-path are used via url and ID of that path. If there are more than one instance of the icon on the page – the ID is not unique anymore. And browser do not render them.
    Enfold (as you can see in the DOM) on using Logo left – Menue below generates two navigations – the one is set to display: none on desktop and vice versa for responsive case ) svg two times in the DOM then clip-path won’t work.

    I have never seen such a poorly made SVG intended for the web. The shape could have been filled using a direct gradient, but the folks at Meta apparently didn’t want that.

    November 14, 2025 at 1:43 pm #1491334
    rixi
    This reply has been marked as private.
    November 15, 2025 at 12:21 pm #1491356
    Guenni007

    so because – the original insta logo is to complex to insert it as svg file to the social media icons.
    I would place the normal instagram icon via font-icon !
    and replace that by css .

    maybe you upload two versions of that logo:

    and for hover style:

    then to quick css:

    #top #wrap_all .av-social-link-instagram a:focus, 
#top #wrap_all .av-social-link-instagram:hover a {
  color: unset;
  background-color: unset;
}

.social_bookmarks_instagram a {
  font-size:0 !important
}

.social_bookmarks_instagram a:before {
  content:"";
  background-image:url(/wp-content/uploads/Instagram_Glyph_Gradient.png);
  background-size:contain;
  display:inline-block;
  width:inherit;
  height:inherit;
  border-radius: 10px;
  background-position:center center;
}

.social_bookmarks_instagram:hover a:before {
  background-image:url(/wp-content/uploads/Instagram_Glyph_Gradient_invers.png);
  border-radius: 10px
}

    see (the first in the row) https://basis.webers-testseite.de/
    the second icon on the right is the svg icon (with its trouble to use the mask (or clipPath)

    November 15, 2025 at 6:55 pm #1491365
    rixi
    This reply has been marked as private.
    November 15, 2025 at 8:46 pm #1491366
    Guenni007

    Sorry, no private content for me—I’m just a participant as you are. So you’ll have to wait until the mods respond to you.

    November 17, 2025 at 5:57 am #1491389
    Ismael

    Hi,

    Thank you for the update.

    If you want to revert to using the default icon, please remove the previous modifications, then add this css code to enlarge the instagram icon and adjust the color:

    #top #wrap_all .social_bookmarks .social_bookmarks_instagram a {
    background: linear-gradient(44deg, #ef1a88, #e6683c, #fa991f, #ee166c, #bc1888);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 50px !important;
    width: 100%;
    height: 100%;
    line-height: 80px;
}

.responsive #top #header .main_menu .social_bookmarks {
    margin-top: -40px !important;
    overflow: visible;
}

    Screenshot-2025-11-17-at-12-56-53-PM

    Best regards,
    Ismael

    November 17, 2025 at 11:11 am #1491396
    Guenni007

    Ismael’s suggestions work, of course, but they no longer have anything to do with Instagram’s corporate design.

    Link: https://www.meta.com/brand/resources/instagram/instagram-brand/

    But if you’re not too particular about the colors, you can also use the codes above.

    November 17, 2025 at 11:14 am #1491397
    rixi

    Hi Günni,
    thanks a lot!
    I tried out the last cade but there was just a part of the logo visible. But i think i leave it now in pink, i think that will be ok too, but thanks a lot for all your help! I reall appreciate that :)

    Many regards rixi

    November 17, 2025 at 11:34 am #1491398
    Guenni007

    by the way: if you are on instagram page – they have as favicon a png file:

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