Dirty Butter Posted September 2, 2016 Share Posted September 2, 2016 I see from the GitHub that there is a change coming to stop using Font Awesome and to use SVG icons instead. I have added fa fa-pencil and fa fa-gift to a section on MY content.checkout.confirm.php. But I don't know how to add something similar to the icon-sprites.svg. Quote Link to comment Share on other sites More sharing options...
Al Brookbanks Posted September 2, 2016 Share Posted September 2, 2016 You'd need to add a block of code to this file: https://raw.githubusercontent.com/cubecart/v6/master/skins/foundation/images/icon-sprites.svg <symbol id="icon-pencil" viewBox="0 0 1792 1792"> <path d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z"></path> </symbol> Then replace the font awesome code with: <svg class="icon"><use xlink:href="#icon-pencil"></use></svg> Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 2, 2016 Author Share Posted September 2, 2016 Thank you for that, Al. But I still need the gift box. I searched online for svg gift box and found plenty of pictures. But I don't understand how to get the path for one of them. Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 2, 2016 Author Share Posted September 2, 2016 I did find an IcoMoon page full of free icons that show the SVG code. https://icomoon.io/app/#/select So I took the code for the gift box, added it to the icon-sprites.svg file. I took off the title line, and it WORKS!! from icomoon: <symbol id="icon-gift" viewBox="0 0 32 32"> <title>gift</title> <path class="path1" d="M24.11 10c0.566-0.402 1.11-0.851 1.608-1.348 1.044-1.044 1.742-2.328 1.966-3.616 0.246-1.412-0.115-2.723-0.988-3.597-0.697-0.697-1.641-1.065-2.73-1.065-1.551 0-3.185 0.744-4.483 2.043-2.077 2.077-3.288 4.945-3.94 6.991-0.482-2.056-1.444-4.833-3.313-6.702-1.003-1.003-2.285-1.518-3.495-1.518-0.989 0-1.931 0.344-2.633 1.046-1.562 1.562-1.351 4.306 0.471 6.128 0.65 0.65 1.409 1.189 2.21 1.638h-6.782v8h2v14h24v-14h2v-8h-5.89zM21.073 4.007c0.866-0.866 1.948-1.384 2.892-1.384 0.334 0 0.803 0.070 1.139 0.406 0.813 0.813 0.357 2.697-0.977 4.031-1.373 1.373-3.221 2.318-4.826 2.939h-1.584c0.58-1.798 1.627-4.264 3.356-5.993zM7.31 5.028c-0.022-0.285-0.002-0.82 0.381-1.203 0.32-0.32 0.743-0.387 1.042-0.387v0c0.664 0 1.358 0.313 1.904 0.859 1.059 1.058 1.93 2.743 2.521 4.871 0.016 0.057 0.031 0.115 0.047 0.171-0.057-0.015-0.114-0.031-0.171-0.047-2.128-0.591-3.813-1.462-4.871-2.521-0.495-0.495-0.805-1.13-0.853-1.743zM14 30h-8v-13h8v13zM14 16h-10v-4h10v4zM26 30h-8v-13h8v13zM28 16h-10v-4h10v4z"></path> </symbol> Another question about SVG: I currently have fa-2x on several places: <div class="show-for-small-only text-center"> <a href="#" class="left-off-canvas-toggle button white tiny"><i class="fa fa-bars fa-2x"></i></a> <a href="#" class="button white tiny show-small-search"><i class="fa fa-search fa-2x"></i></a> <a href="#" class="right-off-canvas-toggle button white "><i class="fa fa-shopping-cart fa-2x"></i></a> <div id="smallt-basket-detail" class="hide panel radius small-basket-detail-container js_fadeOut"><i class="fa fa-check"></i> Added to Basket</div> </div> How do you change the SIZE of an SVG icon? Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 2, 2016 Share Posted September 2, 2016 I'm researching this now, and my initial conclusion is that you would create this: <symbol id="icon-gift-2x" viewBox="0 0 64 64"> <title>giftx2</title> ... followed by the rest An SVG graphic will scale to its viewBox. Still researching. Quote Link to comment Share on other sites More sharing options...
bsmither Posted September 2, 2016 Share Posted September 2, 2016 It is possibly this way: <span style="font-size:2em;"><svg class="icon"><use xlink:href="#icon-pencil"></use></svg></span> Quote Link to comment Share on other sites More sharing options...
Dirty Butter Posted September 2, 2016 Author Share Posted September 2, 2016 I see this line in stock 6.0.13 box.basket.php <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> <svg class="icon icon-basket icon-x2"> I just tested it and it DOES double the size of the icon. Quote Link to comment Share on other sites More sharing options...
Al Brookbanks Posted September 2, 2016 Share Posted September 2, 2016 That's right Rosemary. The foundation skin only used fa-x2 which doubles the size. I added a class to the cubecart.css file to mimic this and you found it. ??? You can use CSS to change size and colour. 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.