[Resolved] using svg icon in footer

[Halil]

Hi,
I read few posts regarding similar topic but I ended up with enormously big logo of mine in the footer!

Simply I’d like to create very similar content to “Copyright” section. Year, copyright icon plus site name, my svg logo etc.

I tried to add svg markup (from https://jakearchibald.github.io/svgomg/) to Copyright section but that didnt work.

I tried generate-footer hook but ended up with gigantic logo.

How can I achieve this?

[Leo]

Hi there,

Can you add the logo in and give it also give it a class?

Then we can use some CSS to resize the image.

Let me know 🙂

[Halil]

thanks Leo but I’m not that tech user, I didnt understand what to do, could you pls guide me?

I want footer look like, c sign , year, site name, my humble logo.

[Halil]

I have logo both as svg file and svg markup

[Ying]

Hi Halil,

You can add something like this to customizer > layout > footer> copyright:

%current_year% %copy% YOUR-COMPANY-NAME
<img src=" THE-LOGO-URL" class="footer-logo" height= "20px" width="20px">

Let me know if this helps 🙂

[Halil]

almost done Ying, I now half understand what you guys mean by “class”.

is it also possible to centrally align all of them?

[Ying]

You can add this CSS:

.copyright-bar {
    display: flex;
    align-items: center;
}
.footer-logo {
    margin-left: 10px;
}

The second CSS added a space on its left side, feel free to change the value 🙂

[Halil]

you guys really unbelievable! I appreciate your approach in terms of support.

I’m not 100% sure that GP is the fastest theme on earth, but I’m sure it gives the best support ever.
🙏

[Ying]

Really glad to hear that 🙂

We are all trying our best!

[Lorenzo]

Hi everyone,
I stumbled upon this thread as I was too trying to insert an svg icon in the Copyright section.

I copied the svg html markup of the heart icon provided with the theme:

<svg aria-hidden=”true” role=”img” height=”1em” width=”1em” viewBox=”0 0 512 512″ xmlns=”http://www.w3.org/2000/svg”><path fill=”currentColor” d=”M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z”></path></svg>

But it won’t show.

Is there a way to show it?

Thanks

[David]

Hi there,

can i see the site where the code has been added ?

[Lorenzo]

Hi David,
thank you for the reply and your time.

Sure thing, here it is: http://piccolissimo.shibumidev.it/

Thanks

p.s. Just to integrate the issue.
I Correctly insert the svg html markup in the Copyright sectino when customizing the footer layout, but it seems that it just erases it after I save and exit the customizer.

[David]

Ok, so WP or something is stripping the HTML.

Options:

a. create a shortcode by adding this PHP Snippet to your site and add in your SVG:

add_shortcode( 'show_me_love', function() {
    ob_start();
  
    echo 'add your SVG code here';

    return ob_get_clean();
} );

then add the [show_me_love] shortcode in place of the SVG HTML

b. use the Block Element – Site Footer to build the footer using the block editor:

https://docs.generatepress.com/article/block-element-site-footer/

[Lorenzo]

Hi David,
thank you again for your time and reply.

Got it! I did use the “b” option on other sites. I’ll stick with that.
It would be great to have it work though. The <a> tags work fine, only the <svg> doesn’t.

Thank you again for the great support! I’m a huge fan of the theme and plugin!

[David]

The issue is an SVG can contain other types of code, so they can be used by bad people to inject malicious code into a site. So WordPress and other security mods on a server are likely to remove that code during any sanitisation processes they run as standard, whether theres bad code or not.

Glad to hear option b is good for you.

[Author]

Posts