How can we help?

How to change the icon or icon color for the cart button on mobile

Table of Contents

Fluid Checkout only provides one icon for the cart button. However, it is possible to change the icon for the cart button to match what is used for the website’s theme or any other icon.

There are a few ways to do it, which one to use will depend on how your theme’s icons are added.

Before we go through ways you can change the cart icon, there are a few things we need to keep in mind:

  1. The ideal size for icons is 24 x 24 pixels.
  2. When using icon fonts, the color of the icon will be the same as the button text, but it can be changed with CSS.
  3. When using images, no colors are changed and the image is used as-is.

Changing the color of the cart icon #

If you just want to change the color of the icon, but not which icon or image is used:

.fc-checkout-header .fc-checkout__cart-link:before {
	color: goldenrod;
}

The result will look like this:

To customize the color of the icon:

  1. Change the value of the color property to set a different color for the icon.
  2. This applies when using an icon font (see “Using icon font”)

Using an icon font to replace the cart icon #

When using a theme that uses an icon font, such Font Awesome icons, use the CSS code snippet below to change the icon for the cart button.

.fc-checkout-header .fc-checkout__cart-link:before {
	font-family: "Font Awesome 5 Free" !important;
	content: "\f290";
}

This example is based on the Divi theme and Font Awesome as the icons font. The result will look like this:

To customize which icon to use:

  1. Change the value of the font-family property to that which is appropriate for the icons font that is used by your theme. The !important directive is necessary to overwrite the value defined by Fluid Checkout.
  2. Change the value of the content property to match the icon type from the icons font.

Using images to replace the cart icon #

To replace the default icon with an image, use the CSS code snippet below.

.fc-checkout-header .fc-checkout__cart-link:before {
	content: "";
	background-image: url("https://res.cloudinary.com/webalys/image/private/w_64,h_64,ar_1/f_auto/v1/icons/cart/shopping-cart-basket-1-6vt7xu1yp3eqoday6ka7kk.png/shopping-cart-basket-1-rh3cg2d362pw2a7rqc3mb.png");
	background-size: 100% 100%;
}

This example uses a basked image from the Streamline Icons set. The result will look like this:

To customize which image to use:

  1. Change the value of the background-image property to point to the image file to display as the cart icon. The color of the icon in this case will be that of the image used.

Removing the cart icon #

In case you don’t want to use any icon for the cart button, the CSS code snippet below will remove the icon and set the spacing for the button text.

.fc-checkout-header .fc-checkout__cart-link:before {
	content: "";
	width: 0;
	margin-right: 5px;
}

The result will look like this:

What are your Feelings