[Resolved] Inline SVG in footer

Home Forums Support [Resolved] Inline SVG in footer

Home Forums Support Inline SVG in footer

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1670220
    Sankalan

    I am trying to add this in footer: https://prnt.sc/105gu4q

    What I am getting is:https://prnt.sc/105gwoz

    Somehow the logo isn’t rendering. I must be doing something wrong. Please help.

    In case you need site access, the details are provided in the private information segment.

    #1670380
    David
    Staff
    Customer Support

    Hi there,

    Thats WP sanitizing the output – it don’t like inline SVGs within that field so it strips it. You would have to use an <img> tag instead. Or build your own Footer Bar with a Block Element and the GB Blocks Plugin which will support inline SVGs.

    Alternative you can use a HTML Symbol like this for the Heart:

    <span class="heart">❤</span>

    Reference to HTML Symbols: https://www.toptal.com/designers/htmlarrows/symbols/heavy-black-heart/

    If the device has Emojis it will use them, if not it will fallback to the built in heart icon in the browser.

    Then a little CSS for color:

    .heart {
        color: #f00;
    }
    #1670494
    Sankalan

    David, thanks for the HTML code and the clarification. It worked. However, the only thing that is not working is the CSS for color. Can’t get the color changed to the primary color of the site, which is #009edd.

    #1670533
    David
    Staff
    Customer Support

    Try this CSS:

    .heart {
        color: transparent;
        text-shadow: 0 0 #009edd;
    }
    #1670535
    Sankalan

    Lovely! Thanks, David. It worked!

    #1670541
    David
    Staff
    Customer Support

    Glad to hear that!

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