How to change the cart icon on the responsive theme?
Hi
go and open in /design/themes/your_skin/templates/addons/my_changes/hooks /checkout/dropdown_title.override.tpl
and copy this code inside
{if $smarty.session.cart.amount}
{$smarty.session.cart.amount} {__("items")} {__("for")} {include file="common/price.tpl" value=$smarty.session.cart.display_subtotal}
{else}
{__("cart_is_empty")}
{/if}
and then this file/design/themes/your_skin/templates/addons/my_changes/hooks /index/meta.post.tpl
and add this code
IYou will get a small cart . If you like to choose another icon have a look at this page http://fortawesome.g…ome/cheatsheet/ to find the style you want
PS check in Addons screen that the My Changes Addon is enabled, as its disabled by default install.
Fotis
Hello Fotis.
There are some way to upload only few icons? instead use whole collection of font "awesome" with those 600 icons?
Hello Fotis.
There are some way to upload only few icons? instead use whole collection of font "awesome" with that 600 icons?
Hi Rafass
you need to use then your own set. You can use icomoon. Browse to the library page and use FontAwesome, you can augment FontAwesome's libary with your custom icons in SVG.
Î¥ou can also subset and combine icon fonts using:
- icnfnt.com (officially supported subsetting of font-awesome icons)
- fontello.com (create a custom subset from a number of icon fonts that are widely available)
If you want access to the raw svg and .png files, there is a git repo for that: Font-Awesome-SVG-PNG
Fotis
Thanks! I've been testing a little with fontello / icommon and others to get the .svg files.
but the question is, how can I upload and use my own icons in Cscart? in fact I just would like to upload 5 or 6 icons only 8)
If you have already been testing the icommon then you know you can create your own set and then you have to invetigate a little bit as there is no official guide on which files you have to upload where.
To give a hint you need to look into the design/themes/[your_theme]/media/fonts folder of your active skin. You will find all the icon files and formats you need to have .
Fotis
Back in 2013 energothemes posted this
Hello,
We have used http://icomoon.io/app-old/ (the new app has some issues) to add more glyphs to our designs.
Just drag and drop the glyphs.svg file from design/themes/[your_theme]/media/fonts and select what you want to use.
After selecting all the glyphs you want to use click the font button to the bottom of the screen and bind your new glyphs to:
e024 for my account
e044 for cart icon
Download the new fonts and rename them to glyphs.eot/svg/ttf/woff.
Make a backup of the cscart glyphs and then copy the new ones over.
ok here it is a very comprehesive guide for adding your icons to the ones of CS-Cart. I know its a long one (19 steps!!!) but trust me it works and its no big deal.
1.Go to https://icomoon.io/app/
2. Now click on the left at the hamburger icon hit it and from the list click Icon library.
[attachment=10166:glyph-icons_0016_Layer 1.jpg]
3. From the sets click add to the IcoMoon - Free
[attachment=10165:glyph-icons_0015_Layer 2.jpg]
4. You will get back to the previous screen where now you have the library in a grid.
[attachment=10164:glyph-icons_0014_Layer 3.jpg]
5. Click on the backet in the top toolbar and select and drag to delete as many icons you dont need from this set.
[attachment=10162:glyph-icons_0012_Layer 6.jpg]
6. Now go to the small hamburger menu on the right side of the icon grids and click form the list import to Set.
[attachment=10161:glyph-icons_0011_Layer 7.jpg]
7. You will have to alredy have downloadedthe original CS-Cart glyphs.svg file in design/themes/[your_theme]/media/fonts and click on it.
[attachment=10160:glyph-icons_0010_Layer 8.jpg]
8. Now you have your new set. Old CS-Cart Icons plus your new ones
[attachment=10159:glyph-icons_0009_Layer 9.jpg]
9. Now you need to select all of them. Go to the smal hamburger menu of the icosn grid on the right again and hit Select all
[attachment=10158:glyph-icons_0008_Layer 10.jpg]
10. At the page bottom you have on the right a big button called Generate font. Hit it.
[attachment=10157:glyph-icons_0007_Layer 11.jpg]
11. In the new screen you can click on the bottom right corner again DOWNLOAD
[attachment=10173:glyph-icons_0006_Layer 13.jpg]
12. Your new icons are ready, now we need to change CS-Cart. Dont close that page we are going to need it later!
[attachment=10172:glyph-icons_0005_Layer 14.jpg]
13. Open and extract from the file icomoon.zip the folder
14. Rename all files like the ones from the folder design/themes/[your_theme]/media/fonts (glyphs.eot/svg/ttf/woff).
15. Delete all files in folder design/themes/[your_theme]/media/fonts (after you have copied them to a safe place!) and upload all the new renamed files from the folder fonts.
16. Now for the tricky part. You need to add some line in the file /design/themes/[your_theme]/css/tygh/icons.less, so go on and open it with a text editor.
17. Add at the end of the file the new icons we just added from the library. The names can be whatever you like, jsut dont use any existing classes.
[attachment=10171:glyph-icons_0004_Layer 15.jpg]
The format is like
.ty-icon-googlepl:before {content: "\e605";
}
The name googlepl is the name I am setting for this icon and the part "\e605" you can get it from the page we have left opened in icomoon in step 12
18. So in order to find the code for the new icon you go to the download page in icomoon page and look for the icon you need . the code is under the icon (e605)
[attachment=10170:glyph-icons_0003_Layer 16.jpg]
19. Now for the final step for this to work. Go to line 40 of the opened file icons.less. You need to add the new icon class there, preferbly at the very bottom of this statement right before the closing bracket - don't forget to put a comma at the one before the your new class, it wont work- so .ty-icon-googlepl and hit save.
[attachment=10169:glyph-icons_0002_Layer 17.jpg]
That's it. Just clean your store cache (use admin.php?cc&ctpl) and now you can add your new icon by using the same technic as in the social bar for example
[attachment=10168:glyph-icons_0001_Layer 18.jpg]
[attachment=10167:glyph-icons_0000_Layer 19.jpg]
This should work on all 4x versions. The guide was made on latest version 434
Important: when you import the new icons in the cs-cart Set in step 7, there is the possibility to change the existing code of CS-Cart, if a Free Icomoon has the same code. So you might get a Pinterest Icon instead of Twitter (see the final image of the store I left that in purpose) because the have the same code and Icomoon wins on that.
I would open the CS-Cart svg file and check if the icons I have choosen have the same code with some existing icons. You can then change those codes in the last step before download (step 11).
Offcourse this is also the way to change the existing icons of CS-Cart, by replacing the code of a new icon with the code of an existing CS-Cart icon.
I hope this will get handy for those who want to make a small difference.
Fotis
1 Like
Thanks Fotis! 8)
I've created my first icons
Fantastic tuto! 8)
I've created my first icons
Fantastic tuto! 8)
I am Happy this could help you!
;)
Following this great tutorial I've successfully uploaded new icons, but I'm still facing problems to change the icon of the cart...
To change it is necessary change the classes with my changes in
/design/themes/your_skin/templates/addons/my_changes/hooks /checkout/dropdown_title.override.tpl as you explain above fotis?
Following this great tutorial I've successfully uploaded new icons, but I'm still facing problems to change the icon of the cart...
To change it is necessary change the classes with my changes in
/design/themes/your_skin/templates/addons/my_changes/hooks /checkout/dropdown_title.override.tpl as you explain above fotis?
Hi again
they key to this is that part
Important: when you import the new icons in the cs-cart Set in step 7, there is the possibility to change the existing code of CS-Cart, if a Free Icomoon has the same code. So you might get a Pinterest Icon instead of Twitter (see the final image of the store I left that in purpose) because the have the same code and Icomoon wins on that.I would open the CS-Cart svg file and check if the icons I have choosen have the same code with some existing icons. You can then change those codes in the last step before download (step 11).Offcourse this is also the way to change the existing icons of CS-Cart, by replacing the code of a new icon with the code of an existing CS-Cart icon.
So you just have to find the class name\code for the existing cart icon, delete it from the icomoo list and rename the new icon you created with the same code as the exisitng icon. After thatfollow the steps from 11 to the end and you will get your new Cart icon.
Thats it
Fotis
Thanks for your kind explanations Fotis. I'll try to do that.
--
Is funny how difficult and problematic is change a simple icon.
Now I'll have to waste a lot of time trying to delete that icon, the logo of @CSCART well done.
Well nightmare.
Don't know why they put that icon there... really.
I got to step 3. Step 4 does not exist as far as I can tell? Also, can you upload your own custom ones on there?
Bumping this topic... Fotis are IcoMoon fonts already a part of CS Cart since V4.4 ??
Hi
No Its a Customized version integrated but you can still use this method to integrated your icons.
Fotis
Fotis,
Is there a risk that by following your procedure that you may loose the icon already in place in the theme that we use ?
PS
a real shame / sham that there is no CS Cart icon while there is one for Magento and Prestashop.
I am also missing icons for the new and highly improved social media platforms like Gab.ai, Minds.com and Bitchute.com
The legacy social media kartel of Google, Facebook, Twitter and Microsoft need some competition also in terms of icons.
Well you can always add the full set via meta method. So this way you will have CS-Cart and the whole set.
Geia sou Foti
There is no /design/themes/[your_theme]/css/tygh/icons.less file any more.
Well you can always add the full set via meta method. So this way you will have CS-Cart and the whole set.