Archived topic
Inline SVG in footer
5 replies · Started by Sankalan on February 24, 2021
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.
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;
}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.
Try this CSS:
.heart {
color: transparent;
text-shadow: 0 0 #009edd;
}Lovely! Thanks, David. It worked!
Glad to hear that!
