Jump to content

How to change cart icon color on front page (top)


Recommended Posts

Please try this edit (not actual code, but in concept only):

In box.basket.php:

Foundation as shipped with CC6.1.*
<svg class="icon icon-basket"><use xlink:href="#icon-basket"></use></svg>

Foundation as shipped with CC6.0.*
<i class="fa fa-shopping-cart fa-2x"></i>

Add to the <svg> or <i> tags:
style="color: red;"


Link to comment
Share on other sites

My code in that file looks like this: box.basket.php


<div id="mini-basket">
   <div class="show-for-medium-up">
      <div class="text-right"><a href="#" id="basket-summary" class="button white small"><svg class="icon icon-basket"><use xlink:href="#icon-
basket"></use></svg> {$CART_TOTAL}</a></div>
      <div class="basket-detail-container hide" id="basket-detail">
         <div class="mini-basket-arrow"></div>
         {include file='templates/box.basket.content.php'} 
   <div class="show-for-small-only">
      <div class="show-for-small-only"><a class="right-off-canvas-toggle button white tiny" href="#"><svg class="icon icon-basket icon-x2"><use xlink:href="#icon-basket"
      <div class="hide panel radius small-basket-detail-container js_fadeOut" id="small-basket-detail"><svg class="icon"><use xlink:href="#icon-check"></use></svg>

Link to comment
Share on other sites

  • 2 weeks later...

Hi Brian,

I had a customer report the same issue this evening on an iphone.


<div class="show-for-small-only"><a class="right-off-canvas-toggle button red tiny" href="#">

I changed the button from white to red and get a green square on my iphone, but no icon.

Link to comment
Share on other sites

In your case, I see two things:

In cubecart.default.css, there is .button.white{}, but no .button.red{} CSS rule. You will need to add this rule.

In the template box.basket.php, you are wanting to use the newer SVG icon syntax, but there is no {include} statement in main.php to load the SVG definition file. So, either add the include statement as indicated. Make sure the images/icon.sprites.svg file exists.

        {foreach from=$BODY_JS_TOP item=js}{$js}{/foreach}
        {include file='images/icon-sprites.svg'}
        {if $STORE_OFFLINE}

Or rewrite box.basket.php to use the Font Awesome icons.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...