Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Payment Icons? Rate Topic   - - - - -

 
  • drillsar
  • Junior Member
  • Members
  • Join Date: 10-Feb 11
  • 77 posts

Posted 14 December 2017 - 12:27 AM #1

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 17134 posts

Posted 14 December 2017 - 05:47 AM #2

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


DISCOUNTS UNTIL APRIL, 27! GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 305     Multi-Vendor              USD 1150    CS-Cart RU                         21500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 505      CS-Cart RU + UniTheme    33000 руб.


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3081 posts

Posted 14 December 2017 - 06:23 AM #3

He wants to learn to do sprites ;)

 

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


4.5.2 SP2


 
  • Flow
  • Super Duper and Amazingly Sexy Senior
  • Members
  • Join Date: 13-Oct 10
  • 2042 posts

Posted 14 December 2017 - 07:02 AM #4

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.


When life hands you lemons, bring on the Tequila baby!


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3081 posts

Posted 14 December 2017 - 07:59 AM #5

Ur use payment font

https://paymentfont.com/#icons

 

or SVG vertors

 

 

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


4.5.2 SP2


 

Posted 18 December 2017 - 11:41 AM #6

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

 

<div class="my-payment-icons">

<img src="path-to-your-icons/icon1.svg">

<img src="path-to-your-icons/icon2.svg">

<img src="path-to-your-icons/icon3.svg">

</div>

 

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.