Adding New Icon Fonts To Theme

Developers Frontend
1

Hi



I need to add a few custom icons / banners on the footer of our stores. I have been reading the CS Cart documentation (Welcome to CS-Cart Documentation! — CS-Cart 4.2.x documentation) -



In a Smarty block I have the following code:


```php


     


```

I read that CS-Cart (from V4) stores the media in

design/themes/our theme/media/

and but I am a bit lost here as a laymen on which css file to amend and how to do it.

I f you look at the formented code that helps to displays the paypal, visa and mastercard logo's below.

[attachment=9574:screenshot_footer_icons.png]

Can someone give me a hint in the right direction ?

screenshot_footer_icons.png

2

[quote name='Webmaster_at_Mungotedo' timestamp='1432145497' post='215156']

Hi



I need to add a few custom icons / banners on the footer of our stores. I have been reading the CS Cart documentation ([url=“Welcome to CS-Cart Documentation! — CS-Cart 4.2.x documentation”]http://docs.cs-cart.com/4.2.x/[/url]) -



In a Smarty block I have the following code:


```php


     


```

I read that CS-Cart (from V4) stores the media in

design/themes/our theme/media/

and but I am a bit lost here as a laymen on which css file to amend and how to do it.

I f you look at the formented code that helps to displays the paypal, visa and mastercard logo's below.

[attachment=9574:screenshot_footer_icons.png]

Can someone give me a hint in the right direction ?
[/quote]

Hi

just use our free addon http://www.cscart.biz/footer.html

Fotis
3

[quote name='dvsgr' timestamp='1432183608' post='215183']

Hi



just use our free addon [url=“Ετοιμα Εικονίδια Footer - Δωρεάν CS-Cart Addons at Cscart.Biz | CS-Cart Market by Dvs.gr”]http://www.cscart.biz/footer.html[/url]



Fotis

[/quote]



Fotis



I really appreciate the link but I would like to do it without adding a another addon. I much rather work with addon's that do bit more than just add images.



Anthony

4

Hi Anthony



no problem. You could do that your self via my_changes addon. But this is what we did with this small addon. The difference is that you select via the addon setting screen which icons to show or not from a big variety of card icons, shipping icons and bank icons.



We did that for our stores so that we don't have to do the same thing over and over again, and we thought we share this with other people that might need that.



You could download it and open to see how it works.



Fotis

5

Using the HTML block you can insert images directly from the WYSIWYG editor. Please check

6

Dear friends,



I appreciate you feedback.



For me it is not just getting the job done but also a learning experience that is why I would like to learn to do it without an html block or that great addon you made Fotis.



But Aleksey that option of using an html block instead is not such a bad fall back option.



However for now I am trying to see if I can succeed using the selector



Regards



Anthony Katgert

7

Anthony



you could try the my_changes cs-cart proposed method via hooks



You can override the payment_icons.tpl in design/themes/responsive/templates/blocks/static_templates



there is a hook in there called {hook name=“index:payment_icons”}



Tha means you can create a file called payment_icons.override.tpl inside the folder design/themes/responsive/templates/addons/my_changes/hooks/index if responsive is your theme.



Then you can create new divs with your own classes like



 
 



You also need the css classes to be added in the visual editor custom css tab



like



.mypayment1 {
background :url(images/mypayment1.png) no-repeat center center;
}
.mypayment2 {
background :url(images/mypayment2.png) no-repeat center center;
}



Last but not least you need to upload those image files in your images folder in your skin like /design/themes/responsive/media/images





Clean your store cache and Thats it (admin.php?cc&ctpl)



PS dont forget to enable the My changes Addon as this is by default deactivated



Fotis

8

Please try the following code in this case:



 
 
 

 


 

9

And if you dont like to work with image files you can use the Fontawsome icons instead



Add to [font=arial, verdana, tahoma, sans-serif][color=#282828] [/color][/font][color=#282828][font=arial, verdana, tahoma, sans-serif]design/themes/your_skin/templates/addons/my_changes/hooks /index/meta.post.tpl [/font][/color]

[color=#282828][font=arial, verdana, tahoma, sans-serif]this code inside[/font][/color]






[color=#000088]Then go on in the previous file [/color][color=#282828][font=arial, verdana, tahoma, sans-serif]design/themes/responsive/templates/addons/my_changes/hooks/index [/font][/color][color=#000088]and add[/color]



.ty-payment-icons_a__item.mypayment1::before {
content: "\f1f0";
font-family: fontawesome;
}




You can find all fonetawsome content values ( “\f1f0” is for visa icon) here http://astronautweb…t/font-awesome/ plus some info on that technic.

10

dvsgr, actually the required icons already exist in default icons set. Please check my previous post.

11

I know eComlabs



but I use the fontawsome as alternative, I like ti better as the default icons and I use color option and size too, to make them look better in my theme. ;-)



Fotis