Skip to content
Search Articles/

less than a minute read • Updated 9 minutes ago

Customize the SVG icon colors

How to change the fill color of the SVG icons on the cart and checkout, like arrows and padlocks, using custom CSS.

Change the fill color of the SVG icons used on the cart and checkout — like arrows and padlocks — using custom CSS.

Steps

  1. 1

    Identify the icon you want to recolor from the reference list below.

  2. 2

    Copy the corresponding CSS rule and change the fill value to your desired color.

  3. 3

    Go to the Foxy admin.

  4. 4

    Go to Templates > Configuration.

  5. 5

    Check Add custom header and footer code to your templates if it isn’t already checked, to reveal the custom header field.

  6. 6

    Paste your updated rule inside a <style> tag in the custom header field. If code is already present, add yours alongside it rather than replacing it.

  7. 7

    Click Update to save.

SVG icon reference

/* Used within continue shopping button on full-page cart/checkout */
#fc .fa-angle-double-left,
#fc .fc-cancel-continue-shopping svg {
  fill: #666;
}
/* Used within continue shopping button on sidecart */
#fc .fa-caret-left,
#fc .fc-sidecart-only-fixed .fc-fixed-button-left svg {
  fill: #FFF;
}
/* Used within top proceed to checkout button on sidecart */
#fc .fa-caret-right,
[data-fc-sidecart] #fc .fa-caret-right,
#fc .fc-sidecart-only-fixed .fc-fixed-button-right svg {
  fill: #888;
}
/* Used within bottom proceed to checkout button on sidecart and credit card field on tablet/mobile checkout */
#fc .fa-lock,
#fc-cart .fc-action--checkout--button svg,
#fc .fc-checkout__section--payment svg.fc-svg-icon--lock {
  fill: #C1DB9B;
}
/* Used within payments section on full-size checkout */
#fc .fa-lock-large,
#fc .fc-checkout__section--payment svg#fc-icon-lock-large {
  fill: #EEE;
}
/* Used within remove coupon option */
#fc .fa-times-circle,
#fc .fc-transaction__discounts .fc-action--close svg {
  fill: #666;
}
/* Used within shipping fields on sidecart */
#fc .fa-truck,
#fc .fc-address-entry svg {
  fill: #999;
}
/* Used within tax fields on sidecart */
#fc .fa-bank,
#fc .fc-address-entry svg {
  fill: #999;
}
/* Used within address validation modal */
#fc .fa-map-marker {
  fill: #999;
}

Notes

  • Some icons may have different colors applied in specific locations that differ from the defaults shown above.

  • Only the fill value needs to change — the selectors should stay as they are so the rule targets the correct icon.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.