How to change topcart icons

[Geoffrey]

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. 

[abantecart]

Welcome to AbanteCart.

I think your are looking for this template:
https://github.com/abantecart/abantecart-src/blob/master/public_html/storefront/view/default/template/blocks/cart_top.tpl

[Geoffrey]

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. 

[AVS]

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.

[riswan]

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>

[HADY]

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

[riswan]

Thank you Hady, But I want to include the text CART and CHECKOUT.

[HADY]

hi!

I didn't got your question clearly, What do you wanna do exactly ?