Author Topic: How to change topcart icons  (Read 1458 times)

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 149
  • Karma: +26/-3
    • View Profile
How to change topcart icons
« on: June 13, 2017, 04:28:05 PM »
The dropdown from the topcart has two icons:
fa fa-shopping-cart fa-fw
fa fa-money fa-fw

What is the location of these icon files?  I would like to replace them with different icons of my own design, but I cannot find the location. 

Offline abantecart

  • Administrator
  • Hero Member
  • *****
  • Posts: 4152
  • Karma: +251/-9
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: How to change topcart icons
« Reply #1 on: June 13, 2017, 10:11:14 PM »
We need your help to build better free open source eCommerce platform for everyone.
See how you can help

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 149
  • Karma: +26/-3
    • View Profile
Re: How to change topcart icons
« Reply #2 on: June 14, 2017, 12:30:22 PM »
Thanks, I see how it works now. 

For future non-techie readers: fa stands for Font Awesome and fw is a class spec that stands for fixed width. 

Font Awesome is a repository of fonts and icons.  I'm not sure if it loads with AC, or it's just out there and accessed by AC. 

If you find the tpl file source for any given AC page or element, you can edit the fa icons specified for that page or element by choosing different icon names from the Font Awesome Icon Library.   google  fontawesome.io

You can also control the size of the displayed icon by changing the fw class specification to 2x or 3x etc.  google  fontawesome.io

I think that fa icons are responsive in that they will grow as the size of their container grows.  I think.  The purpose of the fw class is to lock the size of the icon regardless of how its container size may change. 
If I'm not mistaken, the AC top-cart element is fixed width, so the fw class on those two icons is not essential, thus permitting use of a size class, such as 2x, instead of fw. 
IMO - these icons look better at 2x, and I also prefer the "fa-dollar" over the "fa-money" icon as a checkout symbol, but that's just personal preference. 
Easy to change these 2 icons: cart_top.tpl.

A final bit of trivia: the global search continues for the 'perfect' checkout icon.  There is a 2-year history of user requests to Font Awesome that they create a "cash register" icon, but so far that request has not been met. 
« Last Edit: June 15, 2017, 03:11:03 PM by Geoffrey »

Offline AVS

  • Newbie
  • *
  • Posts: 42
  • Karma: +6/-0
    • View Profile
Re: How to change topcart icons
« Reply #3 on: October 21, 2017, 10:16:24 AM »
Thanks, I see how it works now. 

For future non-techie readers: fa stands for Font Awesome and fw is a class spec that stands for fixed width. 

Font Awesome is a repository of fonts and icons.  I'm not sure if it loads with AC, or it's just out there and accessed by AC. 

If you find the tpl file source for any given AC page or element, you can edit the fa icons specified for that page or element by choosing different icon names from the Font Awesome Icon Library.   google  fontawesome.io

You can also control the size of the displayed icon by changing the fw class specification to 2x or 3x etc.  google  fontawesome.io

I think that fa icons are responsive in that they will grow as the size of their container grows.  I think.  The purpose of the fw class is to lock the size of the icon regardless of how its container size may change. 
If I'm not mistaken, the AC top-cart element is fixed width, so the fw class on those two icons is not essential, thus permitting use of a size class, such as 2x, instead of fw. 
IMO - these icons look better at 2x, and I also prefer the "fa-dollar" over the "fa-money" icon as a checkout symbol, but that's just personal preference. 
Easy to change these 2 icons: cart_top.tpl.

A final bit of trivia: the global search continues for the 'perfect' checkout icon.  There is a 2-year history of user requests to Font Awesome that they create a "cash register" icon, but so far that request has not been met.

 Hi
 In this screen shot, the "View Cart" text  button and  "Checkout" text button appear nicely instead of default small Icon without text.  I did it similar to this. Thanks for the tip.
« Last Edit: October 21, 2017, 11:52:16 AM by AVS »

 

Powered by SMFPacks Social Login Mod