Hey all,
It gives me trouble after upgrading to the responsive theme. Any help?
www.shishastar.ch
Its like the old code, but with new classes :
.top-cart-content .ty-icon-basket {
background:url("images/addons/theme/cart-icon.png");
width:18px;
height:15px;
display:block;
margin-top:2px
}
.top-cart-content .ty-icon-basket:before {
content:'';
}
ok the one from florinsurdu worked great for me but now i got the icon i want there with the other one gone, but anyone know how now to get a before and after icon. I want to have it that before it gives me a black/white icon and after somebody adds something to the cart it goes to a colored icon.
This is what i'm currently using for code
.top-cart-content .icon-basket{ background:url(“images/cart-before.png”); width:15px; height:13px; display:block; margin-top:2px }
.top-cart-content .icon-basket:before{ content:''; }
[quote name='lzacharyjw' timestamp='1401901124' post='185082']
ok the one from florinsurdu worked great for me but now i got the icon i want there with the other one gone, but anyone know how now to get a before and after icon. I want to have it that before it gives me a black/white icon and after somebody adds something to the cart it goes to a colored icon.
This is what i'm currently using for code
.top-cart-content .icon-basket{ background:url(“images/cart-before.png”); width:15px; height:13px; display:block; margin-top:2px }
.top-cart-content .icon-basket:before{ content:''; }
[/quote]
This works for version 4.2.1 responsive theme. Let's you have separate icons for “empty” and “filled” carts. Just add this code in the Custom CSS section the Theme Editor:
.top-cart-content .ty-icon-basket.empty {
background:url("https://url_of_empty_cart_image.png"); width:17px; height:12px; display:block; margin-top:2px
}
.top-cart-content .ty-icon-basket.filled {
background:url("https://url_of_filled_cart_image.png"); width:17px; height:12px; display:block; margin-top:2px
}
.top-cart-content .ty-icon-basket:before {content:'';
}
Thank you for the info, but none works on my basic theme.
So played around and this works on my latest version.
.icon-basket:before {
content: "\e000";
}
.icon-basket.empty {
background: url(../media/images/basket.png) no-repeat;
width:16px;
height:16px;
display:block;
margin-left:-10px;
}
.icon-basket.filled {
background: url(../media/images/fullbasket.png) no-repeat;
width:16px;
height:16px;
display:block;
margin-left:-10px;
}
Icons Fullbasket and emptybasket
[attachment=8856:fullbasket.png] [attachment=8855:basket.png]
The margin-left you should set this to your own.
For responsive theme you could use the code from Swim Shady
Regards
I'm using fontawesome in my store, with a little css and imagination, the result is great!
As for the icomoon option:
If you have uploaded you fonts, less files etc, you can use the built in editor's custom css and simply change the content of that class.
Don't forget to set the font-family though, as the default class does not uses the one by icomoon:
.ty-icon-basket:before{
font-family: 'icomoon';
content: "Whatever content you get from icomoon for the icon you want";
}
In File Editor templates/index.tpl right after place to add Font Awesome:
In Visual Editor add to Custom CSS of your theme:
.ty-icon-basket:before{
font-family: "FontAwesome";
content: "\f07a";
}
hi
my idea on cs-cart 4.3.3: remove ty-icon-basket class to replace icon class other
1. Change Icon Fonts from icomoon.io
http://docs.cs-cart.com/4.2.x/themes/media.html
2. Remove ty-icon-basket class in ...templates/blocks/cart_content.tpl and to replace icon class in icomoon.io
before
after
icon-user is the corresponding icon class of the choice in icomoon.io
Hi
here is the guide describing how to do it
http://forum.cs-cart.com/topic/38988-cart-icon/?view=findpost&p=230112
Fotis