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

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-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: 4358
  • Karma: +298/-10
    • View Profile
    • Ideal Open Source Ecommerce Solution
Re: How to change topcart icons
« Reply #1 on: June 13, 2017, 10:11:14 PM »
Please  rate your experience or leave your review
We need your help to build better free open source ecommerce platform for everyone. See how you can help

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 153
  • Karma: +28/-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: 43
  • Karma: +7/-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 »

Offline riswan

  • Newbie
  • *
  • Posts: 20
  • Karma: +3/-0
    • View Profile
Re: How to change topcart icons
« Reply #4 on: October 04, 2019, 01:58:17 AM »
Hi AVS,

How did you moved the text next to the icon.

Right now my code is as below the text is showing below cart and where to reduce the size of the box that contains the icon and text?

   <div class="col-sm-6 col-xs-6 text-left">
                   <a class="btn btn-default" href="<?php echo $view; ?>" title="<?php echo $text_view;?>">
                     <i class="fa fa-shopping-cart fa-fw"></i>
                     <p>CART</p>
                  </a>
               </div>
               <div class="col-sm-6 col-xs-6  text-left">
                   <a class="btn btn-primary" href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>">
                     <i class="fa fa-money fa-fw"></i>
                     <p>CHECKOUT</p>
                  </a>
               </div>

Offline HADY

  • Sr. Member
  • ****
  • Posts: 328
  • Karma: +27/-5
    • View Profile
Re: How to change topcart icons
« Reply #5 on: October 04, 2019, 05:07:50 AM »
HI!

it will be like this:

 <div class="col-sm-6 col-xs-6 text-left">
                   <a class="btn btn-default" href="<?php echo $view; ?>" title="<?php echo $text_view;?>">
                     <i class="fa fa-shopping-cart fa-fw"></i>
                  </a>
               </div>
               <div class="col-sm-6 col-xs-6  text-left">
                   <a class="btn btn-primary" href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>">
                     <i class="fa fa-money fa-fw"></i>
                  </a>
               </div>


that's it


Regards
Hady
Thank you In Advanced
Regards
HADY

Offline riswan

  • Newbie
  • *
  • Posts: 20
  • Karma: +3/-0
    • View Profile
Re: How to change topcart icons
« Reply #6 on: October 05, 2019, 01:40:07 AM »
Thank you Hady, But I want to include the text CART and CHECKOUT.

Offline HADY

  • Sr. Member
  • ****
  • Posts: 328
  • Karma: +27/-5
    • View Profile
Re: How to change topcart icons
« Reply #7 on: October 07, 2019, 03:17:47 AM »
hi!

I didn't got your question clearly, What do you wanna do exactly ?
Thank you In Advanced
Regards
HADY

 

Powered by SMFPacks Social Login Mod