Payment Icons?

I am trying to add payment icons to the footer. I understand have to edit payment_icons.tpl and the styles.less. What I don't understand how do you know position of an image. How do you make another payments.png? Thanks

Why you cannot just create HTML block with your own images?

He wants to learn to do sprites ;)

Why you cannot just create HTML block with your own images?

For newcomers I understand this can be confusing. But yeah, just create an html block and put a nice image in it.

Or make a banner with payment icons and add a banner block filled with that banner.

Ur use payment font

https://paymentfont.com/#icons

or SVG vertors

gt metrics, google page speed are giving F now for poor image optimization

You can create an HTML block with content like the following:

And then add to your custom css style the following:

.my-payment-icons img {
width: 36px;
height: 36px;
display: inline-block;
}

You can replace the width and height values to whatever size you wish.

A good source for svg images is flaticon. Just google it and it will come up.