stl314 Posted November 4, 2016 Share Posted November 4, 2016 How do you change the color of the cart icon on the front page at the top of the page? Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 5, 2016 Share Posted November 5, 2016 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;" Quote Link to comment Share on other sites More sharing options...
stl314 Posted November 5, 2016 Author Share Posted November 5, 2016 That turns the price red but not the icon Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 5, 2016 Share Posted November 5, 2016 Hmm... <svg style="color:red;" class="icon icon-basket"><use xlink:href="#icon-basket"></use></svg> or <i style="color:red;" class="fa fa-shopping-cart fa-2x"></i> This is the edit you made? Quote Link to comment Share on other sites More sharing options...
stl314 Posted November 5, 2016 Author Share Posted November 5, 2016 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> </div> <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" ></use></svg></a></div> <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> {$LANG.catalogue.added_to_basket}</div> </div> </div> Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 5, 2016 Share Posted November 5, 2016 <svg style="color:red;" class="icon icon-basket"><use xlink:href="#icon-basket"></use></svg> Quote Link to comment Share on other sites More sharing options...
stl314 Posted November 5, 2016 Author Share Posted November 5, 2016 Yep that is what I tried, the icon remains white, and i have a white background so it doesnt show at all Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 5, 2016 Share Posted November 5, 2016 Please remind me of the web address where I can see this. Quote Link to comment Share on other sites More sharing options...
adamjones Posted November 18, 2016 Share Posted November 18, 2016 I am facing an error. Do I need to use color code? Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted November 18, 2016 Share Posted November 18, 2016 I used this to change the color of an icon: <font color="#BD0000"><svg class="icon"><use xlink:href="#icon-minus-circle"></use></svg></font> Quote Link to comment Share on other sites More sharing options...
harrisorganic Posted November 19, 2016 Share Posted November 19, 2016 Hi Brian, I had a customer report the same issue this evening on an iphone. www.harrisorganicwine.com.au <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. Quote Link to comment Share on other sites More sharing options...
bsmither Posted November 19, 2016 Share Posted November 19, 2016 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. <body> {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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.